Javascript : normalize() 와 wholeText 를 이용해 텍스트 노드 다루기

 

 

 

HTML의 텍스트 노드(Text node) 는 다루기 까다롭다. 특히 동적으로 삽입되거나 생성될때 더욱 그렇다.

예시를 살펴보자.

<p id=“el”>하나의 글이 있습니다.</p>

 

p태그에 텍스트 노드를 하나 더 추가 하면 :

let el = document.getElementById('el');
el.appendChild(document.createTextNode(' 글을 하나 더 추가 합니다.'));
console.log(el.childNodes.length); // 2

 

글을 하나 더 추가 한 뒤, childNodes 의 개수를 로그로 찍어보면 2개라고 나온것에 주목하자.
이 노드들은 단일 문자열 이지만 동적으로 추가 되었기 때문에, 각각 분리된 노드로 취급된다.

 

경우에 따라서는 하나의 텍스트 노드로 다루는게 나은데, normalize() 와 wholeText 로 쉽게 구현할 수 있다.

el.normalize();
console.log(el.childNodes.length); // 1

 

normalize() 를 호출하면 요소 내부의 인접한 텍스트 노드들이 병합된다.
텍스트 노드 사이에 HTML 요소들이 존재하는 경우, HTML 은 그대로 유지되면서 인접한 텍스트 노드는 모두 병합된다.

 

특별한 이유로, 분리된 텍스트 노드를 별도로 유지하면서 하나의 단위로 얻길 원한다면, wholeText 가 유용하다.
이는 normalize() 를 호출하지 않고도 병합된 하나의 텍스트 노드를 얻을 수 있다.

console.log(el.childNodes[0].wholeText);
// 하나의 글이 있습니다. 글을 하나 더 추가 합니다.
console.log(el.childNodes.length); // 2

 

normalize() 를 호출하지 않는 한, 텍스트 노드의 개수는 2를 유지한다. 또한 wholeText 를 이용해 전체 문장을 출력할 수 있다.
하지만 몇가지 유의 사항이 있다 :

• 요소 보다는 텍스트 노드로 접근해서 wholeText 를 호출 해야 한다. (el.childNodes[0])
• 텍스트 노드는 인접해야 하며, HTML 로 분리되어 있으면 안된다.