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数据，则会提供错误

无法读取属性＆＃39; className＆＃39;未定义的

我明白为什么会这样;有时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);

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

1 个答案: