목차
- NodeList 객체
- NodeList 개수
- (HTMLCollection / NodeList) 비교
NodeList 객체
웹문서에서 추출한 노드 집합
PS.
- HTMLCollection 객체와 거의 유사. 즉, 배열은 아니나 배열처럼 색인번호(index) 통해서 각 노드에 접근 가능. 색인번호는 0부터 시작.
- 일부 (구형) 브라우저는 getElementsByClassName()과 같은 메서드에 대해 HTMLCollection 대신 NodeList 객체 반환.
- 모든 브라우저는 childNodes 속성에 대해 NodeList 객체 반환.
- 대부분 브라우저는 querySelectorAll() 메서드에 대해 NodeList 객체 반환.
[예제]
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<p id="demo"></p>
<script>
var ps = document.querySelectorAll("p");
var text = ps[1].innerHTML; // 2번째 P요소 텍스트
document.getElementById("demo").innerHTML = text;
</script>
결과보기
NodeList 개수
- length 속성 : NodeList 안의 노드 개수
- NodeList 안 노드에 대해 반복문 적용 시 매우 유용. (2번째 예제)
[예제1]
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<p id="demo"></p>
<script>
var ps = document.querySelectorAll("p");
var num = ps.length;
document.getElementById("demo").innerHTML = num; // 4
</script>
결과보기
[예제2]
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var ps = document.querySelectorAll("p");
var i;
for (i = 0; i < ps.length; i++) {
ps[i].style.color = "red";
}
}
</script>
결과보기
(HTMLCollection / NodeList) 비교
[유사점]
- 배열은 아니지만, 배열처럼 색인번호 통해 각 객체 안 요소(노드)에 대해 접근 가능.
- 색인번호는 0부터 시작. (※ 반복문 가능)
- 배열 아니기 때문에 배열 메서드 사용 불가. (예) valueOf(), push() , pop() , join()
[차이점]
HTMLCollection
- 이름, ID, 색인번호로 각 요소에 접근 가능.
- 속성노드와 텍스트노드 못 갖음.
NodeList
- 색인 번호로만 각 노드에 접근 가능.
- 속성노드와 텍스트노드 갖을 수 있음.
