HTML DOM 노드리스트 객체

NodeList

노드리스트 객체는 문서로부터 추출되는 노드들의 리스트입니다.

거의 HTML컬렉션 객체와 똑같습니다.
몇몇의 오래된 브라우저들은 HTML컬렉션을 반환해달라고 요청한 메소드에 노드 리스트를 대신해서 반환해줍니다.

childNodes()를 사용한다면 모든 브라우저에서 노드 리스트를 반환해줍니다.

대부분의 브라우저는 querySelectorAll()을 호출하면 노드 리스트를 반환해줍니다.

var myNodeList = document.querySelectorAll("p");
y = myNodeList[1];

이 역시 인덱스 시작점은 0부텁니다.

이 역시도

myNodeList.length;

를 통해 길이를 구할 수 있습니다.

HTML 컬렉션을 이용해서 했던 것들을 그대로 노드 리스트에서도 사용할 수 있습니다.

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

HTML 컬렉션과 차이

그렇다면 두 객체의 차이는 무엇일까요?
굳이 거의 똑같다면 컬렉션을 새로 만들 이유가 없었을텐데 말이죠.

HTML 컬렉션은 HTML 요소의 모음집입니다.
노드 리스트는 문서 노드들의 모음집입니다.

HTML 컬렉션은 각각의 아이템이 그들의 이름, id, 인덱스 넘버에 의해 접근될 수 있지만,
노드 리스트는 오로지 인덱스 넘버로만 접근할 수 있습니다.

오로지 노드리스트 객체만이 attribute노드와 text노드를 포함할 수 있습니다.

즉, 둘의 차이점은, HTML 컬렉션이 노드 리스트보다 각각의 아이템에 접근할 수 있는 수단이 다채롭지만, text, attribute 노드를 포함할 수 있는건 노드 리스트 입니다.