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 long
giving the amount of children that theDocumentFragment
has.
构造函数
DocumentFragment()
- 返回空的
DocumentFragment
对象。
方法
该接口继承 Node
的全部方法,并实现了 ParentNode
接口中的方法。
DocumentFragment.find()
- 返回
DocumentFragment 树里
第一个匹配的元素Element
。 DocumentFragment.findAll()
- 返回
DocumentFragment 树里所有
匹配的元素NodeList
。 DocumentFragment.querySelector()
- Returns the first
Element
node within theDocumentFragment
, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()
- Returns a
NodeList
of all theElement
nodes within theDocumentFragment
that match the specified selectors.
DocumentFragment.getElementById()
- Returns the first
Element
node 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 |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |