检查变异观察者是否通过某些条件的最佳方法

Question

我已经实现了一个突变观察器来监视页面加载的突变。我专门寻找特定元素为 loaded/exists 的点。我可以通过它的类名来指定它，例如 foo。

当在变异对象列表中找到foo时，我希望调用一个函数。

目前，我有：

  mutations.forEach(mutation => {
    if (!mutation.addedNodes || mutation.addedNodes[0].className === undefined || mutation.addedNodes[0].className !== 'foo') {
      return;
    } else {
      console.log(mutation.addedNodes[0].className + ' loaded!');
    }
  });

这在技术上是可行的：当它通过三个条件时，我确实看到了控制台日志。

但是，在 mutation.addedNodes[0] 没有任何 className 数据的情况下，它会提供错误

Cannot read property 'className' of undefined

我明白为什么会这样；有时 mutations 没有 addedNodes[0] 所以确实是未定义的。我不确定的是仅当上述测试通过时才触发控制台日志的最佳方式（稍后将成为我的功能）。

我仍在学习 ES6，我希望这里有一些东西可以帮助我，但我只是在努力寻找最好的方法。

Answer 1

在页面加载期间，每个报告的节点可能是一个包含数十个或数百个嵌套节点的容器，因此您需要枚举所有 addedNodes 并检查每个节点的树。
一些报告的突变记录可能是关于删除的节点（例如，通过页面脚本）所以addedNodes将是一个空数组。
一些添加的节点将是评论或文本节点，因此您需要跳过这些节点。

const matching = [];
for (const {addedNodes} of mutations) {
  for (const node of addedNodes) {
    if (node.nodeType !== Node.ELEMENT_NODE) {
      continue;
    }
    if (node.classList.contains(className)) {
      matching.push(node);
    }
    if (node.children[0]) {
      matching.push(...node.getElementsByClassName(className));
    }
  }
}
if (matching.length) console.log(matching);

检查变异观察者是否通过某些条件的最佳方法

Best way to check if mutation observer passes certain conditions

javascript

ecmascript-6

mutation-observers