JS监听DOM变化的几种方式

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log('变动类型:', mutation.type);
    if (mutation.type === 'attributes') {
      console.log('修改的属性:', mutation.attributeName);
      console.log('旧值:', mutation.oldValue);
      console.log('新值:', element.getAttribute(mutation.attributeName));
    }
  });
});

// 开始监听某个元素
const targetElement = document.getElementById('my-element');
observer.observe(targetElement, {
  attributes: true,
  attributeOldValue: true,
  attributeFilter: ['class', 'data-status'],
  childList: true,
  subtree: true,
  characterData: true,
  characterDataOldValue: true
});

const textNodeTarget = document.querySelector('#status');

const textObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'characterData') {
      console.log('原文本:', mutation.oldValue);
      console.log('现文本:', mutation.target.nodeValue);
    }
  });
});

textObserver.observe(textNodeTarget, {
  characterData: true,
  characterDataOldValue: true
});

// 停止监听
observer.disconnect();

// 可选：清理前处理剩余变更
const leftoverMutations = observer.takeRecords();
console.log('断开前未处理的变更:', leftoverMutations);