javascript - MutationObserver 没有得到所有的更新

Question

我在 chrome 扩展中有以下代码:

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
    if (mutation.type === "childList") {
       Log.Debug("mutation: Childlist:"+mutation.addedNodes.length);
        forEach.call(mutation.addedNodes, function (addedNode) {
            if (addedNode.classList !== undefined) {
                if (addedNode.classList.contains('nja')) {
                    Log.Debug("DOM PD:"+addedNode.classList);
                    DoFancyStuff(addedNode);
                }
            }
       }
 }});

这发生在动态添加内容的网站上。 (谷歌+)。如果用户向下滚动并添加一些新元素，一切都会完美无缺。

如果用户离开浏览器一段时间并单击导致显示大量新元素的按钮，则 MutationObserver 似乎会遗漏一些节点。我可以在调试窗口中验证此行为。 (一些添加的带有“nja”类的 div 被写入控制台，有些则没有)

所以对我来说，这似乎只有在一次添加的 div 不多的情况下才有效。是否有任何配置可以更改此行为？

(因为这是一个 chrome 扩展，我只需要一个 chrome 的解决方案，而不是任何其他浏览器)

Answer 1

如果具有 nja 类的 div 是添加的元素的子元素，则此变异观察器将看不到它。

例如，使用突变观察器在页面上执行以下操作:

var added = document.createElement('section');
added.innerHTML = '<div class="nja">nested</div>';
document.body.appendChild(added);

您应该看到观察者将针对 section 元素运行，但不会针对 div.nja 运行。

也许您只需要对每个添加的元素执行一个querySelectorAll。