爲什麼在追加後清除DocumentFragment

Question

第一個日誌返回完整的li元素，而第二個日誌返回空的DocumentFragment。爲什麼？我無法在任何文檔中找到有關該行爲的任何信息。

<template id="my-template"> 
    <li>foo</li> 
</template> 

<ul id="main"> 
</ul> 

<script> 
    var main = document.getElementById('main'); 
    var fooTemplate = document.getElementById('my-template'); 
    var foo = fooTemplate.content.cloneNode(true); 

    console.log(foo); 
    main.appendChild(foo); 
    console.log(foo); 
</script> 

Answer 1

From the MDN docs on DocumentFragment

各種其它方法可利用一個文檔片段作爲參數（例如，任何Node接口方法如Node.appendChild和Node.insertBefore），在這種情況下，片段的兒童被附加或插入，而不是片段本身。

foo = fooTemplate.content.cloneNode(true)將文檔片段複製到foo。

main.appendChild(foo)將foo文檔片段的內容移動到main中。 foo仍然是一個文檔片段，並且所有節點都已移動，因此它是空的。

如果您想要在添加DOM節點後保留對DOM節點的引用，則需要存儲childNodes，但如果您只引用nodeList，則它將爲空，因此您需要將其轉換爲Array：

var nodes = Array.prototype.slice.call(foo.childNodes); 
console.log(nodes); 
main.appendChild(foo); 
console.log(nodes);