NodeList와 HTMLCollection을 자세히 살펴보고 NodeList와 HTMLCollection
이 무엇인지 살펴보겠습니다.
먼저 둘 다 목록(컬렉션)의 요소 수를 반환하는 길이 속성이 있습니다.
1. HTML컬렉션
HTML DOM의
HTMLCollection은 라이브입니다. getElementsByClassName() 또는 getElementsByTagName()은 주어진 클래스 이름을 모두 갖는 모든 하위 요소의 배열과 유사한 객체를 나타내는 라이브 HTMLCollection을 반환합니다. .
예 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList and HTMLCollection</title>
</head>
<body>
<ul>
<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("items")
console.log(selected)
로그인 후 복사
출력 :
기본 문서가 변경되면 HTMLCollection이 자동으로 업데이트됩니다.
예를 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList and HTMLCollection</title>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li>
<p><strong>Output</strong> : </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173086920639726.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>
<p>As can be seen from the output, when a new HTML tag is added to the element with the card class, the <strong>HTMLCollection</strong> is updated <strong>because it is live</strong></p>
<hr>
<h2>
2. NodeList
</h2>
<p><strong>querySelectorAll()</strong> returns a <strong>static</strong> <strong>(non live)</strong> <strong>NodeList</strong> representing a list of the document's elements that match the specified group of selectors. but <strong>childNodes</strong> return a <strong>live NodeList</strong>. </p>
<p><strong>Example</strong> :<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList and HTMLCollection</title>
</head>
<body>
<ul>
<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".items")
console.log(selected)
로그인 후 복사
출력 :
querySelectorAll()에서 반환된 NodeList는 비활성이기 때문에 기본 문서가 변경될 때 자동으로 업데이트되지 않습니다.
예를 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>NodeList 및 HTMLCollection</title>
</머리>
<본문>
<div>
<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".card")
selected[0].innerHTML = `<li>
<p><strong>출력</strong> : </p>
로그인 후 복사
출력에서 볼 수 있듯이 카드 클래스가 있는 요소에 새 HTML 태그가 추가되면 브라우저가 업데이트되지만 NodeList는 업데이트되지 않습니다. NodeList가 라이브가 아니기 때문입니다. .
childNodes에서 반환된 NodeList는 활성이므로 기본 문서가 변경되면 자동으로 업데이트됩니다.
예 :
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>NodeList 및 HTMLCollection</title>
</머리>
<본문>
<div>
<pre class="brush:php;toolbar:false">선택된 상수 = document.querySelector(".card")
selected.innerHTML = `<li>
<p><strong>출력</strong> : </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173086921039201.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>
<p>출력에서 볼 수 있듯이 카드 클래스가 있는 요소에 새 HTML 태그가 추가되면 <strong>NodeList</strong>가 <strong>라이브 상태이기 때문에</strong> 업데이트됩니다</p>.<hr>
<h2>
</h2>
결론
<p>
<strong></strong>결론적으로 HTMLCollection은 항상 라이브 컬렉션입니다. NodeList는 대부분 정적 컬렉션입니다.</p><p>
<strong></strong>NodeList<strong>와 </strong>HTMLCollection<strong>이 무엇인지 살펴보았습니다. 이제 </strong>NodeList와 HTMLCollection</p>이 무엇인지 알게 되었습니다.
로그인 후 복사
위 내용은 NodeList와 HTMLCollection: 라이브 컬렉션과 정적 컬렉션의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
