web-dev-qa-db-ja.com

MutationObserverが機能しない

次のコードを検討してください。

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'), {

スクリプトが機能するようになります...

javascriptmutation-observers
15
tic

観察しているものを何も変更していないため、機能していないようです。あなたも変わらない

  • 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ドキュメント の詳細情報。

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>
26
Felix Kling