此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
HTMLCollection
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(与arguments 相似的类数组 (array-like) 对象),还提供了用来从该集合中选择元素的方法和属性。
备注:由于历史原因(DOM4 之前,实现该接口的集合只能包含 HTML 元素),该接口被称为HTMLCollection。
HTML DOM 中的HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。因此,最好是创建副本(例如,使用Array.from)后再迭代这个数组以添加、移动或删除 DOM 节点。
In this article
属性
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 HTMLCollectionelem1 = 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> # interface-htmlcollection> |