[JS] HTMLCollection, NodeList + 노드탐색

728x90

🎶 DOM 컬렉션 객체인 HTMLCollection과 NodeList 에 대해 알아보도록 하자. 그리고 노드 탐색 방법에 대해 알아보자.

1. HTMLCollection

getElemetnsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 DOM 컬렉션 객체이다.

따라서 HTMLCollection 객체를 순회할 때에는 배열의 고차 함수(forEach, map, filter, reduce 등)을 사용하는 것을 추천한다.

const $elem = document.getElementsByClassName('red');

[...$elems].forEach(elem => elem.className = 'blue');

/* for 문으로 순회할 경우 제대로 적용 안될 수 있다. */

for(let i = 0; i < $elem.length; i++){
	$elem[i].className = 'blue';
}

/* 위에서는 elem의 첫 번째 객체의 속성이 변경됨과 동시에,
   elem의 첫 번째 객체 속성이 blue가 되므로 elem에서 제거된다.
   즉, elem의 두 번째 객체가 첫 번째 객체로 변하면서 이를 업데이트 하지 못하고
   다음 객체로 넘어가게 된다. */

2. NodeList

위와 같은 HTMLCollection 객체의 부작용을 해결하기 위해 querySelectorAll 메서드를 활용해 DOM 컬렉션 객체인 NodeList 객체를 반환하는 방법이 있다.

NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않기 때문에 for 문으로 순회해도 상관없다.

const $elem = document.querySelectorAll('.red');

$elem.forEach(elem => elem.className = 'blue');

단, childNodes 프로퍼티가 반환하는 NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체이기 때문에, DOM 컬렉션을 안전하게 사용하려면 HTMLCollection, NodeList 객체를 배열로 변환하여 사용하는 것이 좋다.

3. 노드 탐색

전 포스트에서 언급한 요소 노드를 취득한 다음, 취득한 요소 노드를 깆머으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드를 탐색해야 할 때가 있다.

[JS] DOM - HTML 요소와 노드 객체, 그리고 요소 노드 취득 방법

자식 노드를 탐색하는 방법에 대해 자세히 알아보자.

(1) 자식 노드 존재 확인

일반적으로 Node.prototype.hasChildNodes 메서드를 사용한다.

<!DOCTYPE html>
<html>
    <body>
        <ul id='a'>
        </ul>
    </body>
    <script>
        const $a = document.getElementById('a');
        
        console.log($a.hasChildNodes()); // true
    </script>
</html>

자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지 확인하려면 children.length 또는 Element 인터페이스의 childElementCount 프로퍼티를 사용한다.

(2) 요소 노드의 텍스트 노드 탐색

요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근할 수 있다.

<!DOCTYPE html>
<html>
    <body>
        <div id = 'a'>Hello</div>
    </body>
    <script>
        console.log(document.getElementById('a').firstChild); // #text
    </script>
</html>

(3) 부모 노드 탐색

부모 노드를 탐색하려면 Node.prototype.parentNode 프로퍼티를 사용한다.

<!DOCTYPE html>
<html>
    <body>
        <ul id='a'>
            <li class='b'>b</li>
            <li class='c'>c</li>
        </ul>
    </body>
    <script>
        const $b = document.querySelector('.b');
        
        console.log($b.parentNode); // ul#.b
    </script>
</html>

(4) 형제 노드 탐색

Node.prototype.previous, nextSibling, previousElementSibling, nextElementSibling 등의 메서드를 활용해서 형제 노드를 탐색할 수 있다.