NodeList와 HTMLCollection: 라이브 컬렉션과 정적 컬렉션의 차이점
- Mary-Kate Olsen원래의
- 2024-11-06 13:00:03830검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
html Static Array Object const class Length Property Collection console number dom innerHTML viewport li
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.