DOM 遍历与查找：一场寻宝之旅，从 querySelector 到 children，助你成为 DOM 大侦探！ 🕵️♀️
各位前端探险家们，欢迎来到今天的 DOM 寻宝之旅！ 准备好了吗？ 我们将一起深入 DOM 的腹地，学习如何像一位经验丰富的考古学家一样，发掘埋藏其中的宝藏——那些我们需要的 HTML 元素！
别害怕，DOM 虽然看起来像一棵盘根错节的大树，但只要掌握了正确的工具和方法，就能轻松驾驭。 今天，我们将聚焦于三个核心工具：querySelector，querySelectorAll 和 children，以及其他一些有用的助手，帮助你成为 DOM 大侦探！
一、寻宝图：什么是 DOM，我们为何而寻？
首先，让我们明确一下寻宝的地点：DOM (Document Object Model)。 想象一下，你的 HTML 代码就像一幅精美的画作，而 DOM 则是这幅画作的“可编程版本”。 它是一个树状结构，代表了 HTML 文档的结构，允许我们使用 JavaScript 来访问和操纵页面上的每一个元素。
为什么要寻找 DOM 元素呢？ 答案很简单：为了让我们的网页更生动、更互动！ 比如：
- 改变内容: 想让按钮点击后显示不同的文字？ DOM 可以做到！
- 修改样式: 想根据用户的操作改变元素的颜色？ DOM 轻松搞定！
- 添加事件: 想让用户点击某个元素后触发特定的功能？ DOM 义不容辞！
总而言之，DOM 是连接 HTML 和 JavaScript 的桥梁，有了它，我们才能赋予网页灵魂。
二、寻宝利器一：querySelector – 精准制导，一击必中！🎯
querySelector 就像一位训练有素的狙击手，它接受一个 CSS 选择器作为参数，然后在 DOM 中找到第一个匹配的元素。 如果没有找到，它会返回 null。
- 语法:
document.querySelector(selector) - 参数:
selector(CSS 选择器字符串) - 返回值: 匹配的 DOM 元素 (如果没有找到，则返回
null)
举例说明:
假设我们的 HTML 结构如下：
<div id="container">
<p class="highlight">这是第一个段落。</p>
<p>这是第二个段落。</p>
<p class="highlight">这是第三个段落。</p>
</div>现在，我们想找到第一个带有 highlight 类的段落：
const firstHighlightedParagraph = document.querySelector(".highlight");
if (firstHighlightedParagraph) {
firstHighlightedParagraph.style.color = "red"; // 将找到的段落文字颜色设置为红色
console.log("找到了第一个高亮段落！");
} else {
console.log("没有找到高亮段落！");
}在这个例子中，querySelector(".highlight") 会找到第一个 <p class="highlight"> 元素，并将其赋值给 firstHighlightedParagraph 变量。 然后，我们就可以通过该变量来操作这个元素了。
querySelector 的优势：
- 简洁明了: 使用 CSS 选择器，语法简单易懂。
- 高效精准: 能够快速找到第一个匹配的元素。
- 支持各种选择器: 可以使用 ID 选择器、类选择器、标签选择器、属性选择器、伪类选择器等等，几乎所有的 CSS 选择器都可以在这里使用。
注意事项：
querySelector只返回第一个匹配的元素。 如果你需要找到所有匹配的元素，请使用querySelectorAll。- 如果选择器无效，
querySelector会抛出异常。
三、寻宝利器二：querySelectorAll – 一网打尽，绝不放过！ 🎣
querySelectorAll 就像一位经验丰富的渔夫，它同样接受一个 CSS 选择器作为参数，然后在 DOM 中找到所有匹配的元素，并将它们存储在一个 NodeList 对象中。
- 语法:
document.querySelectorAll(selector) - 参数:
selector(CSS 选择器字符串) - 返回值: 一个包含所有匹配元素的
NodeList对象 (如果没有找到，则返回一个空的NodeList)
举例说明:
沿用上面的 HTML 结构，现在我们想找到所有带有 highlight 类的段落：
const allHighlightedParagraphs = document.querySelectorAll(".highlight");
if (allHighlightedParagraphs.length > 0) {
allHighlightedParagraphs.forEach(paragraph => {
paragraph.style.fontWeight = "bold"; // 将所有找到的段落文字加粗
});
console.log("找到了所有高亮段落！");
} else {
console.log("没有找到高亮段落！");
}在这个例子中，querySelectorAll(".highlight") 会找到所有 <p class="highlight"> 元素，并将它们存储在 allHighlightedParagraphs 变量中。 我们可以使用 forEach 循环遍历这个 NodeList 对象，对每个元素进行操作。
querySelectorAll 的优势：
- 一次性获取所有匹配元素: 省去了多次查找的麻烦。
- 方便遍历操作: 可以使用
forEach循环或其他循环方法来遍历NodeList对象。 - 同样支持各种选择器: 和
querySelector一样，支持各种 CSS 选择器。
注意事项：
querySelectorAll返回的是一个NodeList对象，而不是一个数组。 虽然NodeList对象很像数组，但它并不是真正的数组。 需要注意的是，NodeList是一个 静态 集合，这意味着如果 DOM 在querySelectorAll执行后发生了变化，NodeList对象不会自动更新。- 可以使用
Array.from(allHighlightedParagraphs)将NodeList对象转换为真正的数组，以便使用数组的更多方法。
表格对比：querySelector vs querySelectorAll
| 特性 | querySelector |
querySelectorAll |
|---|---|---|
| 返回值 | 第一个匹配的元素或 null |
包含所有匹配元素的 NodeList 对象 |
| 匹配数量 | 单个元素 | 多个元素 |
| 适用场景 | 只需要找到第一个匹配元素时 | 需要找到所有匹配元素时 |
| 性能 | 通常略快于 querySelectorAll (因为只需要找到一个元素) |
在大型 DOM 树中可能略慢 |
四、寻宝利器三：children – 近水楼台，先得月！ 👨👩👧👦
children 属性就像一位慈祥的家长，它会返回一个 HTML 元素的所有子元素的集合，同样也是一个 HTMLCollection 对象。注意，它只会返回元素节点，而不会返回文本节点或者注释节点。
- 语法:
element.children - 返回值: 一个包含所有子元素的
HTMLCollection对象 (如果没有子元素，则返回一个空的HTMLCollection)
举例说明:
沿用上面的 HTML 结构，现在我们想获取 div 元素的所有子元素：
const container = document.getElementById("container");
const containerChildren = container.children;
if (containerChildren.length > 0) {
for (let i = 0; i < containerChildren.length; i++) {
const child = containerChildren[i];
child.style.border = "1px solid blue"; // 给每个子元素添加蓝色边框
}
console.log("找到了容器的所有子元素！");
} else {
console.log("容器没有子元素！");
}在这个例子中，container.children 会返回一个包含所有 <p> 元素的 HTMLCollection 对象。 我们可以使用 for 循环遍历这个 HTMLCollection 对象，对每个元素进行操作。
children 的优势：
- 快速获取子元素: 方便快捷地获取指定元素的直接子元素。
- 简单易用: 语法简单，容易理解。
- 性能优秀: 获取子元素的效率较高。
注意事项：
children返回的是一个HTMLCollection对象，而不是一个数组。 和NodeList类似，HTMLCollection也是一个 动态 集合，这意味着如果 DOM 在children属性访问后发生了变化，HTMLCollection对象会自动更新。children只返回元素节点，不返回文本节点或注释节点。 如果你需要获取所有类型的子节点，可以使用childNodes属性。
五、更多寻宝助手：parentNode, nextElementSibling, previousElementSibling
除了上面提到的三个核心工具之外，还有一些其他的属性和方法可以帮助我们进行 DOM 遍历：
parentNode: 获取元素的父元素。nextElementSibling: 获取元素的下一个兄弟元素。previousElementSibling: 获取元素的上一个兄弟元素。
这些属性可以帮助我们在 DOM 树中进行更灵活的导航。
举例说明:
<ul>
<li>Item 1</li>
<li id="item2">Item 2</li>
<li>Item 3</li>
</ul>const item2 = document.getElementById("item2");
const parent = item2.parentNode; // 获取父元素 <ul>
const nextSibling = item2.nextElementSibling; // 获取下一个兄弟元素 <li>Item 3</li>
const previousSibling = item2.previousElementSibling; // 获取上一个兄弟元素 <li>Item 1</li>
console.log(parent); // 输出 <ul> 元素
console.log(nextSibling); // 输出 <li>Item 3</li> 元素
console.log(previousSibling); // 输出 <li>Item 1</li> 元素六、寻宝实战：一个完整的例子
现在，让我们结合所有学到的知识，来完成一个更复杂的寻宝任务： 假设我们想在一个包含多个列表的页面中，找到所有偶数列表项，并将它们的背景颜色设置为灰色。
<ul class="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul class="my-list">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>const lists = document.querySelectorAll(".my-list"); // 找到所有 class 为 "my-list" 的 <ul> 元素
lists.forEach(list => {
const listItems = list.children; // 获取每个 <ul> 元素的所有子元素 (<li>)
for (let i = 0; i < listItems.length; i++) {
if ((i + 1) % 2 === 0) { // 判断是否为偶数列表项
listItems[i].style.backgroundColor = "lightgray"; // 将偶数列表项的背景颜色设置为灰色
}
}
});在这个例子中，我们首先使用 querySelectorAll 找到所有 <ul> 元素，然后使用 forEach 循环遍历每个 <ul> 元素。 在每个 <ul> 元素中，我们使用 children 属性获取所有 <li> 元素，然后使用 for 循环遍历每个 <li> 元素，并判断其索引是否为偶数。 如果是偶数，则将该 <li> 元素的背景颜色设置为灰色。
七、寻宝总结：成为 DOM 大侦探！
恭喜你，已经成功完成了今天的 DOM 寻宝之旅！ 🎉 你现在已经掌握了 querySelector, querySelectorAll 和 children 等核心工具，以及其他一些有用的助手。 记住，DOM 遍历和查找是前端开发中非常重要的技能，掌握它们可以让你更加灵活地操作页面元素，实现各种各样的交互效果。
练习，练习，再练习！ 只有通过不断的实践，才能真正掌握这些工具，成为一位真正的 DOM 大侦探！ 🕵️♂️
希望今天的讲解能够帮助你更好地理解 DOM 遍历和查找。 如果你有任何问题，欢迎随时提问！ 祝你寻宝愉快！ 💰