소년코딩의 자바스크립트 강좌 42. DOM: Text 타입

Text 타입

Text 노드는 Text 타입으로 표현된다.

이 노드에는 평범한 텍스트가 포함되고 글자 그대로 사용되며 이스케이프 된 HTML 문자는 포함할 수 있지만 HTML 코드는 포함할 수 없다.

특징

• nodeType은 3이다.
• nodeName은 '#text'이다.
• nodeValue는 노드에 포함된 텍스트다.
• parentNode는 Element다.
• 자식 노드를 가질 수 없다.

---

Text 타입의 주요 프로퍼티와 메서드

• data
• splitText()
• appendData()
• deleteData()
• insertData()
• replaceData()
• subStringData()
• normalize()

---

Text 노드 생성

createTextNode()를 사용해서 프로그래밍 적으로 text 노드를 생성할 수 있다.

// <div id="myDiv"></div>

var textNode = document.createTextNode('Hi');

var div = document.getElementById('myDiv');

div.appendChild(textNode);

console.log(div.innerText); // 'Hi'
console.log(div.innerHTML); // '<div id="myDiv">Hi</div>

---

Text 노드 값 가져오기

Text 노드로 표현되는 텍스트 값과 데이터는 data나 nodeValue 프로퍼티를 사용하요 노드에서 추출 할 수 있다.

두 프로퍼티 모두 Text 노드에 포함된 텍스트를 반환한다.

// <p id="myP"><strong>coding</strong></p>

var p = document.getElementById('myP');

console.log(p.data);      // 'coding'
console.log(p.nodeValue); // 'coding'

---

Text 노드 조작

Text 노드의 하위 값을 조작하고 추출하기 위한 메서드를 제공한다.

// <p>blog</p>

var pElementText = document.querySelector('p').firstChild;

// 추가
// appendData(text) : 노드 마지막에 text를 추가한다.
pElementText.appendText('!');    // blog!

// 삭제
// deleteData(offset, count) : offset부터 count 만큼 삭제한다.

// 삽입
// insertData(offset, text) : offset 위치에 text를 삽입한다.

// 대체
// replaceData(offset, count, text) : offset부터 (offset+count)까지의 텍스트를 text로 교체한다.

// 분리
// splitText(offset) : offset 위치를 기준으로 텍스트 노드를 둘로 나눈다.

// 추출
// substringData(offset, count) : 위치부터 (offset + count)까지의 텍스트를 추출한다.

이 외에도 length 프로퍼티가 있으며, 노드의 글자 개수를 반환한다.

---

Text 노드 통일

두 개 이상의 Text 노드를 자식으로 갖는 부모 노드에서 nomalize() 메서드를 호출하면 자식 노드를 텍스트 노드 하나로 병합한다.

합쳐진 Text 노드의 nodeValue는 각 Text 노드의 nodeValue 프로퍼티를 하나로 합친 것과 같다.

var div = document.getElementById('myDiv');
 
var textNode1 = document.createTextNode('Boy');
div.appendChild(textNode1);
 
var textNode2 = document.createTextNode('Coding');
div.appendChild(textNode2);
 
console.log(div.childNodes.length);   // 2
 
div.normalize();
console.log(div.childNodes.length);   // 1
console.log(div.firstChild.nodeValue);   // 'Boy Coding'

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.