JavaScript创建文档片段节点|Document createDocumentFragment() 方法

由 hcduguo

Document 对象参考手册

定义与用法

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

语法格式

document.createDocumentFragment()

示例代码

创建一个 documentFragment 节点:

var d=document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("UL")[0].appendChild(d);

修改前:

  • Coffee
  • Tea

修改后:

  • Tea
  • Milk

亲自试试

浏览器支持

方法Google ChromeInternet ExplorerFirefoxSafariOpera
createDocumentFragment()YesYesYesYesYes

所有主要浏览器都支持 createDocumentFragment() 方法

返回值

类型描述
DocumentFragment 对象创建文档片段对象

技术细节

DOM 版本Core Level 1 Document Object

createElement和createDocumentFragment区别

共同点：

  • 添加子元素后返回值都是新添加的子元素，因此，可利用innerHTML为createDocumentFragment添加子元素。
  • 都可以通过appendChild添加子元素，且子元素必须是node类型，不能为文本。
  • 若添加的子元素是文档中存在的元素，则通过appendChild在为其添加子元素时，会从文档中删除之前存在的元素。

区别：

  • createElement创建的是元素节点，createDocumentFragment创建的是文档碎片。
  • 通过createElement新建元素必须指定元素tagName,因为其可用innerHTML添加子元素。通过createDocumentFragment则不必。
  • 连续将通过createElement新建的元素添加到其他元素上，则只会将新建的元素添加到最后一个其他元素上。
  • 而连续将通过createDocumentFragment新建的元素通过appendChild添加到其他元素上，则只会将新建的元素添加到第一个其他元素上。
  • 通过createElement创建的元素是直接插入到文档中，而通过createDocumentFragment创建的元素插入到文档中的是他的子元素。
  • 通过createElement创建的元素插入文档后，还可以取到创建时的返回值，而createDocumentFragment创建的元素插入到文档后，就不能访问创建时的返回值了，相当于把自己创建的文档片段直接挪到文档中了。

Document 对象参考手册

相关