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

1. NodeList 객체
2. NodeList 개수
3. (HTMLCollection / NodeList) 비교

NodeList 객체

 

웹문서에서 추출한 노드 집합

 

---

 

1.

HTMLCollection 객체와 거의 유사.

즉, 배열은 아니나 배열처럼 색인번호(index) 통해서 각 노드에 접근 가능.

색인번호는 0부터 시작.

 

2.

일부 (구형) 브라우저는 getElementsByClassName ()과 같은 메소드에 대해
HTMLCollection 대신 NodeList 객체 반환.

 

3.

모든 브라우저는 childNodes 속성에 대해 NodeList 객체 반환.

 

4.

대부분 브라우저는 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 개수

 

1.

length 속성 :  Node List 안의 노드 개수

 

2.

Node List 안 노드에 대해 반복문 적용 시 매우 유용. (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) 비교

[유사점]

1.
배열은 아니지만,
배열처럼 색인번호 통해 각 객체 안 요소(노드)에 대해 접근 가능.

 

2.

색인번호는 0부터 시작. (※ 반복문 가능)

3.

배열 아니기 때문에 배열 메서드 사용 불가.
(예) valueOf(), push() , pop() , join()

---

[차이점]

 

HTMLCollection 

① 이름, ID, 색인번호로 각 요소에 접근 가능.

② 속성노드와 텍스트노드 못 갖음.

NodeList

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