js 监听 dom元素属性变化

可以使用 MutationObserver API 来监听 DOM 元素的属性变化。该 API 允许你观察对 DOM 树所做的更改，并且在这些更改发生时做出响应。

以下是一个使用 MutationObserver 监听 DOM 元素属性变化的示例代码：

// 选取要监听的元素
const targetNode = document.getElementById('my-element');

// 创建一个观察器实例并定义回调函数
const observer = new MutationObserver((mutationsList, observer) => {
  // 遍历每个发生变化的属性
  for (const mutation of mutationsList) {
    // 如果属性名为 "class"，则输出新的 class 值
    if (mutation.attributeName === 'class') {
      console.log(`Class attribute changed to "${mutation.target.className}"`);
    }
  }
});

// 选项配置
const config = { attributes: true };

// 传入目标节点和观察选项
observer.observe(targetNode, config);

在上面的示例中，我们选取了一个具有 ID 为 "my-element" 的元素，并使用 MutationObserver 创建了一个观察器实例。然后，我们定义了一个回调函数来处理每个发生变化的属性。最后，我们将目标节点和观察选项传递给观察器实例的 observe() 方法，以开始监听属性变化。

需要注意的是，除了属性变化之外，MutationObserver 还可以监听其他 DOM 更改，例如子节点的添加或删除。如果你只需要监听属性变化，可以将选项配置中的 attributes 属性设置为 true，同时将其他属性设置为 false。