MutationObservers只听本地变化吗？

Question

我想使用MutationObservers来侦听具有（step）类的元素的特定类添加（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);

};

当我逐步执行页面上的步骤时，我希望这会通过mutation.id推送一个唯一的事件-但是，事实并非如此。相反，这样做确实会产生我所期望的事件：

setTimeout(function(){

target[0].classList.add('step_active');

}, 1000);

任何人都可以对我在这里遗失/误解的内容有所了解吗？

Answer 1

正如wOxxOm所指出的，这是由于我观察到的元素被替换而不是被操纵而造成的，从而破坏了我的变异观察者。可以通过人为地添加一个类并观察它在进行过程中是否被保留来测试这种情况。或者在DOM中将MutationObserver设置为更高的级别，并记录mutationRecord。