fiddle :https://jsfiddle.net/7gj26hqu/
我想要一个MutationObserver
可以检测自身内部的所有新节点。在示例中,我设置了 {childList: true, subtree: true}
, 但是 div#nested
未出现在 MutationObserver
中(显示在控制台中)。
如何让观察者检测到子节点的任何深度?
const domObserver = new MutationObserver((records) => {
records.forEach((record) => {
console.log(record)
})
})
domObserver.observe(document.querySelector('#frame'), {childList: true, subtree: true})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
最佳答案
看起来当一个被观察的容器有它的 innerHTML
set,容器的 child 被清空,然后新的 child 被完整地添加。使用同步观察者(以便您可以看到正在发生的事情),查看添加元素时子节点是如何存在的:
// Look at results in browser console:
window.addEventListener('DOMNodeInserted', (e) => {
console.log(e.path[0].childNodes.length);
});
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
被观察容器的孙子连接到子之前 child 附在容器上,所以
subtree: true
没有看到附件操作。要检测以这种方式插入的所有子节点,您必须手动递归遍历 MutationRecord 中的所有元素,尽管
subtree: true
.const recurse = (parent) => {
console.log(parent);
if (parent.childNodes) {
[...parent.childNodes].forEach(recurse);
}
};
const domObserver = new MutationObserver((records) => {
for (const record of records) {
for (const node of record.addedNodes) {
recurse(node);
}
}
})
domObserver.observe(document.querySelector('#frame'), {childList: true, subtree: true})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
结果:
如果您想改用 TreeWalker:
const frame = document.querySelector('#frame');
const domObserver = new MutationObserver(() => {
// If the container's innerHTML was assigned to, iterate over all descendants:
const treeWalker = document.createTreeWalker(frame);
const nodes = [];
let currentNode = treeWalker.currentNode;
while (currentNode) {
nodes.push(currentNode);
currentNode = treeWalker.nextNode();
}
console.log(nodes);
});
domObserver.observe(frame, {
childList: true,
subtree: true
})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
关于javascript - MutationObserver 没有在子节点上拾取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61314922/