为什么在附加后清除 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

来自 MDN 文档 DocumentFragment

各种其他方法可以将文档片段作为参数（例如，任何Node接口方法，例如Node.appendChild和Node.insertBefore），在这种情况下，附加或插入片段的子级，而不是片段本身。

foo = fooTemplate.content.cloneNode(true)将文档片段复制到foo.

main.appendChild(foo)移动内容的的foo文档片段插入main。foo仍然是一个文档片段，并且所有节点都已移动，因此它是空的。

如果您想在附加后保留对 DOM 节点的引用，则需要存储childNodes，但如果您只引用nodeList，它将为空，因此您需要将其转换为Array：

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