생활코딩

Coding Everybody

코스 전체목록

닫기

Text 객체

소개

텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 

아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다.

<p id="target1"><span>Hello world</span></p>
<p id="target2">
    <span>Hello world</span>
</p>
<script>
var t1 = document.getElementById('target1').firstChild;
var t2 = document.getElementById('target2').firstChild;

console.log(t1.firstChild.nodeValue);
try{
	console.log(t2.firstChild.nodeValue);	
} catch(e){
	console.log(e);
}
console.log(t2.nextSibling.firstChild.nodeValue);

</script>

실행결과

Hello world
TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}
Hello world 

주요기능

텍스트 노드의 값을 가져오는 API

  • data
  • nodeValue

조작

  • appendData()
  • deleteData()
  • insertData()
  • replaceData()
  • subStringData()

생성

 

댓글

댓글 본문
작성자
비밀번호
  1. 굼벵이
    완료
  2. 모든일이일사천리
    Done : 19/11/24 7PM
  3. JuicyFresh
    감사합니다.
  4. 생선과고양이
    20180427 감사합니다
  5. 박인호
    12-30
    수강완료.
  6. 개발자가 되고싶은 고등학생
    감사합니다.
  7. melius17
    감사합니다.
  8. crable
    감사합니다
  9. 망고
    소개 부분에 "텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. " CharacterData 가 CharcterData로 잘못 표기되어 있습니다. 중요한건 아니지만 제보합니다
  10. 꼬딩
    나도잘 모르겠어요
    대화보기
    • hyuna
      감사해요
    • tachyon
      감사합니다
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2016.07.02 토
      고맙습니다 2.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 27
      잘보고 갑니다~!
      오늘은 여기까지하고 내일 다시 공부를 이어가도록 하겠습니다/
    • JustStudy
      고맙습니다
    • Peater Han
      하단의 생성의링크 목록에
      'docuemnt.createTextNode()' 오타 같네요.
    • 2015-11-13
      css에서도 공백을 텍스트로 인식하나요?
      이게 약간 헷갈리는데 css에서 가상 선택자를 사용할때 말이죠.
      <ul>
      <li>1</li>
      <li>2</li>
      </ul>

      위와 같은 html이 있다면
      css에서 가상선택자로
      ul:first-child {}를 쓴다면 공백이 아니라 바로 <li>1</li>를 의미하잖아요.
    • 코딩!
      공백!!
    • 땡깡쟁이
      잘 봤습니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기