威尼斯wns.9778官网 > 计算机教程 > 使用文档碎片(威尼斯wns.9778官网DocumentFragments)

原标题:使用文档碎片(威尼斯wns.9778官网DocumentFragments)

浏览次数:96 时间:2019-05-11

标签(空格分隔): JavaScript

四、兼容性

Desktop

特性 Chrome FireFox IE Opera Safari
基本支持 1.0 1.0 Yes Yes Yes
querySelector() querySelectorAll() 1.0 3.5 8.0 10.0 3.2(525.3)
find() findAll() 不支持 不支持 不支持 不支持 不支持
DocumentFragment() 构造函数 28.0 24.0 不支持 15.0 不支持
ParentNode 属性 28.0 24.0 不支持 15.0 不支持
ParentNode 方法 不支持 不支持 不支持 不支持 不支持

Mobile

特性 Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile
基本支持 Yes 1.0 Yes Yes Yes
querySelector() querySelectorAll() 2.1 3.5 8.0 10.0 3.2(525.3)

* 其余实验属性参见原文

该接口在Web组件中也非常有用:模板元素在其HTMLTemplateElement.content属性中包含了一个DocumentFragment

可以使用document.createDocumentFragment方法或者构造函数来创建一个空的DocumentFragment。



最常用的方法是使用文档片段作为参数(例如,任何Node接口类似Node.appendChildNode.insertBefore的方法),这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点,而非片段本身。因为所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染操作,而不是每个节点分别被插入到文档中,因为后者会发生多次渲染的操作。

三、方法

该接口继承Node的全部方法,并实现了ParentNode接口的方法。

DocumentFragment.find()威尼斯wns.9778官网, [实验属性]

返回DocumentFragment树里第一个匹配的元素Element

DocumentFragment.findAll() [实验属性]

返回DocumentFragment树里所有匹配的元素NodeList

DocumentFragment.querySelector()

返回DocumentFragment中的第一个元素节点,按照文档顺序,并与指定的选择器匹配。

DocumentFragment.querySelectorAll()

DocumentFragment.getElementById()

五、示例

当我们要想document中添加大量DOM节点时,如果循环插入,会出现明显的性能问题。我们也可以创建个新节点,比如说div,然后将div一次性插入document中,但是这样会多加一层div,而文档碎片(DocumentFragment)不会产生这种节点。

var docFragment = document.createDocumentFragment();

for (var i = counts; i > 0; i--) {
    var node = document.createElement('p');
    var node_text = document.createTextNode(i   ', hehe');

    node.appendChild(node_text);

    docFragment.appendChild(node);
}

document.body.appendChild(docFragment);

Last updated by: Jehorn, Dec 26, 2017, 11:20 AM

一、属性

该接口没有特殊的属性,其属性否继承自Node,并补充了ParentNode接口接口中的属性。

ParentNode.children [只读][实验属性]

返回一个实时(live)HTMLCollection,包含所有属于DocumentFragment的元素类型的子对象。

ParentNode.firstElementChild [只读][实验属性]

返回DocumentFragment的第一个Element类型的子对象,如果没有则返回null

ParentNode.lastElementChild [只读][实验属性]

返回DocumentFragment的最后一个Element类型的子对象,如果没有则返回null

ParentNode.childElementCount [只读][实验属性]

返回一个无符号长整型,给出DocumentFragment所有子项的数量。

DocumentFragment接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow),且不会导致性能等问题。

二、构造函数

DocumentFragment() [实验属性]

返回空的DocumentFragment对象。

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:使用文档碎片(威尼斯wns.9778官网DocumentFragments)

关键词:

上一篇:电脑技巧——DOS和windows的区别?

下一篇:没有了