当我们尝试使用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/
有解决方法吗?
答案 0 :(得分:2)
这是预期的行为。所有附加的.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
只是一个节点数组,因此您可以递归遍历每个项目以获取所有子节点。