기초공사 (html,css,javascript)

nodelist 와 htmlcollection 차 본문

academy/JavaScript

nodelist 와 htmlcollection 차

에스프레소라떼 2024. 4. 25. 17:42

// 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event</title>
  </head>
  <body>
    <div id="body">
      <div class="testDiv"></div>
      <div class="testDiv"></div>
      <div class="testDiv"></div>
      <div class="testDiv"></div>
      <div class="testDiv"></div>
    </div>

    <script>
      const before_query = document.querySelectorAll(".testDiv");
      const before_get = document.getElementsByClassName("testDiv");
      const after_query = document.querySelectorAll(".testDiv");
      const after_get = document.getElementsByClassName("testDiv");

      //div를 하나 생성하기 위해.
      const body = document.querySelector("#body"); // 어디에 생기게할꺼야
      const newDiv = document.createElement("div"); // 노드생성, 아직 들어가는 내용없음
      //   let textnode = document.createTextNode("안녕");
      newDiv.classList.add("testDiv");
      // body와 연결
      body.appendChild(newDiv); // <div class="testDiv"></div> 생김.

      console.log(before_query.length); // 5 nodelist
      console.log(before_get.length); // 6   htmlcollection

      console.log(after_query.length); // 5 nodelist
      console.log(after_get.length); // 6 htmlcollection
    </script>
  </body>
</html>

 

위의 코드를 보면 htmlcollection은 '6'으로 바로 반영이 되는데 --> live 실시간으로 반영

nodelist는 한번 찍힌 '5'는  div가 추가 되어도 바뀌지 않는다.(상단에 있었자만) --> nolive

--> live와 nolive가 이말 이었음.

 

 

nodelist를 6으로 바뀌고 하고싶으면

 

 <script>
      const before_query = document.querySelectorAll(".testDiv");
      const before_get = document.getElementsByClassName("testDiv");
      
      const after_get = document.getElementsByClassName("testDiv");

      //div를 하나 생성하기 위해.
      const body = document.querySelector("#body"); // 어디에 생기게할꺼야
      const newDiv = document.createElement("div"); // 노드생성, 아직 들어가는 내용없음
      //   let textnode = document.createTextNode("안녕");
      newDiv.classList.add("testDiv");
      // body와 연결
      body.appendChild(newDiv); // <div class="testDiv"></div> 생김.

      console.log(before_query.length); // 5 nodelist
      console.log(before_get.length); // 6   htmlcollection

      const after_query = document.querySelectorAll(".testDiv");---> 여기에 이동시키면 된다.
      
      console.log(after_query.length); // 6 nodelist
      console.log(after_get.length); // 6 htmlcollection
    </script>

 

 

NodeList와 HTMLCollection의 업데이트 방식이다.

1. Live Collection  vs  Static Collection :
-  HTMLCollection은 "live" 컬렉션이다. 즉 DOM 변경사항이 실시간으로 반영된다.
따라서 새로운  <div>가 추가되면 그 변경사항이 즉시 HTMLCollection에 반영되어 
before_get.length와 after_get.length가 모두 6으로 출력이 된다

- 반면, NodeList는 querySelectorAll에 의해 반환되는 경우 "stactic 컬렉션이다."
이는 해당 NodeList가 생성될 떄 DOM상태를 반영하며, 이후 DOM 변경사항이 반영되지 않는다.
따라서 before_query.legnth는 5로 , after_query.length는 6으로 출력된다.
이는 before_query.length생성시점에서 5개의 요소가 존재했고, after_query 생성시점에서는 6개의
요소가 존재하기 때문이다.

2. forEach 사용 가능성 :
-NodeList는 forEach 메소드를 직접 사용할 수 있습니다. 
이는 querySelectorAll로 얻은 NodeList가 JavaScript의 Array 메소드 중 일부를 사용할 수 있게 해줍니다.

-HTMLCollection에는 기본적으로 forEach 메소드가 없습니다. 
따라서 forEach를 사용하려면 먼저 Array로 변환하는 과정을 거쳐야 합니다. 
예를 들어, Array.from(before_get).forEach()와 같이 사용할 수 있습니다.


결론적으로,
NodeList와 HTMLCollection 사이의 주요 차이점은 업데이트 방식과 메소드 사용 가능성에 있습니다.
NodeList는 DOM의 변경사항에 영향을 받지 않는 static collection이며, forEach 같은 Array 메소드를 사용할 수 있습니다. 반면, HTMLCollection은 DOM의 변경사항이 실시간으로 반영되는 live collection이며, forEach를 직접 사용하기 위해서는 Array로의 변환이 필요합니다.

 

 

참고사이트

https://29223.tistory.com/124

 

[JavaScript] querySelectorAll VS getElementsByClassName

위와 같은 코드가 있다. 두 방식 중 어떤 것을 사용해도 div 태그 다섯 개를 찾아올 수 있다. 두 방식의 차이점은 무엇일까? 1. querySelectorAll querySelectorAll은 선택자에 일치하는 모든 요소를 반환한

29223.tistory.com

 

저작자표시

'academy > JavaScript' 카테고리의 다른 글

백틱과 ${ }  (0) 2024.04.30
노드 배열로 작성 및 삭제 - Array / node / parentNode / remove  (0) 2024.04.29
return과 map( )  (1) 2024.04.18
map( )  (1) 2024.04.17
배열예제  (0) 2024.04.07
'academy/JavaScript' Related Articles more