DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版本的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的其中一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,或者导致性能影响的问题出现。
最常用的方法是使用文档片段(DocumentFragment)作为参数(例如,任何 Node 接口类似 Node.appendChild 和 Node.insertBefore) 的方法),这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染的操作,而不是每个节点分别被插入到文档中,因为后者会发生多次重渲染的操作。
该接口在Web组件中也非常有用: 模板 元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment 。
可以使用document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment.
属性
该接口没有特殊的属性,其属性都继承自 Node ,并补充了 ParentNode 接口中的属性。
ParentNode.children只读- 返回一个实时(live)
HTMLCollection,包含所有属于DocumentFragment的元素类型的子对象。 ParentNode.firstElementChild只读- 返回
DocumentFragment的第一个Element类型的子对象,如果没有则返回null。 ParentNode.lastElementChild只读- 返回
DocumentFragment的最后一个Element类型的子对象,如果没有则返回null。 ParentNode.childElementCount只读- Returns an
unsigned longgiving the amount of children that theDocumentFragmenthas.
构造函数
DocumentFragment()- 返回空的
DocumentFragment对象。
方法
该接口继承 Node 的全部方法,并实现了 ParentNode 接口中的方法。
DocumentFragment.find()- 返回
DocumentFragment 树里第一个匹配的元素Element。 DocumentFragment.findAll()- 返回
DocumentFragment 树里所有匹配的元素NodeList。 DocumentFragment.querySelector()- Returns the first
Elementnode within theDocumentFragment, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()- Returns a
NodeListof all theElementnodes within theDocumentFragmentthat match the specified selectors.
DocumentFragment.getElementById()- Returns the first
Elementnode within theDocumentFragment, in document order, that matches the specified ID.
标准
| Specification | Status | Comment |
|---|---|---|
| DOM DocumentFragment |
Living Standard | 添加了构建函数和对 ParentNode 的实现。 |
| Selectors API Level 2 DocumentFragment |
Obsolete | 添加 find() 和 findAll() 方法。 |
| Selectors API Level 1 DocumentFragment |
Obsolete | 添加 querySelector() 和 querySelectorAll() 方法。 |
| Document Object Model (DOM) Level 3 Core Specification DocumentFragment |
Obsolete | 和 Document Object Model (DOM) Level 2 Core Specification 一样 |
| Document Object Model (DOM) Level 2 Core Specification DocumentFragment |
Obsolete | 和 Document Object Model (DOM) Level 1 Specification 一样 |
| Document Object Model (DOM) Level 1 Specification DocumentFragment |
Obsolete | 最初的定义。 |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
querySelector() and querySelectorAll() |
1.0 | 3.5 (1.9.1) | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
DocumentFragment() constructor |
28.0 | 24.0 (24.0) | 未实现 | 15.0 | 未实现 |
ParentNode properties |
28.0 | 25.0 (25.0) | 未实现 | 15.0 | 未实现 |
ParentNode methods |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
querySelector() and querySelectorAll() |
2.1 | 3.5 (1.9.1) | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
DocumentFragment() constructor |
? | 24.0 (24.0) | 未实现 | ? | ? |
ParentNode properties |
28.0 | 25.0 (25.0) | 未实现 | 5.0 | 未实现 |
ParentNode methods |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |