정의 및 사용 방법

NodeList는
웹 페이지 내에서 선택된 HTML 노드를 문서 내의 순서대로 모아둔 컬렉션(집합)입니다.

이 컬렉션은 DOM을 다룰 때 자주 쓰이며, 요소를 포함한 다양한 노드를 배열의 항목처럼 유사하게 다룰 수 있는 순회 가능한 유사 배열 객체입니다.

알아두세요!
HTML DOM을 다루는 DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.
HTMLCollection은 요소만의 집합이지만 NodeList는 생성 방식에 따라 요소뿐 아니라 텍스트나 주석 등 다양한 노드를 포함할 수 있습니다.
자세한 내용은 자바스크립트 HTMLCollection과 NodeList 비교를 참조하세요.

특징

  • NodeList는 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
  • length 속성으로 유사 배열 객체인 NodeList의 길이를 반환할 수 있습니다.
  • 유사 배열임에도 불구하고 배열에서 사용하는 forEach() 함수는 사용할 수 있습니다.
  • NodeList는 생성 방식에 따라 DOM의 변경 사항을 실시간(live)으로 반영하기도 하고, 정적인 상태로 유지되기도 합니다.

NodeList 객체를 반환하는 메서드와 속성

NodeList 객체를 반환하는 메서드와 속성의 특징
구분 반환 객체 포함 대상 실시간 반영 여부
querySelectorAll() NodeList 요소 노드만 포함 정적
Node.childNodes NodeList 모든 자식 노드 포함
(텍스트, 주석, 요소 등)		 실시간(또는 live) 반영

기본 예제

NodeList 객체를 반환하는 querySelectorAll()과 Node.childNodes를 통해서 NodeList 객체의 사용 방법과 특징에 대해 알아보겠습니다.

querySelectorAll()

querySelectorAll() 메서드는 HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 모든 요소를 NodeList 객체로 반환합니다.

구문
JavaScript 
querySelectorAll(selectors)
사용 방법
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>
queryselectorall.js 
const liElements = document.querySelectorAll("li"); // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
  }
// 출력: "김밥" "라면" "떡볶이"

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 3 - forEach() 함수 적용 */
liElements.forEach(li => { // 유사 배열이지만 forEach() 함수 적용이 가능
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
for...of 문은 순회 가능한 이터러블(iterable) 객체를 순회하는 반복문입니다.
querySelectorAll()로 반환된 NodeList 객체는 유사 배열 객체이면서 순회 가능한 이터러블 객체입니다.

코드 부연설명
for 문은 배열이나 유사배열의 숫자 인덱스(index)를 기반으로 요소에 접근하기 때문에, 인덱스와 length 속성만 있으면 순회가 가능합니다.
querySelectorAll()로 반환된 NodeList 객체는 유사 배열 객체이면서 length 속성이 있습니다.

Node.childNodes

Node.childNodes는 특정 노드의 자식 노드 목록을 반환하는 속성입니다. 이 목록은 NodeList 객체를 반환합니다.

사용 방법
JavaScript 
// HTML 요소를 선택합니다.
const myElement = document.getElementById("myElement");

// myElement의 자식 노드 목록을 가져옵니다.
const childNodes = myElement.childNodes;

// 자식 노드 목록을 순회하며 출력합니다.
for (var i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i]);
}

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성의 값을 가진 요소 객체를 반환합니다.

Node.childNodes 속성에 대한 사용법 등은 이 글의 주제에 대한 관련 활용도가 낮아, 여기에서는 다루지 않습니다.

경우에 따라 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않음

querySelectorAll() 메서드로 반환한 NodeList 객체는 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않는 객체입니다. 하지만 Node.childNodes 속성으로 반환한 NodeList 객체는 DOM의 변경 사항을 실시간(또는 live)으로 반영합니다.

다음은 '새로운 메뉴 추가' 버튼을 클릭하면 <ul> 요소에 <li> 요소가 동적으로 추가될 때 document.querySelectorAll("li")로 반환된 <li> 요소의 개수 즉, NodeList 객체 항목의 개수가 실시간(또는 live)으로 반영되지 않는 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>     
    </head>
    <body>
        <ul id="list">
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <p><li> 요소의 개수: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">새로운 메뉴 추가</button>
        <script src="none-live.js"></script>
    </body>
</html>
JavaScript - none-live.js 
// NodeList 가져오기
const liElements = document.querySelectorAll("li");

// 버튼 클릭 시 새로운 <li> 요소 추가
document.getElementById('addButton').addEventListener("click", () => {
    const newLi = document.createElement('li');
    newLi.textContent = "새로운 메뉴";

    // 새로운 <li> 요소를 <ul>에 추가
    document.getElementById("list").appendChild(newLi);

    // <li> 요소의 개수 실시간 확인
    const liElementsLength = liElements.length; // 이미 선언했던 liElements의 length가 실시간 반영됨
    document.getElementById("li-length-val").textContent = liElementsLength;
});

코드 부연설명
createElement() 함수는 새로운 HTML 요소를 생성해서 반환합니다.

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

브라우저에서 실제 표시된 모습 버튼을 클릭해 보세요!

새로운 요소를 추가하면 NodeList 객체는 실시간(또는 live)으로 반영하지 않아서, <li> 요소의 개수가 바뀌지 않는 것을 확인할 수 있습니다. 이는 DOM의 변경 사항을 실시간(또는 live)으로 반영하는 HTMLCollection 객체와는 다른 차이점입니다.

명세서

NodeList에 대한 명세서 사양
명세서 사양
NodeList DOM Standard
#interface-nodelist

브라우저 호환성

NodeList에 대한 브라우저 호환성
객체와 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
NodeList 1 12 1 1
length 1 12 1 1

참고문헌

같이 보기