21

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

4

4 に答える 4

31

ミューテーション イベントが廃止された理由は、パフォーマンスに大きな問題があったためです。

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

于 2012-06-19T17:16:07.873 に答える
13

非推奨のDOM*イベントの優れた代替品は、animationStartCSSアニメーションと組み合わせることです。DavidWalshがその方法について書いています。

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

@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のデモです。Facebookの写真をGoogleVoiceに追加するChrome拡張機能でうまく機能します（content.cssとinjected.jsを参照）。

于 2012-12-12T08:07:38.917 に答える
12

1 年後、DOM レベル 4 からの新しくて輝かしいMutation Observersものがあります (リンクをたどってください。たくさんの説明があります!)。Mutation Event1000 回発射された場合、MutationObserverすべての変更が含まれており、アクセスできる状態で 1 回だけ発射されます。

対象 (2017/03現在):

  • Firefox 14+
  • IE11
  • 角
  • オペラ 15+
  • Chrome 26+ (18 ～ 25 の前にwindow.WebKitMutationObserver)
  • Safari 6.0 (接頭辞、window.WebKitMutationObserver)
于 2012-06-25T23:31:27.717 に答える
7

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

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

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

于 2011-04-05T15:42:29.683 に答える