Question

由于w3c将DOM变异标记为已弃用（请参阅http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents），是否有（快速）替代方法来检测DOM中的属性修改？

Answer 1

突然事件被弃用的原因是由于巨大的性能问题。

替换为 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也将支持此功能。

Answer 2

对于已弃用的DOM *事件的一个很好的替代是animationStart和CSS动画。 David Walsh writes关于该方法。

首先，设置关键帧并将其应用于您想要收听的元素（不要忘记供应商前缀！）：

@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's demo。它适用于adds Facebook pictures to Google Voice的Chrome扩展程序（请参阅content.css和inject.js）。

Answer 3

一年后，来自DOM Level 4的新的闪亮Mutation Observers（按照那里的链接，他们解释了很多！）。如果Mutation Event被解雇了一千次，MutationObserver只会触发一次所有修改并且可以访问。

适用于（截至2017/03）：

Firefox 14 +
IE 11
边缘
Opera 15 +
Chrome 26+（18至25前缀，window.WebKitMutationObserver）
Safari 6.0（前缀为window.WebKitMutationObserver）

Answer 4

据我所知，目前还没有替代方案，因此您只能使用DOMAttrModified，这只在Firefox和Opera中得到支持。在IE中，您有onpropertychanged个活动，但无法在Chrome / Safari中获得类似的功能。根据您要完成的工作以及您要定位的浏览器，您可以执行许多操作：

将getter和setter定义为您要监控的属性
覆盖document.createAttribute，attributes.setNamedItem，...

我自己一直在研究跨浏览器解决方案，但没有取得多大成功。你应该远离变异事件，因为它们不是跨浏览器而且非常慢。他们被弃用的原因很充分。如果您想了解更多信息，请阅读：

DOM突变事件替换

4 个答案: