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

Question

我已经实现了一个突变观察器，用于监视页面加载的突变。我专门寻找加载/存在特定元素的点。我可以通过它的类名来指定它，例如 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

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

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);