JavaScript - DOM 节点列表

DOM 节点列表简介

你好，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索 JavaScript DOM 节点列表的世界。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步步来。在本教程结束时，你将能够像专业人士一样操作网页！

什么是 DOM 节点列表？

在我们深入研究之前，让我们从基础开始。想象一下网页就像一个家族树。DOM（文档对象模型）就像是网页的家族树。页面上的每个元素——无论是段落、按钮还是图像——都是这个家族的成员，或者用技术术语来说，是一个“节点”。

节点列表简单地来说就是这些节点的集合。就像你有一个派对的宾客名单，名单上的每个客人都是你网页上的一个元素。

示例 1：获取节点列表

让我们看一个简单的例子：

<div>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

在这个例子中，querySelectorAll('p') 返回一个包含所有 <p> 元素的节点列表。如果你在浏览器的控制台中运行这个代码，你将看到类似以下内容：

NodeList(3) [p, p, p]

这告诉我们我们有一个包含三个段落元素的节点列表。

使用节点列表

现在我们有了节点列表，让我们看看我们能做些什么！

示例 2：遍历节点列表

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`段落 ${index + 1}: ${paragraph.textContent}`);
});

这段代码将输出：

段落 1: 段落 1
段落 2: 段落 2
段落 3: 段落 3

在这里，我们使用 forEach 方法遍历节点列表中的每个段落。这就像在派对的宾客名单上逐个欢迎每个客人！

活跃节点列表与静态节点列表的魔力

现在，事情变得有趣了。节点列表可以是活跃的或静态的。

活跃的节点列表就像一个魔法的宾客名单，当人们到达或离开派对时，它会自动更新。相比之下，静态的节点列表就像某一特定时刻宾客名单的快照——即使有新客人到来，它也不会改变。

示例 3：活跃节点列表

<ul id="guestList">
<li>艾丽斯</li>
<li>鲍勃</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // 输出：2

let newGuest = document.createElement('li');
newGuest.textContent = '查尔斯';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 输出：3
</script>

在这个例子中，getElementsByTagName 返回一个活跃的节点列表。当我们添加查尔斯到列表时，我们的 guests 节点列表会自动更新！

示例 4：静态节点列表

<ul id="guestList">
<li>艾丽斯</li>
<li>鲍勃</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // 输出：2

let newGuest = document.createElement('li');
newGuest.textContent = '查尔斯';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 仍然输出：2
</script>

在这里，querySelectorAll 返回一个静态的节点列表。即使我们添加了查尔斯，我们的 guests 节点列表也不会改变。这就像我们拍了一张宾客名单的照片，即使有新客人到来，照片也不会更新。

HTMLCollection 与 NodeList 的区别

现在，让我们来谈谈 DOM 家庭中的两个表亲：HTMLCollection 和 NodeList。它们很相似，但它们有自己的独特特性。

HTMLCollection

HTMLCollection 总是活跃的。它就像一个不断更新的宾客名单。

let divs = document.getElementsByTagName('div'); // 返回 HTMLCollection

NodeList

NodeList 可以是活跃的也可以是静态的，这取决于它是如何创建的。

let paragraphs = document.querySelectorAll('p'); // 返回静态 NodeList
let childNodes = document.body.childNodes; // 返回活跃 NodeList

以下是一个总结它们差异的表格：

特性	HTMLCollection	NodeList
活跃/静态	总是活跃	可以是活跃或静态
内容	只有元素节点	可以包含所有节点类型
访问项	通过名称、id 或索引	只通过索引
forEach 方法	不可用	可用

结论

好了，各位！我们已经穿越了 DOM 节点列表的土地，从基本概念到活跃和静态列表的细微差别。记住，熟能生巧。尝试这些例子，对它们进行实验，很快你就能像经验丰富的开发者一样操作网页！

在我们分别之前，这里有一个给网页开发者的笑话：为什么 JavaScript 开发者戴眼镜？因为他无法 C#!（明白吗？C Sharp？好吧，我自己出去好了...）

继续编码，继续学习，最重要的是，继续在 JavaScript 中享受乐趣！

Credits: Image by storyset