如何正确实现Mutation Observer检测指定类名元素加载并避免报错？

嗨，我来帮你搞定这个问题！咱们先理清楚问题根源：你的代码直接去访问mutation.addedNodes[0]，但有时候addedNodes可能是空数组，这时候mutation.addedNodes[0]就会是undefined，再去读它的className自然就报错了。而且还有个小细节——addedNodes是个NodeList，可能包含多个节点，只检查第一个很容易漏掉目标元素哦。

下面给你几个ES6+的优雅解决方案，都是新手也能轻松上手的：

方案1：用可选链操作符（?.）简化判断（推荐） #

ES2020引入的可选链操作符可以完美解决“访问undefined属性报错”的问题，代码会变得超级简洁，而且现在主流浏览器都支持：

mutations.forEach(mutation => {
  // 遍历所有新增节点，不要只盯第一个
  for (const node of mutation.addedNodes) {
    // 用?.确保node存在时才去读className
    if (node?.className === 'foo') {
      console.log(`${node.className} loaded!`);
      // 这里直接替换成你的自定义函数就行
      // yourCustomFunction(node);
    }
  }
});

可选链?.的作用是：如果node是undefined或null，就直接返回undefined，不会继续执行后面的.className，自然就不会报错啦。

方案2：提前做存在性判断（兼容ES6基础环境） #

如果你需要兼容更老的ES6环境，用短路求值提前判断节点是否存在也很稳妥：

mutations.forEach(mutation => {
  // 先判断addedNodes有没有内容，没有就直接跳过
  if (!mutation.addedNodes || mutation.addedNodes.length === 0) return;
  
  for (const node of mutation.addedNodes) {
    // 先确保node存在，再去检查className
    if (node && node.className === 'foo') {
      console.log(`${node.className} loaded!`);
      // 调用你的自定义逻辑
    }
  }
});

额外优化：考虑目标元素是子节点的情况 #

有时候目标元素不是直接被添加的节点，而是新增节点的子元素，这时候可以结合classList和querySelector来覆盖这种场景：

mutations.forEach(mutation => {
  for (const node of mutation.addedNodes) {
    // 先判断是不是元素节点（排除文本节点这类非元素节点）
    if (node.nodeType === Node.ELEMENT_NODE) {
      // 检查节点自身是否是foo，或者子节点里有没有foo
      const targetNode = node.classList.contains('foo') ? node : node.querySelector('.foo');
      if (targetNode) {
        console.log(`${targetNode.className} loaded!`);
        // 执行你的自定义函数
      }
    }
  }
});

这样不管目标元素是直接被添加，还是藏在新增节点的子元素里，都能被检测到。

总结一下，最推荐方案1的可选链写法，简洁又安全；如果要兼容旧环境就用方案2。记得一定要遍历所有新增节点，别只看第一个，这样就不会漏掉目标元素啦~

内容的提问来源于stack exchange，提问作者Francesca