nodeList 사용

From. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

NodeList 객체와 이에 관련된 NamedNodeMap, HTMLCollection을 이해하면 DOM을 전체적으로 이해하는데 큰 도움이 됩니다. 각 컬렉션은 모두 "살아있는" 것으로 간주되는데, 이 말은 문서 구조가 바뀔 때마다 컬렉션도 업데이트되므로 항상 정확한 정보를 반환한다는 뜻입니다. 달리 말하면 NodeList 객체는 해당 객체에 접근할 때마다 수행되는 쿼리입니다. 예를 들어 다음 코드는 무한 루프입니다.

						var divs = document.getElementsByTagName("div"),
							i,
							div;

						for (i = 0; i < divs.length; i++) {
							div = document.createElement("div");
							document.body.appendChild(div);
						}
						

이 코드의 첫 부분에서는 문서에 포한된 div 요소 전체의 HTMLCollection을 가져옵니다. 컬렉션은 "살아있는" 것이므로 새 div 요소가 페이지에 추가될 때마다 컬렉션에도 추가됩니다. 브라우저는 컬렉션 목록을 유지하지 않으며 컬렉션에 접근할 때마다 업데이트합니다. 결과적으로 무한 루프가 만들어집니다. 루프를 반복할 때 마다 i < divs.length 조건을 평가합니다. 즉 그 때마다 div요소 전체를 쿼리합니다. 루프 바디에서 새 div 요소를 생성하여 문서에 추가하므로 divs.length 값은 그 때마다 늘어나고, 따라서 i와 divs.length는 나란히 늘어나며 결고 일치하지 않습니다.

NodeList를 순회해야 할 때는 항상 다음 예제처럼 새 변수에 컬렉션 길이를 저장해서 사용해야 합니다.

						var divs = document.getElementsByTagName("div"),
							i,
							len,
							div;

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

이 예제에서는 변수 len에 컬렉션 길이를 저장했습니다. len에는 루프를 시작하는 시점에서의 divs.length 길이가 저장되므로 이전 예제와 같이 무한 루프가 생기지는 않습니다. 이 장 전체에 걸쳐 NodeList 객체를 순회할 때 이 테그닉을 사용했습니다.

일반적으로 말해 NodeList 자체에 접근하는 일은 되도록 피하는 편이 좋습니다. 컬렉션에 접근할 때마다 다시 쿼리하므로 NodeList에서 자주 사용하는 값은 변수에 저장하십시오.