DocumentFragment
DocumentFragment
,文档片段接口,一个没有父对象的最小文档对象。它被作为一个轻量版的 Document
使用,就像标准的 document 一样,存储由节点(nodes)组成的文档结构。与 document 相比,最大的区别是 DocumentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。
最常用的方法是使用文档片段作为参数(例如,任何 Node
接口类似 Node.appendChild
和 Node.insertBefore
的方法),这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点,而非片段本身。因为所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染的操作,而不是每个节点分别被插入到文档中,因为后者会发生多次重渲染的操作。
该接口在 Web 组件(Web components)中也非常有用:<template>
元素在其 HTMLTemplateElement.content
属性中包含了一个 DocumentFragment
。
可以使用document.createDocumentFragment
方法或者构造函数来创建一个空的 DocumentFragment
。
属性
该接口没有特殊的属性,其属性都继承自 Node
,并补充了 ParentNode
接口中的属性。
ParentNode.children
(en-US) 只读 Experimental- 返回一个实时(live)
HTMLCollection
,包含所有属于DocumentFragment
的元素
类型的子对象。 ParentNode.firstElementChild
(en-US) 只读 Experimental- 返回
DocumentFragment
的第一个Element
类型的子对象,如果没有则返回null
。 ParentNode.lastElementChild
(en-US) 只读 Experimental- 返回
DocumentFragment
的最后一个Element
类型的子对象,如果没有则返回null
。 ParentNode.childElementCount
只读 Experimental- 返回一个
unsigned long
给出DocumentFragment
拥有的子项数量。
构造函数
DocumentFragment()
Experimental- 返回一个空的
DocumentFragment
对象。
方法
该接口继承 Node
的全部方法,并实现了 ParentNode
接口中的方法。
DocumentFragment.querySelector()
- 返回在
DocumentFragment
中以文档顺序排列的第一个符合指定选择器的Element
节点。 DocumentFragment.querySelectorAll()
- 返回在
DocumentFragment
中所有的符合指定选择器的Element
节点组成的NodeList
数组。 DocumentFragment.getElementById()
- 返回在
DocumentFragment
中以文档顺序排列的第一个符合指定 ID 选择器的Element
节点。与Document.getElementById()
作用相同。
例子
HTML
<ul id="list"></ul>
JavaScript
const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
const fragment = document.createDocumentFragment();
fruits.forEach(fruit => {
const li = document.createElement('li');
li.innerHTML = fruit;
fragment.appendChild(li);
});
list.appendChild(fragment);
Result
标准
Specification |
---|
DOM Standard # interface-documentfragment |
浏览器兼容性
BCD tables only load in the browser