DOM HTMLCollection

在 JavaScript 中，HTMLCollection 是一种类数组对象，用于存储 DOM 元素的集合。HTMLCollection 可以通过访问 DOM 元素的属性和方法来操作其中的元素。

获取 HTMLCollection

HTMLCollection 可以通过多种方式获取，其中最常见的方式是使用 DOM 方法来获取页面中的元素集合。

// www.javascriptcn.com code example
// 通过标签名获取元素集合
const elements = document.getElementsByTagName('div');

// 通过类名获取元素集合
const elements = document.getElementsByClassName('my-class');

// 通过 ID 获取单个元素
const element = document.getElementById('my-id');
const children = element.children;

遍历 HTMLCollection

HTMLCollection 可以像数组一样进行遍历，可以使用 for 循环或者 forEach 方法来遍历其中的元素。

// www.javascriptcn.com code example
// 使用 for 循环遍历 HTMLCollection
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]);
}

// 使用 forEach 方法遍历 HTMLCollection
elements.forEach(element => {
  console.log(element);
});

操作 HTMLCollection

HTMLCollection 中的元素可以通过索引来访问和操作，也可以使用 DOM 方法来对其中的元素进行操作。

// www.javascriptcn.com code example
// 获取第一个元素
const firstElement = elements[0];

// 添加新元素到 HTMLCollection
const newElement = document.createElement('div');
elements[0].appendChild(newElement);

// 删除 HTMLCollection 中的元素
elements[1].remove();

总结

HTMLCollection 是一个非常常用的 DOM 元素集合类型，可以方便地操作页面中的多个元素。通过掌握 HTMLCollection 的基本用法，可以更好地操作页面中的 DOM 元素集合。