24

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

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>

これはこれを少し修正したものです。

jsbinバージョンページを操作しても、ログは生成されません。どこが間違っていますか？行を置き換えると注意してください

  observer.observe(document, {

と

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

スクリプトは動作をオンにします...

4

1 に答える 1

38

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

  • ノードの属性 ( attributes: true) (属性がないため、これは理解できます)documentdocument
  • 子ノード ( childList: true): の唯一の子ノードはdocumentノード<html>であり、それを削除または置換していません。
  • 文字データ ( characterData: true): の Text、Comment、または ProcessingInstruction の子を変更していませんdocument(このような子を持つことができないため、これも理解documentできます)。

ノードを交換する<html>と、Mutation Observer が設定どおりに機能することがわかります。

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

この種の変更を聞きたい場合は、subtreetrue に設定する必要があります。

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>

于 2015-06-19T20:46:17.013 に答える