NodeList 與 HTMLCollection：即時集合與靜態集合之間的差異
- Mary-Kate Olsen原創
- 2024-11-06 13:00:03830瀏覽
我們將詳細研究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 不會自動更新，因為 它是非活動的。
讓我們寫一個範例 :
const selected = document.querySelectorAll(".card")
選定的[0].innerHTML = `
<p>輸出<strong> : </strong> </p>
- 瀏覽器
- 控制台
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 了。
以上是NodeList 與 HTMLCollection：即時集合與靜態集合之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
html Static Array Object const class Length Property Collection console number dom innerHTML viewport li
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何在打字稿中使用條件類型？下一篇：如何在打字稿中使用條件類型？