Javascript MutationObserver未在子节点上拾取

小提琴：

我希望有一个

MutationObserver

，它可以检测自身中的所有新节点。在这个例子中，我设置了

{childList:true，subtree:true}

，但是

div#nested

不会出现在

MutationObserver

中（显示在控制台中）

如何让观察者检测子节点的深度

const domObserver=新的MutationObserver（（记录）=>{
记录。forEach（（记录）=>{
console.log（记录）
})
})
domObserver.observe（document.querySelector（'#frame'），{childList:true，subtree:true}）
//将子节点从#模板中复制出来（作为字符串），并将其插入到#帧中，以便观察者进行检测
document.querySelector（“#frame”）.innerHTML=document.querySelector（“#template”）.innerHTML

我存在于DOM中，但没有被MutationObserver看到

看起来，当正在观察的容器设置了其

innerHTML

时，容器的子容器被清空，然后新的子容器被完整地添加。使用同步观察者（以便您可以看到发生了什么），查看在追加元素时子节点是如何存在的：

//在浏览器控制台中查看结果：
window.addEventListener（'domandeinserted'，（e）=>{
console.log（e.path[0].childNodes.length）；
});
document.querySelector（“#frame”）.innerHTML=document.querySelector（“#template”）.innerHTML

我存在于DOM中，但没有被MutationObserver看到

FWIW TreeWalker API可能是比递归更好的解决方案。或者一个简单的getElementsByTagName（“*”），以防只需要处理元素。您的代码工作得非常好，我非常感谢您的解释。谢谢@在某个地方，当一个答案解决了你的问题时，你可以考虑将投票和/或标记为接受（检查左边的复选框）以表明问题已经解决：它正在工作。只是需要很长时间才能将其全部加载到控制台中。Do

constdomobserver=newmutationobserver（记录=>{records.forEach（记录=>{console.log（record.target.innerHTML）；}）；}）