HTMLCollection
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTMLCollection
接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(与 arguments
相似的类数组 (array-like) 对象),还提供了用来从该集合中选择元素的方法和属性。
备注:由于历史原因(DOM4 之前,实现该接口的集合只能包含 HTML 元素),该接口被称为 HTMLCollection
。
HTML DOM 中的 HTMLCollection
是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。因此,最好是创建副本(例如,使用 Array.from
)后再迭代这个数组以添加、移动或删除 DOM 节点。
属性
HTMLCollection.length
只读-
返回集合当中子元素的数目。
方法
HTMLCollection.item()
-
根据给定的索引(从 0 开始),返回具体的节点。如果索引超出了范围,则返回
null
。访问
collection[i]
(在索引i
超出范围时会返回undefined
)的替代方法。这在非 JavaScript DOM 的实现中非常有用。 HTMLCollection.namedItem()
-
根据 ID 返回指定节点,若不存在,则根据字符串所表示的
name
属性来匹配。根据 name 匹配只能作为最后的依赖,并且只有当被引用的元素支持name
属性时才能被匹配。如果不存在符合给定 name 的节点,则返回null
。访问
collection[name]
(在name
不存在时会返回undefined
)的替代方法。这在非 JavaScript DOM 的实现中非常有用。
在 JavaScript 中使用
HTMLCollection
还通过将其成员的名称和索引直接以属性的形式公开。HTML ID 可能会包含在 ID 中合法的 :
和 .
字符,这时就需要使用括号表达式来访问属性。目前,HTMLCollection
不能识别纯数字的 ID,因为这与数组形式的访问相冲突(虽然 HTML5 允许使用纯数字的 ID)。
例如,假定在文档中有一个 <form>
元素,且它的 id
是 myForm
:
var elem1, elem2;
// document.forms is an HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // shows: "true"
elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // shows: "true"
elem1 = document.forms["named.item.with.periods"];
规范
Specification |
---|
DOM Standard # interface-htmlcollection |
浏览器兼容性
BCD tables only load in the browser