DOM HTMLCollection

DOM HTMLCollection（文档对象模型HTML集合）是指网页中DOM的一个特殊属性，它是一个包含指定元素的集合，可以通过代码访问到网页中的元素。

HTMLCollection的属性和方法

属性

HTMLCollection有以下属性：

1. length -返回集合中的元素数量。
2. item(index) - 返回集合中具有特定索引号(index)的元素。如果索引号无效，则返回null。
3. namedItem(name) - 返回ID或name属性匹配所提供字符串的元素。如果找到多个匹配项，则返回以第一个命名项为其ID的元素。

方法

HTMLCollection在操作中有以下方法：

1. 为元素添加到集合中

通过以下两种方式可以将元素添加到集合中：

• 直接定义ID或name属性。

<div id="myDiv"></div>
<input name="myInput">

或者

• 代码逐一添加到集合

var myCollection = document.getElementsByTagName('input');

2. 删除元素

使用javascript的removeChild()方法可以从DOM中删除一个元素。同样，也可以从集合中删除一个元素。

var myCollection = document.getElementsByTagName('input');
var removedElement = myCollection[0];
myCollection.removeChild(removedElement);

3. 遍历集合元素

HTMLCollection 可以被迭代（遍历）：

var myCollection = document.getElementsByTagName('input');
for (var i = 0; i < myCollection.length; i++) {
  console.log(myCollection[i]);
}

HTMLCollection 与 NodeList 的区别

HTMLCollection 和 NodeList 都是 DOM 中的集合，它们的主要区别在于：

• 1）HTMLCollection 是一个动态的集合，在DOM改变时，会自动添加、删除元素，而 NodeList 是静态的，一旦创建就不再受DOM操作的影响。另外，HTMLCollection只包含元素节点，而NodeList包含所有类型的节点。
• 2）HTMLCollection 是一种伪数组对象，拥有length属性和数值索引，可以使用for循环迭代，而NodeList则没有length属性，只能使用forEach()方法进行迭代。

总结

HTMLCollection提供了一种方便快捷的方式来访问网页中的元素。可以使用它来添加、删除、以及遍历DOM节点。HTMLCollection与NodeList的主要区别在于，HTMLCollection是动态的,而NodeList是静态的。在需要动态更新节点集的情况下，使用HTMLCollection是更加合适的选择。