기초공사 (html,css,javascript)
nodelist 와 htmlcollection 차 본문
//
<!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로의 변환이 필요합니다.
참고사이트
[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 |
