005.MutationObserver

// 获取目标节点
const targetNode = document.querySelector('#targetElement');
 
// 创建观察器实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    // 根据变化类型处理
    switch (mutation.type) {
      case 'childList':
        console.log('子节点变化', mutation.addedNodes, mutation.removedNodes);
        break;
      case 'attributes':
        console.log(`属性变化: ${mutation.attributeName} -> ${targetNode.getAttribute(mutation.attributeName)}`);
        break;
      case 'characterData':
        console.log('文本内容变化', mutation.target.textContent);
        break;
    }
  }
});
 
// 配置观察选项（要监听的变更类型）
const config = {
  attributes: true,         // 监听属性变化
  attributeOldValue: true,  // 记录旧值
  childList: true,          // 监听子节点增删
  subtree: true,            // 监听所有后代节点
  characterData: true       // 监听文本内容变化
};
 
// 开始观察节点
observer.observe(targetNode, config);
 
// 停止观察
// observer.disconnect();