DocumentFragment类型

Posted gaoxuerong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DocumentFragment类型相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DocumentFragment类型</title>
	</head>
	<body>
		<ul></ul>
	</body>
	<script>
		let ul=document.getElementsByTagName(‘ul‘)[0],
		docFrag=document.createDocumentFragment();
		const brower=[
		"ie",
		"firefox",
		"googgle"
		];
		console.log(brower);
		brower.forEach(function (e) {
			let li=document.createElement(‘li‘);
			console.log(li);
			li.textContent=e;
			console.log(li);
			docFrag.appendChild(li);
			console.log(docFrag);
		});
		ul.appendChild(docFrag);
		/*
            nodeType 的值为 11;
 nodeName 的值为"#document-fragment";
 nodeValue 的值为 null;
 parentNode 的值为 null;
 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。
虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。
要创建文档片段,可以使用 document.createDocumentFragment()方法,
文档片段继承了 Node 的所有方法,通常用于执行那些针对文档的 DOM 操作。如果将文档中的节
点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。添加到文档片段
中的新节点同样也不属于文档树。可以通过 appendChild()或 insertBefore()将文档片段中内容添
加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到
相应位置上;文档片段本身永远不会成为文档树的一部分
         */
	</script>
</html>

 

以上是关于DocumentFragment类型的主要内容,如果未能解决你的问题,请参考以下文章

DocumentFragment使用

DocumentFragment批量操作dom

JavaScript:将节点复制到 DocumentFragment

使用Documentfragment优化DOM操作

(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

DocumentFragment类型