不久之前，瀏覽器在實(shí)現(xiàn)新的API和功能時幾乎停滯不前，從而導(dǎo)致MooTools（FTW），jQuery，Dojo Toolkit，Prototype和類似的JavaScript工具箱的興起。然后，我們開始進(jìn)行更多的客戶端渲染，并被迫使用各種技巧來處理模板，包括JavaScript中的大量HTML字符串，甚至濫用<script>標(biāo)簽來保存模板。

當(dāng)然，在將內(nèi)容放入模板后，您需要將該字符串轉(zhuǎn)換為DOM節(jié)點(diǎn)，并且該過程具有一些自己的技巧，例如創(chuàng)建屏幕外，dummy <div>，將其設(shè)置innerHTML為字符串值，抓取的firstChild，以及移動節(jié)點(diǎn)到其期望的節(jié)點(diǎn)。每個JavaScript工具箱都將使用自己的策略將字符串轉(zhuǎn)換為DOM，從而突出顯示了需要一種標(biāo)準(zhǔn)方法來完成此任務(wù)的需求。

今天有轉(zhuǎn)換字符串DOM使用JavaScript知道一點(diǎn)點(diǎn)（但標(biāo)準(zhǔn)）的方式： ContextualFragment。

過去， 我曾DocumentFragment嘗試創(chuàng)建和存儲DOM節(jié)點(diǎn)以提高性能，但是該文章通過document.createElement以下內(nèi)容說明了元素創(chuàng)建 ：

// 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字符串創(chuàng)建DOM節(jié)點(diǎn)，我們將使用 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');

當(dāng)準(zhǔn)備注入所有創(chuàng)建的DOM節(jié)點(diǎn)時，只需執(zhí)行以下命令即可：

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

您也可以一次注入一個節(jié)點(diǎn)：

placementNode.appendChild(frag.firstChild);

該document.createRange().createContextualFragment函數(shù)是一種很棒的，明智的方法，用于將字符串轉(zhuǎn)換為JavaScript中的DOM節(jié)點(diǎn)。拋棄舊的墊片，并切換到該高性能，簡單的API！