在没有 setInterval 的情况下检测类变化答案

【问题标题】：Detecting class change without setInterval在没有 setInterval 的情况下检测类变化
【发布时间】：2017-06-26 13:39:49
【问题描述】：

我有一个div，它以编程方式添加了其他类。如何在不使用 setInterval 实现的情况下检测类名更改？

setInterval(function() {
    var elem = document.getElementsByClassName('original')[0];
    if (elem.classList.contains("added")) { detected(); }
}, 5500);

突变观察者？

【问题讨论】：

您可以在更改课程时触发事件吗？或者您是否想检测未进行更改的客户端上的类更改？ IE。文件变了？您可以通过推送更新来做到这一点。
这是带有 attributeFilter 选项的 MutationObserver 的用途：How to react to a specific style attribute change with mutation observers? - 将 style 替换为 class。
我没有做更改...我的代码是通过 chrome 扩展注入的
Is there a JavaScript/jQuery DOM change listener?的可能重复

标签： javascript html setinterval mutation-observers

【解决方案1】：

您可以使用mutation observer。现在很widely supported。

var e = document.getElementById('test')
var observer = new MutationObserver(function (event) {
  console.log(event)   
})

observer.observe(e, {
  attributes: true, 
  attributeFilter: ['class'],
  childList: false, 
  characterData: false
})

setTimeout(function () {
  e.className = 'hello'
}, 1000)

<div id="test">
</div>

【讨论】：