• Q&A
  • 회원가입
  • 로그인

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

NodeList 객체

 

1.

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

 

2.

HTMLCollection 객체와 거의 유사.

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

색인번호는 0부터 시작.

 

3.

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

 

4.

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

 

5.

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

 

결과보기 

 

 

Node List 개수

 

1.

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

 

2.

Node List 안 노드에 대해 반복문 적용 시 매우 유용. (2번째 예제)

 


 

<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>

 

결과보기


 

<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 VS. a NodeList 비교

 

★ 유사점


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

 

2.

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


3.

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



 

★ 차이점

 

HTMLCollection 

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

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


NodeList

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012