JavaScript 如何监听一个元素的变化

1. 使用 MutationObserver（推荐）

MutationObserver 是专门用来监听 DOM 变化的 API，可以监听以下变化：

• 子节点的增加或删除
• 属性变化
• 文本内容变化

// 获取要监听的元素
const targetNode = document.getElementById("myElement");

// 配置监听选项
const config: MutationObserverInit = {
  childList: true, // 监听子节点变化
  attributes: true, // 监听属性变化
  characterData: true, // 监听文本变化
  subtree: true, // 监听所有后代节点
};

// 创建观察者实例
const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("子节点变化:", mutation);
    } else if (mutation.type === "attributes") {
      console.log("属性变化:", mutation.attributeName);
    } else if (mutation.type === "characterData") {
      console.log("文本变化:", mutation.target.textContent);
    }
  }
});

// 开始监听
observer.observe(targetNode, config);

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

✅ 优点：

• 灵活，可监听属性、子节点、文本等变化
• 支持监听整个子树（subtree）

2. 使用事件监听（有限场景）

某些属性的变化可以通过事件监听：
输入框内容变化

const input = document.querySelector("input");
input?.addEventListener("input", (e) => {
  console.log("输入变化:", (e.target as HTMLInputElement).value);
});

表单变化

const select = document.querySelector("select");
select?.addEventListener("change", (e) => {
  console.log("选择变化:", (e.target as HTMLSelectElement).value);
});

⚠️注意：事件监听只能监听特定的事件，无法监听任意 DOM 改变。