Text 객체

텍스트 노드에 대한 DOM 객체로 CharacterData를 상속 받는다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드이다.

ex, <p>김재성<\/p>에서 '김재성'이 Text 객체다.

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

console.log(t1.firstChild.nodeValue);
console.log(t2.nextSibling.firstChild.nodeValue);

-> t1의 값은 span 태그이지만 t2의 값은 공백이다. 그러므로 t1의 Hello를 얻으려면 t1.firstChild.nodeValue이고, t2의 Hello을 얻으려면 공백의 다음 형제 노드(span 태그)를 선택한 후에 .firstChild.nodeValue를 얻어와야한다.

※ <span>Hello<\/span>에서 span태그의 자식 객체가 텍스트 노드 이므로 firstChild가 필요.

주요기능

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

var t = document.getElementById('target').firstChild;
console.log(t.nodeValue);
console.log(t.data);
t.nodeValue = "SET VALUE";

• 조작 : 텍스트 노드의 정보를 조작하는 API (appendData, deleteData, insertData, replaceData, substringData)

appendData(data) : 현재 텍스트의 뒤에 data 텍스트를 추가하는 메소드

deleteData(start, end) : 현재 텍스트의 start 지점에서 텍스트 end개를 삭제하는 메소드

insertData(start, data) : 현재 텍스트의 start 지점에 data 텍스트를 추가하는 메소드

replaceData(start, end, data) : 현재 텍스트의 start 지점에서 end 개수만큼의 텍스트를 data 텍스트로 바꾸는 메소드

substringData(start, end) :현재 텍스트의 start 지점에서 end 개수만큼의 텍스트를 추출하는 메소드