我們將詳細研究NodeList和HTMLCollection以及NodeList和HTMLCollection。
首先，兩者都有一個 length 屬性，傳回列表（集合）中元素的數量。
1.HTML集合
HTML DOM 中的
HTMLCollection 已上線；getElementsByClassName() 或getElementsByTagName() 傳回一個即時HTMollection🎜給定 類別名稱的所有子元素的類似數組的物件.
範例 :
<!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 不會自動更新，因為 它是非活動的。
讓我們寫一個
範例 :
NodeList 和 HTMLCollection
頭>
const selected = document.querySelectorAll(".card")
選定的[0].innerHTML = `登入後複製
<p>輸出<strong> : </strong>
</p>
登入後複製
從輸出可以看出，當將新的HTML 標籤加入到具有卡片類別的元素時，瀏覽器會更新，但NodeList 不會更新，因為NodeList 不活動.
當底層文件發生變更時，childNodes 傳回的 NodeList 會自動更新，因為它是活動的。
範例 :
<title>NodeList 和 HTMLCollection</title>
頭>
<div>
<pre class="brush:php;toolbar:false">const selected = document.querySelector(".card")
選定的.innerHTML = `登入後複製
輸出 :
從輸出可以看出，當一個新的 HTML 標籤加入到具有卡片類別的元素時，NodeList 會更新因為它是活動的。
結論
總之，HTMLCollection 總是即時集合。 NodeList 通常是靜態集合。
我們檢查了 NodeList 和 HTMLCollection 是什麼。現在您知道什麼是 NodeList 和 HTMLCollection 了。
