JavaScript - DOM 集合

你好，有抱负的程序员们！今天，我们将深入探索JavaScript中DOM集合的迷人世界。如果你是编程新手，不用担心——我会像过去几年指导无数学生一样，一步步引导你。那么，来一杯咖啡（或者你最喜欢的饮料），让我们开始吧！

HTMLCollection 对象

想象一下你在一个图书馆，你想找到所有关于JavaScript的书。图书管理员给你一个特殊的推车，里面装满了这些书。在网页开发的世界里，这个推车就像是HTMLCollection——一个我们可以使用JavaScript操作的HTML元素集合。

什么是 HTMLCollection？

HTMLCollection 是一个类似列表的对象，它表示网页上的HTML元素集合。它是“实时”的，意味着当底层文档变化时，它会自动更新。

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

<div class="book">JavaScript基础</div>
<div class="book">高级JavaScript</div>
<div class="book">DOM操作</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // 输出：3
</script>

在这个例子中，books 是一个包含所有类名为 "book" 的元素的 HTMLCollection。length 属性告诉我们集合中有多少个元素。

访问 HTMLCollection 中的元素

你可以像操作数组一样访问 HTMLCollection 中的元素：

console.log(books[0].innerText); // 输出： "JavaScript基础"
console.log(books[1].innerText); // 输出： "高级JavaScript"
console.log(books[2].innerText); // 输出： "DOM操作"

但是，请记住，HTMLCollection 不是一个真正的数组。它类似于数组，但并没有数组所有的方法。

遍历 HTMLCollection

要遍历 HTMLCollection 中的所有元素，你可以使用 for 循环：

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

或者，如果你更喜欢现代的方法，你可以将 HTMLCollection 转换为数组并使用数组方法：

Array.from(books).forEach(book => {
console.log(book.innerText);
});

document 对象和 DOM 元素的集合

现在我们理解了 HTMLCollection，让我们探索一些创建DOM元素集合的常见方法。

document.getElementsByTagName()

这个方法返回一个指定标签名的元素的 HTMLCollection。

<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 输出：3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

我们之前见过这个，但让我们更深入地了解一下：

<div class="fruit">苹果</div>
<div class="fruit">香蕉</div>
<div class="fruit">橙子</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // 输出：3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

这个强大的方法返回一个匹配CSS选择器的所有元素的 NodeList（与 HTMLCollection 类似）：

<ul>
<li class="item">项目1</li>
<li class="item">项目2</li>
<li class="item">项目3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // 输出：3

items.forEach(item => {
console.log(item.innerText);
});
</script>

请注意，与 HTMLCollection 不同，querySelectorAll() 返回的 NodeList 不是实时的，并且内置了 forEach 方法。

集合方法的比较

下面是一个总结我们讨论过的集合方法的便捷表格：

方法	返回	实时？	用例
getElementsByTagName()	HTMLCollection	是	当你需要特定标签的元素时
getElementsByClassName()	HTMLCollection	是	当你需要具有特定类的元素时
querySelectorAll()	NodeList	否	当你需要匹配CSS选择器的元素时

记住，“实时”意味着集合会在DOM变化时自动更新。

结论

亲爱的学生们，以上就是我们的旅程！我们一起穿越了DOM集合的土地，从HTMLCollection到各种收集DOM元素的方法。这些工具是使用JavaScript操作网页的基础，让你能够轻松选择和修改元素。

当你练习这些概念时，你会发现自己在DOM操作上越来越熟练。这就像学习乐器一样——起初，它可能看起来很具挑战性，但随着练习，你很快就能创作出美妙的网页交响乐！

记住，掌握编程的关键是练习和好奇心。不要害怕尝试这些方法，尝试不同的场景，最重要的是，编码时要有乐趣！

下次见，快乐编码！

Credits: Image by storyset