DOM HTMLCollection
DOM HTMLCollection
DOM HTMLCollection(文档对象模型HTML集合)是指网页中DOM的一个特殊属性,它是一个包含指定元素的集合,可以通过代码访问到网页中的元素。
HTMLCollection的属性和方法
属性
HTMLCollection有以下属性:
- length -返回集合中的元素数量。
- item(index) - 返回集合中具有特定索引号(index)的元素。如果索引号无效,则返回null。
- namedItem(name) - 返回ID或name属性匹配所提供字符串的元素。如果找到多个匹配项,则返回以第一个命名项为其ID的元素。
方法
HTMLCollection在操作中有以下方法:
- 为元素添加到集合中
通过以下两种方式可以将元素添加到集合中:
- 直接定义ID或name属性。
<div id="myDiv"></div>
<input name="myInput">
或者
- 代码逐一添加到集合
var myCollection = document.getElementsByTagName('input');
- 删除元素
使用javascript的removeChild()方法可以从DOM中删除一个元素。同样,也可以从集合中删除一个元素。
var myCollection = document.getElementsByTagName('input');
var removedElement = myCollection[0];
myCollection.removeChild(removedElement);
- 遍历集合元素
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是更加合适的选择。