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

2024-04-23

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

初始 HTML 设置:

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

这是我的突变观察者代码:

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);

突变观察者只记录div它被附加到容器,但不记录img作为突变中的添加节点。

这是一个工作中的 JSFiddle:https://jsfiddle.net/aedhefhn/ https://jsfiddle.net/aedhefhn/

有解决方法吗?


这是预期的行为。这div就是附加的一切,只是碰巧有一些孩子。您当然可以自己遍历它的子节点.addedNodes尽管。.addedNodes只是一个节点数组,因此您可以递归地遍历每个项目以获取所有子项。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Mutation Observer不检测通过innerHTML、appendChild添加的节点 的相关文章