MutationObservers只收听本地更改吗？

Question

我想使用MutationObservers来监听具有类（步骤）的元素的特定类添加（step_active），但是这似乎没有像预期的那样激发。

如果我通过element.classList.add（）直接添加类，我的事件将触发。但是，当站点自己发出这些类更改时 - 我的事件不会被触发。

为什么是这样？

这是我当前代码的一般格式：

var target = document.querySelectorAll(".step");
for (var i = 0; i < target.length; i++) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var trigger = mutation.target;
            if(trigger.classList.contains('step_active')){
              window.dataLayer.push({
                event: 'Step: ' + mutation.id
              });
            }
        })
    });
    var config = {attributes: true, childList: true, subtree: true};
    observer.observe(target[i], config);
};

我期望在推进页面上的步骤时用mut.id推送一个独特的事件 - 但事实并非如此。相反，做这样的事情会产生我期待的事件：

setTimeout(function(){
target[0].classList.add('step_active');
}, 1000);

任何人都可以了解我在这里错过/误解的内容吗？

Answer 1

正如wOxxOm所指出的，这是由于我观察到的元素被替换而不是被操纵，从而破坏了我的变异观察者。

1. 可以通过人工添加一个类来测试这种情况，并观察它是否随着您的进展而保留。
2. 或者将MutationObserver设置为DOM中的更高级别并记录mutationRecord。