웹브라우저 JavaScript

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. 꼬딩
    나도잘 모르겠어요
    대화보기
    • 감사해요
    • 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 자세히 보기