Question

我遇到一个问题，MutationObserver在某些元素上不起作用。

我提取了一个简单的＆＃39;例如：

在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修改和更改）
还有一些是白色的，因为它们具有在类中定义的背景（即帖子体）

但顶部的菜单条（包含标题/本地/等）也变为白色。

如果我检查我现在看到了

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

所以它改变了它的风格（背景颜色从红色变为白色）但是没有被捕捉到＃39;由变异观察者。

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

THX！

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未在某些元素上激活

1 个答案: