HTMLCollection 对象

在 Web 开发中，我们经常会遇到需要操作 DOM 元素集合的情况。HTMLCollection 对象就是用来表示 DOM 元素集合的一种对象。HTMLCollection 对象类似于数组，但是它并不是真正的数组，只是一个包含了一组元素的集合。

获取 HTMLCollection 对象

在 JavaScript 中，我们可以通过多种方式获取 HTMLCollection 对象，最常见的方式是使用 document.getElementsByTagName() 或 document.getElementsByClassName() 方法。

使用 document.getElementsByTagName()

const elements = document.getElementsByTagName('div');
console.log(elements); // HTMLCollection 对象

使用 document.getElementsByClassName()

const elements = document.getElementsByClassName('container');
console.log(elements); // HTMLCollection 对象

HTMLCollection 对象的特性

HTMLCollection 对象具有以下一些特性：

1. 实时性：HTMLCollection 对象是实时更新的，当文档结构发生变化时，HTMLCollection 对象会自动更新。

2. 只读性：HTMLCollection 对象是只读的，不能直接修改其中的元素，但可以通过操作 DOM 来修改元素。

遍历 HTMLCollection 对象

遍历 HTMLCollection 对象的方式和遍历数组类似，可以使用 for 循环或者 forEach 方法。

使用 for 循环

const elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]); // 打印每个元素
}

使用 forEach 方法

const elements = document.getElementsByClassName('container');
elements.forEach(element => {
  console.log(element); // 打印每个元素
});

总结

HTMLCollection 对象是表示 DOM 元素集合的一种对象，具有实时性和只读性。我们可以通过多种方式获取 HTMLCollection 对象，并且可以使用各种方法遍历其中的元素。在实际开发中，HTMLCollection 对象是我们经常会用到的一个重要概念。