MutationObserver检测元素的外观并更改元素的值

Question

我打算使用MutationObserver来观察元素的外观和元素值的变化，但是老实说，我不确定应该如何实现。

MO的目标将是div.player-bar，而我要完成的工作是检测何时el-badge__content出现在页面中以及何时el-badge__content元素值被更改（例如，{ {1}}将更改为1）。

请注意，2与创建el-badge__content的同时出现，并且页面上多次出现div.new-bar，这就是为什么我需要听{{ 1}}。

这可能吗？到目前为止，我在想这样的事情：

div.new-bar

谢谢。

Answer 1

mutation是一个MutationRecord object，其中包含您在代码中遗漏的类似数组的addedNodes NodeList集合，但它不是数组，因此没有forEach。您可以在现代浏览器中使用ES6枚举，也可以在普通的for循环中使用它或调用forEach.call。

对于这种特殊情况，一种更简单的解决方案是使用getElementsByClassName返回的动态更新的实时集合，因为它超快，通常比枚举所有突变记录及其内部所有添加节点要快得多。

const target = document.querySelector('.player-bar');
// this is a live collection - when the node is added the [0] element will be defined
const badges = target.getElementsByClassName('el-badge__content');
let prevBadge, prevBadgeText;

const mo = new MutationObserver(() => {
  const badge = badges[0];
  if (badge && (
      //  the element was added/replaced entirely
      badge !== prevBadge ||
      // or just its internal text node
      badge.textContent !== prevBadgeText
  )) {
    prevBadge = badge;
    prevBadgeText = badge.textContent;
    doSomething();
  }
});
mo.observe(target, {subtree: true, childList: true});

function doSomething() {
  const badge = badges[0];
  console.log(badge, badge.textContent);
}

如您所见，第二个观察者被添加到了徽章元素本身上。删除badge元素后，垃圾收集器将自动删除观察者。