Mutation Observer 不检测通过 innerHTML、appendChild 添加的节点

Question

当我们尝试使用 appendChild 或 innerHTML 在 DOM 中添加嵌套节点时，嵌套节点不会出现在突变的添加节点中。

初始HTML设置：

<html>
    <body>
        <div id="container">
        </div>
    </body>
</html>

这是我的 Mutation Observer 代码：

var observer = new MutationObserver(function(mutations) {
  for (var i = 0; i < mutations.length; i++) {
    var mutation = mutations[i];
    switch(mutation.type) {
      case 'childList':
        console.log(mutation.addedNodes);
      break;
      default:

    }
  }
});

observer.observe(document, {
    childList: true,
    subtree: true,
    attributes: true,
    characterData: true
});

如果我现在在 div、

中使用嵌套的 img 节点执行 appendChild

var img = document.createElement('img');
img.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
var div = document.createElement('div');
div.appendChild(img);
var container = document.getElementById("container");
container.appendChild(div);

Mutation Observer 仅记录附加到容器的 div，但不记录 img 作为一个添加的节点在突变中。

这是一个有效的 JSFiddle：https://jsfiddle.net/aedhefhn/

有解决办法吗？

Answer 1

这是预期的行为。 div 是所有附加的，它只是恰好有一些 children。不过，您当然可以自己从 .addedNodes 遍历其 child 节点。 .addedNodes 只是一个节点数组，所以你可以递归地遍历每个项目以获得所有 children.

Mutation Observer 不检测通过 innerHTML、appendChild 添加的节点

Mutation Observer does not detect nodes added through innerHTML, appendChild

innerhtml

appendchild

mutation-observers

mutation-events