NodeList 개념

NodeList는
웹 페이지의 HTML 문서 내에서 선택한 요소 객체뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드를 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 노드를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 노드를 쉽게 조작할 수 있게 하는 객체입니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.

NodeList는 유사 배열 객체이면서 for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.

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

  • document.querySelectorAll()
  • Node.childNodes

document.querySelectorAll()

문자열로 지정된 CSS 선택자에 해당하는 모든 요소를 선택하고 NodeList 객체를 반환합니다.

자바스크립트 querySelectorAll() 함수 사용법
JavaScript querySelectorAll() 구문 
document.querySelectorAll("css 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>
HTML <li> 태그
JavaScript - 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);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

Node.childNodes

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

JavaScript Node.childNodes 구문 예제 
// HTML 요소를 선택합니다.
const myElement = document.getElementById("myElement");

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

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

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

NodeList 객체를 다루는 방법

위 예제(queryselectorall.js)를 살펴보면, document.querySelectorAll() 메서드로 반환한 NodeList 객체는 아래의 세 가지 방법으로 쉽게 다룰 수 있습니다.

  • for...of 문으로 순회하는 방법
  • for 문으로 순회하는 방법
  • 유사 배열이지만 forEach() 함수 적용이 가능하여, forEach() 함수로 순회하는 방법

NodeList 객체의 노드 개수를 다루는 속성

NodeList.length 속성은
NodeList 객체에 포함되어 있는 노드(컬렉션 항목)의 개수를 반환합니다.

자바스크립트 length 속성의 이해와 사용 방법
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>
JavaScript - queryselectorall.js 
const liElements = document.querySelectorAll("li");
console.log(liElements); // NodeList(3) [li, li, li]

console.log(liElements.length); // 3

for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

NodeList 객체의 특징

  • NodeList 객체는 유사 배열 객체이면서 for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
  • document.querySelectorAll() 메서드로 반환한 NodeList 객체는 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않는 객체입니다.

유사 배열이면서 순회 가능한 이터러블(iterable) 객체

NodeList 객체는 유사 배열 형태를 가집니다. NodeList 객체는 배열과 유사하게 요소에 인덱스를 사용하여 접근할 수 있고, length 속성을 통해 요소의 수를 확인할 수 있습니다. 그러나 NodeList 객체는 진짜 자바스크립트 배열이 아니라 유사 배열(iterable) 객체입니다.

NodeList 객체는 배열과 유사하게 다룰 수 있지만, 진짜 배열처럼 배열 메서드(push(), pop() 등)를 사용할 수는 없습니다.

그러나, 유사 배열임에도 불구하고 배열에서 사용하는 forEach() 함수는 사용할 수 있습니다.

자바스크립트 forEach() 함수

이는 대표적인 유사 배열인 HTMLCollection 객체에서 forEach() 함수를 사용할 수 없는 것과 차이가 있습니다.

그리고, ES6(ECMAScript 2015) 이후의 자바스크립트에서는 Array.from() 메서드나 스프레드 문법을 사용하여 NodeList 객체를 진짜 배열로 변환할 수 있습니다. 이렇게 변환하면 배열 메서드를 사용할 수 있게 됩니다.

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>
JavaScript - queryselectorall.js 
const liElements = document.querySelectorAll("li");
console.log(liElements); // NodeList(3) [li, li, li]

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

/* 진짜 배열로 변환 */

// Array.from() 메서드
const liElementsArray = Array.from(liElements); // 배열로 변환

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

// 스프레드 문법 활용
const liElementsArray_1 = [...liElements]; // 배열로 변환
liElementsArray_1.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/
자바스크립트 스프레드 문법

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

document.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 객체와는 다른 차이점입니다.

자바스크립트 HTMLCollection과 NodeList 비교

알아두세요!
여기서 다루지는 않지만, NodeList 객체를 반환하는 element.childNodes 속성은 DOM의 변경 사항을 실시간(또는 live)으로 반영합니다.

명세서

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기