如何使用Mutation Observer监测ul中li元素的添加与移除？

核心问题分析 #

你之前的代码存在两个关键错误：

1. 目标节点选择错误：你把targetNode设为了ul下的第一个li元素，而li的添加/移除是发生在ul元素本身的childList变化，监测li元素自然无法捕捉到ul的子节点变动。
2. 配置项冗余或错误：如果只需要监测li的添加/移除，不需要开启attributes（除非你要监控ul的属性变化），subtree也不需要（除非要监控li内部的子元素变化）。

正确实现代码 #

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === 'childList') {
      // 输出添加的li节点
      if (mutation.addedNodes.length) {
        console.log('新增的li元素：', mutation.addedNodes);
      }
      // 输出移除的li节点
      if (mutation.removedNodes.length) {
        console.log('移除的li元素：', mutation.removedNodes);
      }
      debugger; // 触发断点调试
    }
  }
};

// 选择最后一个ul元素作为监测目标
const targetNode = document.getElementsByTagName('ul')[document.getElementsByTagName('ul').length - 1];

// 配置只监测子节点的添加/移除
const config = { childList: true };

// 创建并启动监测器
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// 后续如需停止监测可调用
// observer.disconnect();

额外注意事项 #

• 如果目标ul是页面加载后动态生成的，需要确保在ul元素存在后再初始化监测器。可以通过DOMContentLoaded事件等待页面加载完成，或者用MutationObserver先监测父元素，直到目标ul出现。
• 若需要同时监测ul的属性变化，再把attributes: true加回到config中；若需要监测li内部的子元素变动，再开启subtree: true。

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