Question

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

初始HTML setUp：

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

变异观察者只记录附加到容器的 div ，但不会将 img 记录为变异中的addedNode。

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

有解决方法吗？

Answer 1

这是预期的行为。所有附加的.addedNodes，恰好有一些孩子。您当然可以从.addedNodes自己遍历其子节点。 $ awk -F, 'NR==1 {fs["file"]} FNR>1 {c[FILENAME,$2]++; fs[FILENAME]; ks[$2]; c["file",$2]="count("$2")"} END {for(f in fs) {printf "%s", f; for(k in ks) printf "%s", OFS c[f,k]; printf "\n"}}' file{1,2} | column -t file count(new) count(old) file1 1 4 file2 3 2只是一个节点数组，因此您可以递归遍历每个项目以获取所有子节点。

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

1 个答案: