[DOM] JS - NodeList 속성 - 노드리스트 (= 노드목록)

1. NodeList 객체
2. NodeList 개수
3. (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

• 색인 번호로만 각 노드에 접근 가능.
• 속성노드와 텍스트노드 갖을 수 있음.