是否有只能检测直接子节点中更改的jquery方法或其他解决方案?

Question

我发现了 jquery 方法(DOMSubtreeModified( 可以检测特定 dom 的子节点的插入。
但是，此方法检测所有子节点的插入，而不仅仅是直接子节点。
是否有只能检测直接子节点中更改的jquery方法或其他解决方案？

例如，在这种情况下：

<div id="content">
</div>

我只想检测以下情况：

<div id="content">
<div>one</div>
</div>

不是这种情况：

<div id="content">
<div>one <span>add</span></div>
</div>

Answer 1

DOMSubtreeModified不是特定于jQuery的，它来自Web API，现在已被弃用，取而代之的是Mutation Observer API。

若要监视直系子项的变化，请使用childList设置为true的MutationObserver：

const content = document.getElementById("content");
new MutationObserver(() => {
console.log('[MutationObserver] Changes in immediate children detected');
}).observe(content, { childList: true });
setTimeout(() => {
content.innerHTML += '<pre style="background: #7FDBFF;">There's a change in the DOM!</pre>';
}, 1000);

<div id="content">
Wait for it...
</div>

除了childList参数之外，您还可以传递subtree: true来检测对嵌套子项的更改。

Answer 2

将 MutationObserver 与childList: true一起使用，这将检测对直接子项的更改，但不会检测对嵌套子项的更改：

new MutationObserver(() => {
console.log('mutation detected');
}).observe(content, { childList: true });
setTimeout(() => {
content.innerHTML += '<div>one </div>';
}, 500);
setTimeout(() => {
document.querySelector('#content > div').innerHTML += '<span>add</span>';
}, 1000);

<div id="content">
</div>

要检测嵌套子项的更改，您必须使用{ subtree: true }

：

new MutationObserver(() => {
console.log('mutation detected');
}).observe(content, { childList: true, subtree: true });
setTimeout(() => {
content.innerHTML += '<div>one </div>';
}, 500);
setTimeout(() => {
document.querySelector('#content > div').innerHTML += '<span>add</span>';
}, 1000);

<div id="content">
</div>

请记住，MutationObserver 回调作为微任务(如Promise.resolve().then(触发，不像DOMSubtreeModified，它是完全同步的。