javascript MutationObserver 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30946829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MutationObserver not working
提问by tic
Consider the following code:
考虑以下代码：
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});
observer.observe(document, {
attributes: true,
childList: true,
characterData: true
});<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>which is a slight modification of this.
这是一个轻微的修改此。
Interacting with the jsbin versionpage does not produce any log. Where am I wrong? Notice that if I substitute line
与jsbin版本页面交互不会产生任何日志。我哪里错了？请注意，如果我替换 line
observer.observe(document, {
with
和
observer.observe(document.querySelector('ol'), {
the script turns on working...
脚本开始工作......
回答by Felix Kling
It doesn't appear to work because you are not mutating anything that you are observing. You are neither changing
它似乎不起作用，因为你没有改变你正在观察的任何东西。你既没有改变
- attributes (
attributes: true) of thedocumentnode (which is understandable, sincedocumentdoesn't have attributes) - child nodes (
childList: true): the only child node ofdocumentis the<html>node, and you are not removing or replacing it. - character data (
characterData: true): you are not changing any Text, Comment, or ProcessingInstruction children ofdocument(also understandable becausedocumentcannot have such children).
- 节点的属性 (
attributes: true)document（这是可以理解的，因为document没有属性） - 子节点 (
childList: true)： 的唯一子节点document是该<html>节点，您不会删除或替换它。 - 字符数据 (
characterData: true)：您没有更改任何 Text、Comment 或 ProcessingInstruction 子项document（也可以理解，因为document不能有这样的子项）。
If you replace the <html>node, you can see that the mutation observer works just as configured.
如果你更换<html>节点，你可以看到变异观察器和配置的一样工作。
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});
observer.observe(document, {
attributes: true,
childList: true,
characterData: true
});
document.replaceChild(document.createElement('div'), document.documentElement);What you are doing is changing the content of the olelement, which is a descendantof document.
你在做什么是改变的内容ol元素，这是一个后代的document。
If you want to listen to these kind of changes, you have to set subtreeto true:
如果你想听这些变化，你必须设置subtree为 true：
observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
characterData: true
});
More information in the MDN documentation.
MDN 文档中的更多信息。
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});
observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
characterData: true
});<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>![javascript 为什么 lodash `_.all([true, true, true], true);` 返回 `false`？](/res/img/loading.gif)