소년코딩의 자바스크립트 강좌 43. DOM: 노드리스트(NodeList)

노드리스트(NodeList)

NodeList 객체와 이에 관련된 NamedNodeMap, HTMLCollection을 이해해야 한다.

위 컬렉션은 모두 '살아 있는 객체'다.

이 말은 문서 구조가 바뀔 때마다 컬렉션도 업데이트되므로 항상 정확한 정보를 반환한다는 뜻이다.

---

잘못된 사용

다음과 같은 코드는 무한 루프다.

var divs = document.getElementsByTagName('div')
 
// 무한 루프
for (var i = 0; i < divs.length; ++i) {
     div = document.createElement('div');
     document.body.appendChild(div);
}  

컬렉션은 '살아 있는' 상태이므로 새 div 요소가 페이지에 추가될 때마다 컬렉션에도 추가된다.

브라우저는 컬렉션 목록을 유지하지 않으며, 컬렉션에 접근할 때마다 업데이트하므로 무한 루프가 된다.

---

올바른 사용

NodeList와 같은 살아 있는 상태의 컬렉션을 순회해야 할 때는 항상 새 변수에 컬렉션의 길이를 저장해서 사용해야 한다.

var divs = document.getElementsByTagName('div')
var len = divs.length;
 
for (var i = 0;  i < len; ++i) {
     div = document.createElement('div');
     document.body.appendChild(div);
} 

---

일반적으로 NodeList 자체에 접근하는 일은 되도록 피하는 편이 좋다.

컬렉션에 접근할 때마다 다시 쿼리하므로 NodeList에서 자주 사용하는 값은 변수에 저장하는게 좋다. 

by 소년코딩

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

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