노드 탐색
요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 부모, 형제, 자식 노드 등을 탐색할 수 있다. Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.
노드 탐색 프로퍼티는 모두 접근자 프로퍼티다. 단, 노드 탐색 프로퍼티는 setter없이 getter만 존재하여 읽기 전용 프로퍼티다.
자식 노드 탐색
| 프로퍼티 | 설명 |
|---|---|
| Node.prototype.childNodes | 자식 노드를 모두 탐색하여 NodeList에 담아 반환한다. childNodes 프로퍼티가 반환된 NodeList에는 요소 노드뿐만 아니라 텍스트 노드도 포함되어 있을 수 있다. |
| Element.prototype.children | 자식 노드 중에서 요소 노드만 모두 탐색하여 HTMLCollection에 담아 반환한다. children 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되지 않는다. |
| Node.prototype.firstChild | 첫 번째 자식 노드를 반환한다. firstChild 프로퍼티가 반환하는 노드는 텍스트 노드이거나 요소 노드이다. |
| Node.prototype.lastChild | 마지막 자식 노드를 반환한다. lastChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드다. |
| Element.prototype.firstElementChild | 첫 번째 자식 노드를 반환한다. firstElementChild 프로퍼티는 요소 노드만 반환한다. |
| Element.prototype.lastElementChild | 마지막 자식 요소 노드를 반환한다. lastElementChild 프로퍼티는 요소 노드만 반환한다. |
부모 노드 탐색
부모 노드를 탐색하려면 Node.prototype.parentNode 프로퍼티를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ul id="fruits">
<li class="apple">Apple</li>
<li class="banana">Banana</li>
<li class="orange">Orange</li>
</ul>
</body>
<script>
const $banana = document.querySelector('.banana');
console.log($banana.parentNode); // ul#fruits
</script>
</html>
형제 노드 탐색
형제 노드 탐색 시 어트리뷰트 노드는 요소 노드와 연결되어 있지만 부모 노드가 같은 형제 노드가 아니기 때문에 반환되지 않는다. 즉, 아래 프로퍼티는 텍스트 노드 또는 요소 노드만 반환한다.
| 프로퍼티 | 설명 |
|---|---|
| Node.prototype.previousSibling | 부모 노드가 같은 형제 노드 중에서 자신이 이전 형제 노드를 탐색하여 반환한다. 요소 노드뿐만 아니라 텍스트 노드도 반환이 가능하다. |
| Node.prototype.nextSibling | 부모 노드가 같은 형제 노드 중에서 자신의 다음 형제 노드를 탐색하여 반환한다. 요소 노드뿐만 아니라 텍스트 노드도 반환이 가능하다. |
| Element.prototype.previousElementSibling | 부모 노드가 같은 형제 요소 노드 중에서 자신의 이전 형제 요소 노드를 탐색하여 반환한다. previousElementSibling 프로퍼티는 요소 노드만 반환한다. |
| Element.prototype.nextElementSibling | 부모 노드가 같은 형제 요소 노드 중에서 자신의 다음 형제 요소 노드를 탐색하여 반환한다. nextElementSibling 프로퍼티는 요소 노드만 반환한다. |
요소 노드의 텍스트 조작
nodeValue
Node.prototype.nodeValue 프로퍼티는 setter와 getter가 모두 존재하는 프로퍼디다. 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다. 노드 객체의 값이란 텍스트 노드의 텍스트를 말한다. 따라서 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<div id="foo">Hello</div>
</body>
<script>
console.log(document.nodeValue); // null
const $foo = document.getElementById('foo');
console.log($foo.nodeValue); // null
const $textNode = $foo.firstChild;
console.log($textNode.nodeValue); // Hello
</script>
nodeValue 프로퍼티에 값을 할당하면 텍스트 노드의 값, 즉 텍스트를 변경할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<div id="foo">Hello</div>
</body>
<script>
const $textNode = document.getElementById('foo').firstChild; // textNode 취득
$textNode.nodeValue = 'World';
console.log($textNode.nodeValue); // World
</script>
</html>
textContent
Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다. 요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내의 모든 텍스트를 모두 반환한다.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<div id="foo">Hello <span>world!</span></div>
</body>
<script>
console.log(document.getElementById('foo').textContent); // Hello world!
</script>
</html>
textContent 프로퍼티 참조 시 #foo 내부의 텍스트 노드인 ‘Hello’와 하위 노드인 span 내부의 ‘world!’ 모두 반환된 모습이다. 요소 노드의 textContent 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가된다. 이때 할당한 문자열에 HTML 마크업이 포함되어도 문자열 그대로 인식되어 텍스트로 취급된다.
textContent 프로퍼티와 유사한 동작을 하는 프로퍼티로 innerText 프로퍼티가 있다. 하지만 innerText 프로퍼티는 아래와 같은 이유로 사용하지 않는 것이 좋다.
innerText 프로퍼티는 CSS에 순종적이다. innerText 프로퍼티는 CSS에서 비표시(hidden 처리)로 지정된 요소 노드의 텍스트를 반환하지 않는다.
innerText 프로퍼티는 CSS를 고려해야 하므로 textContent 프로퍼티보다 속도가 느리다.