ParentNode - 包含所有拥有子级的 Node 的对象共有的方法和属性
ParentNode mixin 包含所有拥有子级的 Node 的对象共有的方法和属性。它由 Element,Document 和 DocumentFragment 对象实现。
请参阅使用选择器定位 DOM 元素,了解如何使用 CSS 选择器查找节点或感兴趣的元素。
属性
ParentNode.childElementCount 只读
返回此 ParentNode 的子元素数。
ParentNode.children 只读
返回一个实时 HTMLCollection,其中包含所有 Element 对象,这些对象是此 ParentNode 的子元素,并忽略其所有非元素节点。
ParentNode.firstElementChild 只读
返回第一个节点,该节点既是此 ParentNode 的子节点,并且也是一个 Element,如果没有则为 null。
ParentNode.lastElementChild 只读
返回最后一个节点,该节点既是此 ParentNode 的子节点,并且也是一个 Element,如果没有则为 null。
方法
ParentNode.append()
在 ParentNode 的最后一个子元素之后插入一组 Node 对象或 DOMString 对象。将 DOMString 对象作为等效的 Text 节点插入。
ParentNode.prepend()
在 ParentNode 的第一个子节点之前插入一组 Node 对象或 DOMString 对象。将 DOMString 对象作为等效的 Text 节点插入。
ParentNode.querySelector()
返回第一个 Element,其中当前元素为根,与指定的选择器组匹配。
ParentNode.querySelectorAll()
返回一个 NodeList,该元素代表与当前选择器组匹配的,以当前元素为根的元素列表。
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| DOM ParentNode 的定义 |
现行的标准 | 将 ElementTraversal 接口拆分为 ChildNode 和 ParentNode。现在在后者上定义了 ParentNode.firstElementChild,ParentNode.lastElementChild 和 ParentNode.childElementCount 属性。添加了 ParentNode.children 属性,以及 ParentNode.querySelector(),ParentNode.querySelectorAll(),ParentNode.append() 和 ParentNode.prepend() 方法。 |
| Element Traversal Specification ElementTraversal 的定义 |
已过时 | 在 ElementTraversal 纯接口中添加了其属性的初始定义,并在 Element 上使用了它。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 1 | 支持 | 3.5 | 9 | 10 | 4 |
append | 54 | 17 | 49 | 不支持 | 39 | 10 |
childElementCount | 1 | 支持 | 3.5 | 9 | 10 | 4 |
children | 1 | 支持 | 3.5 | 91 | 10 | 4 |
Support on Document and DocumentFragment | 29 | 未知 | 25 | 不支持 | 16 | 不支持 |
firstElementChild | 1 | 未知 | 3.5 | 9 | 10 | 4 |
lastElementChild | 1 | 支持 | 3.5 | 9 | 10 | 4 |
prepend | 54 | 17 | 49 | 不支持 | 39 | 10 |
querySelectorAll | 1 | 支持 | 3.5 | 92 | 10 | 4 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 支持 | 支持 | 未知 | 4 | 未知 | 支持 | 支持 |
append | 54 | 54 | 未知 | 49 | 未知 | 41 | 10 |
childElementCount | 支持 | 支持 | 未知 | 4 | 未知 | 支持 | 支持 |
children | 支持 | 支持 | 未知 | 4 | 未知 | 未知 | 9 |
Support on Document and DocumentFragment | 支持 | 支持 | 未知 | 未知 | 未知 | 未知 | 不支持 |
firstElementChild | 支持 | 支持 | 未知 | 4 | 未知 | 支持 | 支持 |
lastElementChild | 支持 | 支持 | 未知 | 4 | 未知 | 支持 | 支持 |
prepend | 54 | 54 | 未知 | 49 | 未知 | 41 | 10 |
querySelectorAll | 支持 | 支持 | 未知 | 支持 | 未知 | 10.1 | 3.2 |
1. Internet Explorer 6、7 和 8 支持它,但错误地包括了Comment节点。
2. Internet Explorer 8 仅支持 CSS2 选择器。
相关链接
ChildNode纯接口。- 实现此 mixin 的对象类型:
Document,Element和DocumentFragment。