DOM HTMLCollection

HTMLCollection 接口定义了一个包含 HTML 元素的集合，并提供了一些属性和方法从集合中选择元素。 HTMLCollection 中元素的顺序和文档流中顺序保持一致。

HTML DOM 中的 HTMLCollection 的元素是可变的，如果其对应的 HTML 文档结构发生了变化，里面的元素会自动更新。

HTMLCollection 对象的结构类似于数组，但不是数组。

HTMLCollection 对象

getElementsByTagName() 方法返回一个 HTMLCollection 对象，包含了指定标签名称的元素的列表。

以下代码返回文档中的所有 <p> 元素：

const myCollection = document.getElementsByTagName("p");

HTMLCollection 集合中的元素可以通过像数组一样通过索引号访问，索引号从 0 开始。比如要访问第二个 <p> 元素，可以使用如下代码：

myCollection[1];

**注意：**索引从 0 开始。

HTMLCollection 遍历

HTMLCollection 对象的 length 属性返回集合中的元素的数量。当想要遍历集合中的元素时， length 属性很有用。

下面例子更改所有 <p> 元素的文本颜色：

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
  myCollection[i].style.color = "red";
}

HTMLCollection 不是数组！它指示看起来看起来像一个数组，但它不是。HTMLCollection 集合中的元素可以通过像数组一样通过索引号访问，但是并没有数组中的那些方法，比如：pop()、push() 或 join()

HTMLCollection.item()

除了像数组一样通过 [] 获取元素，也可以通过 item() 方法获取其中的元素。

item() 方法的参数是索引号，从 0 开始。 如果给定的索引超出了范围，则会返回 null 。

使用 item() 改造上面的例子：

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
  myCollection.item(i).style.color = "red";
}