Mutation Observer中addedNodes[0]为注释节点的问题排查

首先，你看到的<!---->是Ember（Twitch采用的前端框架）渲染时插入的Handlebars边界注释，这类注释是框架用来标记组件/模板渲染范围的虚拟DOM内部标记，并非实际的聊天消息元素。

而你遇到的Cannot read property 'contains' of undefined错误，核心原因是：你直接访问了mutation.addedNodes[0].classList，但这个节点可能是注释节点（nodeType为8），注释节点并没有classList属性，自然会触发报错。

下面给你几个针对性的解决思路：

1. 先过滤元素节点，再检查类名 #

处理addedNodes前，先判断节点类型是否为元素节点（nodeType === 1），跳过注释、文本这类非元素节点：

const chatline = 'chat-line';
mutation.addedNodes.forEach(node => {
  // 只处理元素节点
  if (node.nodeType === 1) {
    // 检查当前节点是否是聊天行
    if (node.classList.contains(chatline)) {
      handleChatMessage(node);
    } else {
      // 处理嵌套在新增节点内部的聊天行（比如批量插入的容器）
      const nestedChatLines = node.querySelectorAll(`.${chatline}`);
      nestedChatLines.forEach(line => handleChatMessage(line));
    }
  }
});

2. 优化MutationObserver监听配置 #

建议开启subtree: true，确保能捕捉到嵌套在子层级的聊天消息节点变化，同时避免只依赖单个节点：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 按上面的逻辑处理每个mutation的addedNodes
  });
});

// 监听目标元素的子节点变化，包括子树
observer.observe(document.querySelector('ul.chat-lines'), {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});

3. 不要依赖第一个节点 #

框架渲染时可能先插入注释节点，再插入实际元素，或是批量插入多个混合节点（注释+元素）。务必遍历所有addedNodes，逐个检查处理，不要默认第一个节点就是聊天消息。

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