web-dev-qa-db-ja.com

DOMミューテーションイベントの置換

DOMミューテーションはw3cによって非推奨としてマークされているので（ http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents を参照）、（高速）DOMで属性の変更を検出する別の方法は？

htmleventsdomdom3mutation-events
21
Franck Freiburger

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

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

私は自分でクロスブラウザソリューションに取り組んできましたが、あまり成功していません。ミューテーションイベントはクロスブラウザではなく、非常に遅いため、一緒にミューテーションイベントを回避する必要があります。それらが非推奨になるのには十分な理由があります。詳細を知りたい場合は、こちらをお読みください。

7
Renaat De Muynck

ミューテーションイベントが非推奨になった理由は、パフォーマンスの大きな問題が原因でした。

置き換えはMutation Observers、見てください http://updates.html5rocks.com/2012/02/Detect-DOM-changes- with-Mutation-Observers および https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

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

使用例：

    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のナイトリービルドでサポートされています。Firefox14もこの機能をサポートします。

31
ama2

非推奨のDOM *イベントの優れた代替品は、CSSアニメーションと組み合わせたanimationStartです。 David Walshが書いています メソッドについて。

まず、キーフレームを設定し、リッスンしたい要素に適用します（ベンダープレフィックスを忘れないでください！）：

@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

タダ！これが Davidのデモ です。 Chrome拡張機能 Facebookの写真をGoogle Voiceに追加 （content.cssとinjected.jsを参照）でうまく機能します。

13
Andres Riofrio

1年後、新しくて光沢のある Mutation Observers DOMレベル4から（そこにあるリンクをたどると、多くのことが説明されます！）。ここでMutation Event 1000回発生し、MutationObserverは、すべての変更が含まれ、アクセス可能な状態で1回だけ発生します。

対象（2017/03現在）：

  • Firefox14以降
  • IE 11
  • 縁
  • Opera 15+
  • Chrome 26+（18から25のプレフィックス、window.WebKitMutationObserver）
  • Safari 6.0（プレフィックス付き、window.WebKitMutationObserver）
12
Petr Janeček