将字符串转换为DOM节点

不久之前，浏览器在实现新的API和功能时几乎停滞不前，从而导致MooTools（FTW），jQuery，Dojo Toolkit，Prototype和类似的JavaScript工具箱的兴起。然后，我们开始进行更多的客户端渲染，并被迫使用各种技巧来处理模板，包括JavaScript中的大量HTML字符串，甚至滥用<script>标签来保存模板。

当然，在将内容放入模板后，您需要将该字符串转换为DOM节点，并且该过程具有一些自己的技巧，例如创建屏幕外，dummy <div>，将其设置innerHTML为字符串值，抓取的firstChild，以及移动节点到其期望的节点。每个JavaScript工具箱都将使用自己的策略将字符串转换为DOM，从而突出显示了需要一种标准方法来完成此任务的需求。

今天有转换字符串DOM使用JavaScript知道一点点（但标准）的方式： ContextualFragment。

过去， 我曾DocumentFragment尝试创建和存储DOM节点以提高性能，但是该文章通过document.createElement以下内容说明了元素创建 ：

// Use a DocumentFragment to store and then mass inject a list of DOM nodes
var frag = document.createDocumentFragment();
for(var x = 0; x < 10; x++) {
 var li = document.createElement("li");
 li[removed] = "List item " + x;
 frag.appendChild(li);
}

要从HTML字符串创建DOM节点，我们将使用 document.createRange().createContextualFragment：

let frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
  #document-fragment
    <div>One</div>
    <div>Two</div>
*/

DocumentFragment对象共享大部分的方法是NodeList对象有，所以你可以使用典型的DOM方法，如querySelector和querySelectorAll 等，以及DOM遍历性firstChild与所得到的DocumentFragment：

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

当准备注入所有创建的DOM节点时，只需执行以下命令即可：

// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);

您也可以一次注入一个节点：

placementNode.appendChild(frag.firstChild);

该document.createRange().createContextualFragment函数是一种很棒的，明智的方法，用于将字符串转换为JavaScript中的DOM节点。抛弃旧的垫片，并切换到该高性能，简单的API！