NodeList 与 HTMLCollection：实时集合和静态集合之间的区别
- Mary-Kate Olsen原创
- 2024-11-06 13:00:03827浏览
我们将详细研究NodeList和HTMLCollection以及NodeList和HTMLCollection。
首先，两者都有一个 length 属性，返回列表（集合）中元素的数量。
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="zh-cn">
<头>
<title>NodeList 和 HTMLCollection</title>
</头>
<div>
<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".card")
选定的[0].innerHTML = `
输出 :
- 浏览器
- 控制台
从输出中可以看出，当将新的 HTML 标签添加到具有卡片类的元素时，浏览器会更新，但 NodeList 不会更新，因为 NodeList 不活动.
当底层文档发生更改时，childNodes 返回的 NodeList 会自动更新，因为它是活动的。
示例 :
<html lang="zh-cn">
<头>
<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