Chrome MutationObserver 未在某些元素上激活

Question

我遇到了 MutationObserver 在某些元素上不起作用的问题。

我提取了一个'simple'例子：

在chrome中加载news.google.com并打开调试器控制台

粘贴此代码：

for (elem of document.getElementsByTagName('*')) elem.style.backgroundColor = 'red';

let observer;

function mutationObserve() {
    observer.observe(document, { childList: true, subtree:true, attributes: true });
}

function mutationDisconnect() {
    observer.disconnect();
}

function handleMutation(mutations) {
    mutationDisconnect();
    mutations.forEach(mutation => {
        for (elem of mutation.addedNodes) {
            elem.style.backgroundColor = 'green';
            for (innerElem of elem.getElementsByTagName('*')) {
                innerElem.style.backgroundColor = 'green';
            }
        }
    });
    mutationObserve();
}

observer = new MutationObserver(handleMutation);
mutationObserve();

它的作用是：

首先将所有元素背景改为红色
设置突变观察器将所有修改元素的背景更改为绿色

现在改变标题（即点击业务）

发生的事情是你得到一些红色的元素（未修改）
和一些绿色元素（由 MutationObserver 修改和更改）
有些是白色的，因为它们的背景在类中定义（即 post 正文）

但是顶部的菜单条（包含headlines/local/etc）也变成了白色。

如果我检查我发现它现在有

<div class="gb_wd gb_Wd" style="background-color: rgb(255, 255, 255);">

所以它改变了它的风格（background-color 从红色变成了白色）但是突变观察者没有 'catched'。

这是一个错误吗？还是我做错了什么？我怎样才能让 MutationObserver 观察到这些变化？

谢谢！

Answer 1

属性突变，例如style，不要添加节点所以需要重新着色mutation.target:

for (const mutation of mutations) {
  if (mutation.type == 'attributes')
    mutation.target.style.backgroundColor = 'yellow';
  for (const elem of mutation.addedNodes) {
    if (elem.nodeType != Node.ELEMENT_NODE)
      continue;
    elem.style.backgroundColor = 'green';
    for (const innerElem of elem.getElementsByTagName('*')) {
      innerElem.style.backgroundColor = 'green';
    }
  }
}

Chrome MutationObserver 未在某些元素上激活

Chrome MutationObserver not activated on some elements

javascript

google-chrome

mutation-observers