HTML DOM NodeList 참조 설명서

NodeList

NodeList는 노드 객체의 배열 유사한 콜렉션(리스트)입니다.

NodeList의 노드는 인덱스로 접근할 수 있습니다(0부터 시작).

length 속성NodeList에 있는 노드 수를 반환합니다。

NodeList vs. HTMLCollection

NodeList와 HTMLCollection 거의 같습니다。

하단 설명을 참조하십시오。

누가 NodeList를 반환하나요？

childNodes 속성

querySelectorAll() 메서드

getElementsByName() 메서드

속성과 메서드

NodeList에서 사용할 수 있는 다음과 같은 속성과 메서드가 있습니다：

이름 설명
entries() 키/값 쌍을 가진 이터레이터를 목록에서 반환합니다。
forEach() 리스트의 각 노드에 대해 콜백 함수를 실행합니다。
item() 지정된 인덱스处的 노드를 반환합니다。
keys() 리스트의 키로 이터레이터를 반환합니다。
length NodeList에 있는 노드 수를 반환합니다。
values() 리스트의 값으로 이터레이터를 반환합니다。

인스턴스

문서에서 모든 <p> 노드:

const myNodeList = document.querySelectorAll("p");

NodeList의 요소는 인덱스 번호로 접근할 수 있습니다。

두 번째 <p> 노드에 접근하려면 다음과 같이 쓸 수 있습니다：

myNodeList[1]

개인적으로 시도해 보세요

주의:인덱스는 0에서 시작합니다。

HTML DOM Node List Length

length 속성은 노드 목록에 있는 노드 수를 정의합니다：

예제 1

myNodelist.length

개인적으로 시도해 보세요

노드 목록을 순회하려고 할 때,length 속성이 매우 유용합니다：

예제 2

更改节点列表中所有 <p> 元素的颜色：

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

개인적으로 시도해 보세요

아니요

NodeList는 배열이 아닙니다!

NodeList는 배열처럼 보일 수 있지만 실제로는 아닙니다.

NodeList를 순회하며 인덱스를 통해 노드를 참조할 수 있습니다.

하지만 NodeList에서 Array 메서드를 사용할 수 없습니다. 예를 들어, push() 또는 pop() 또는 join().

HTMLCollection과 NodeList의 차이

NodeList 과 HTMLcollection 매우 유사합니다.

둘 다 문서에서 추출된 노드(요소)로 구성된 유사 배열의 컬렉션(목록)입니다. 노드는 인덱스 번호를 통해 접근할 수 있습니다. 인덱스는 0에서 시작합니다.

둘 다 있습니다. length 속성으로, 그는 목록(컬렉션)에 있는 요소의 수를 반환합니다.

HTMLCollection은HTML 문서 요소의 컬렉션입니다.

NodeList는문서 노드（요소 노드, 속성 노드 및 텍스트 노드）의 컬렉션.

HTMLCollection 항목은 그들의 이름, id 또는 인덱스 번호를 통해 접근할 수 있습니다.

NodeList 항목은 그들의 인덱스 번호를 통해 접근할 수 있습니다.

HTMLCollection은 항상실시간컬렉션. 예를 들어, <li> 요소를 DOM에 있는 목록에 추가하면 HTMLCollection의 목록도 변경됩니다.

NodeList는 일반적으로는정적컬렉션. 예를 들어, <li> 요소를 DOM에 있는 목록에 추가하면 NodeList의 목록은 변경되지 않습니다.

getElementsByClassName() 와 getElementsByTagName() 메서드는 실시간 HTMLCollection을 반환합니다.

querySelectorAll() 메서드는 정적 NodeList를 반환합니다.

childNodes 속성은 실시간 NodeList를 반환합니다.

실시간 노드 목록

일부 경우에서 NodeList는실시간：DOM에서의 변경사항은 NodeList를 업데이트합니다.

childNodes 메서드는 실시간 NodeList를 반환합니다.