DOM変異イベントの交換

StackOverflow https://stackoverflow.com/questions/5416822

質問

DOM変異はW3Cによって非推奨としてマークされているため（参照 http://www.w3.org/tr/dom-level-3-events/#events-mutationevents）、DOMの属性変更を検出する（高速）代替方法はありますか？

役に立ちましたか？

解決

私が知っている限り（まだ）代替手段はないので、あなたは立ち往生しています DOMAttrModified FirefoxとOperaでのみサポートされています。つまり、あなたは持っています onpropertychanged イベントですが、Chrome/Safariで同様の機能を取得する方法はありません。あなたが達成しようとしていることと、あなたがターゲットにしているブラウザに応じて、あなたができることはたくさんあります：

  • 監視する属性にゲッターとセッターを定義します
  • のようなメソッドをオーバーライドします document.createAttribute, attributes.setNamedItem, ...

私は自分でクロスブラウザーソリューションに取り組んできましたが、あまり成功しませんでした。クロスブラウザーではなく、非常に遅いため、突然変異イベントから離れておく必要があります。彼らが非推奨される正当な理由があります。詳細を学びたい場合は、これを読んでください：

他のヒント

突然変異イベントが廃止された理由は、大きなパフォーマンスの問題が原因でした。

交換はです 突然変異オブザーバー, 、 見る http://updates.html5rocks.com/2012/02/detect-dom-changes-with-mutation-observers と https://developer.mozilla.org/en/dom_mutation_observers

突然変異に関する情報は、発生した変化の観察されたシーケンスを表す、変異レコードの順序付けられたシーケンスとしてオブザーバーに配信されます

サンプルの使用法：

    var observer = new MutationObserver(function(mutationRecords) {
    // Handle mutations
     });

    observer.observe(myNode,
     {  // options:
     subtree: true,  // observe the subtree rooted at myNode
     childList: true,  // include information childNode insertion/removals
     attribute: true  // include information about changes to attributes within the subtree
    });

これは、Chrome 18とFirefoxおよびWebKitの夜間ビルドでサポートされています。 Firefox 14もこの機能をサポートします。

非推奨のdom*イベントの素晴らしい代替品は animationStart CSSアニメーションと組み合わせて。 デビッド・ウォルシュは書いています 方法について。

まず、キーフレームをセットアップして、聴きたい要素に適用します（ベンダーのプレフィックスを忘れないでください！):

@keyframes nodeInserted {  
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }  
}

#parentElement > li {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

次に、リスナーを追加します。

var insertListener = function(event){
  if (event.animationName == "nodeInserted") {
    // This is the debug for knowing our listener worked!
    // event.target is the new node!
    console.warn("Another node has been inserted! ", event, event.target);
  }
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

タダ！ここは デビッドのデモ. 。 Chromeの拡張機能で私にとってはうまく機能します Google VoiceにFacebookの写真を追加します （content.cssおよびinjected.jsを参照）。

1年後, 、新しくて光沢があります Mutation Observers DOMレベル4から（そこのリンクに従ってください、彼らはたくさん説明します！）。ここでa Mutation Event 何千回も発射した、 MutationObserver すべての変更が含まれ、アクセス可能な場合、1回だけ発射されます。

（2017/03年現在）

  • Firefox 14+
  • IE 11
  • 角
  • オペラ15+
  • Chrome 26+（18から25の接頭辞、 window.WebKitMutationObserver)
  • Safari 6.0（接頭辞、 window.WebKitMutationObserver)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top