MutationObserver 不工作

Question

考虑以下代码：

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>

这是 this 的轻微修改。

与 jsbin version 页面交互不会产生任何日志。我哪里错了？请注意，如果我替换行

  observer.observe(document, {

和

  observer.observe(document.querySelector('ol'), {

脚本开始工作...

Answer 1

它似乎不起作用，因为您没有改变您观察到的任何东西。你既不改变

document 节点的属性 (attributes: true)（这是可以理解的，因为 document 没有属性）
子节点（childList: true）：document的唯一子节点是<html>节点，您没有删除或替换它。
字符数据 (characterData: true)：您没有更改 document 的任何 Text、Comment 或 ProcessingInstruction 子项（这也是可以理解的，因为 document 不能有这样的子项）。

如果替换 <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);

您所做的是更改 ol 元素的内容，该元素是 document.

的后代

如果你想听这些变化，你必须将 subtree 设置为 true:

observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

MDN documentation 中的更多信息。

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>

MutationObserver 不工作

MutationObserver not working

javascript

mutation-observers