将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。
字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:
,,,,1字符串转换为HTML DOM节点的基本方法及性能测试
,,,,2动态生成的DOM节点添加到文档中的方法及性能测试
本文的示例:有如下代码段
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; !——动态添加div
& lt; div类='孩子'比;XXX
——比;
& lt;/div>
& lt;/body>
& lt;/html>
任务是编写一个JavaScript函数,接收一个文本内容,动态生成一个包含该文本的div,返回该节点。下面话不多说了,来随着小编一起看看详细的介绍吧。
<强> 1.1.1 innerHTML
第一种方法,我们使用<代码> document.createElement 方法创建新的元素,然后利用innerHTML将字符串注入进的去,最后返回这个,得到动态创建的节点。
& lt; script>
函数createNode (txt) {
const模板=' & lt; div类='孩子'在${三}& lt;/div>”;
让tempNode=document.createElement (div);
tempNode。innerHTML=模板;
返回tempNode.firstChild;
}
const容器=. getelementbyid(“容器”);
container.appendChild (createNode('你好'));
& lt;/script>
下面我们看第二种方法
<强> 1.1.2 DOMParser
DOMParser实例的parseFromString方法可以用来直接将字符串转换为文档文档对象。有了文档之后,我们就可以利用各种DOM Api来进行操作了。
函数createDocument (txt) {
const模板=' & lt; div类='孩子'在${三}& lt;/div>”;
让医生=new DOMParser ()。parseFromString(模板,“text/html”);
让div=doc.querySelector (“.child”);
返回div;
}
const容器=. getelementbyid(“容器”);
container.appendChild (createDocument('你好'));
<强> 1.1.2 DocumentFragment
DocumentFragment对象表示一个没有父级文件的最小文档对象。它被当做一个轻量版的文档使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(回流),且不会导致性能等问题。
利用<代码> document.createRange () .createContextualFragment 方法,我们可以直接将字符串转化为DocumentFragment对象。
函数createDocumentFragment (txt) {
const模板=' & lt; div类='孩子'在${三}& lt;/div>”;
让碎片弹=document.createRange () .createContextualFragment(模板);
返回碎片弹;
}
const容器=. getelementbyid(“容器”);
container.appendChild (createDocumentFragment('你好'));
这里要注意的是我们直接将生成的DocumentFragment对象插入到目标节点中,这会将其所有自己点插入到目标节点中,不包含自身。我们也可以使用
frag.firstChild
来获取生成的div。
<强> 1.1.3性能测试
下面我们来简单比对下上面三种方法的性能,只是测试生成单个节点,在实际使用中并不一定有实际意义。
先测试createNode。
函数createNode (txt) {
const模板=' & lt; div类='孩子'在${三}& lt;/div>”;
我们开始=Date.now ();
(让我=0;我& lt;1000000;我+ +){
让tempNode=document.createElement (div);
tempNode。innerHTML=模板;
让节点=tempNode.firstChild;
}
console.log (Date.now()——开始);
}
createNode(“你好”);
测试100年万个节点生成,用6322时。
再来测试createDocument。
函数createDocument (txt) {
const模板=' & lt; div类='孩子'在${三}& lt;/div>”;
我们开始=Date.now ();
(让我=0;我& lt;1000000;我+ +){
让医生=new DOMParser ()。parseFromString(模板,“text/html”);
让div=doc.firstChild;
}
console.log (Date.now()——开始);
}
createDocument(“你好”);
