MutationObservers 只监听本地变化吗？

Question

我想使用 MutationObservers 来监听特定的 class 添加 (step_active) 到 class 的元素，但这似乎不是完全符合预期。

如果我直接通过 element.classList.add() 添加 class，我的事件就会触发。然而，当网站发布这些 class 更改时 - 我的事件未被触发。

这是为什么？

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

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);

任何人都可以阐明我在这里 missing/have 被误解的地方吗？

Answer 1

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

这个场景可以通过人为添加一个class和观察它是否随着你的进步而保留。
或者在 DOM 中将 MutationObserver 设置为更高级别并进行日志记录突变记录。

MutationObservers 只监听本地变化吗？

Do MutationObservers Only Listen To Local Changes?

javascript

mutation-observers