如何获取DocumentFragment内容？Chrome打印克隆模板片段仅首个可展开是bug吗

这不是你的代码逻辑错误，属于Chrome DevTools的设计特性，不属于功能性bug。

• DocumentFragment是临时DOM容器，当你调用appendChild(liTemplate)将片段插入真实DOM时，片段内的所有子节点会被移动到目标父节点下，片段本身会被自动清空，不再持有任何子元素。
• 第一次打印的DocumentFragment没有后续挂载操作，始终保持游离状态，因此Chrome控制台会将其保留为可交互的可展开对象。
• 循环内打印的片段在打印后被立即挂载到DOM树被清空，加上Chrome控制台打印引用类型时默认采用惰性求值，你点击展开时才会读取对象当前状态，此时片段已经是空的，因此会被序列化为字符串形式输出。这是不同浏览器DevTools的输出逻辑差异，Firefox的控制台对DocumentFragment的打印做了特殊处理，不会受后续操作影响。

你可以注释掉append操作，就能看到循环内的所有打印都可以正常展开：

for (let i = 1; i < 3; i++) {
  liTemplate = document.querySelector('#row').content.cloneNode(true);
  console.log(liTemplate);
  liTemplate.querySelector('li').textContent = `row ${i}`;
  // 注释掉挂载操作后，所有打印的片段都可正常展开
  // insertPoint.appendChild(liTemplate);
}

如果需要在Chrome中正常查看挂载前的片段内容，可以用以下两种方式：

• 打印时对片段做临时拷贝，避免后续挂载操作影响控制台输出的对象：

  console.log(liTemplate.cloneNode(true))
  

• 直接打印片段的静态内容快照：

  // 打印根节点的HTML内容
  console.log(liTemplate.firstElementChild.outerHTML)
  

内容的提问来源于stack exchange，提问作者Alex Jongman