JavaScript 监听元素变动：使用 MutationObserver

在 JavaScript 中，可以使用 'MutationObserver' 来监听元素的变动。

首先，创建一个 'MutationObserver' 实例，通过调用其 'observe()' 方法来监听指定元素的变动。'observe()' 方法接受两个参数：要监听的目标元素和一个配置对象，用于指定要监听的变动类型。

例如，要监听 id 为 'target' 的元素的子节点变动，可以使用以下代码：

// 目标元素
const target = document.getElementById('target');

// 创建一个 MutationObserver 实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type); // 打印变动类型
  });
});

// 配置对象
const config = { childList: true };

// 开始监听变动
observ.observe(target, config);

在上述代码中，通过调用 'observe()' 方法来监听目标元素的子节点变动。配置对象中的 'childList' 属性指定了要监听的变动类型为子节点的变动。

当目标元素的子节点发生变动时，'MutationObserver' 实例的回调函数会被调用，并传入一个 'MutationRecord' 对象的数组。每个 'MutationRecord' 对象包含了变动的详细信息，例如变动类型、变动的目标节点等。

在回调函数中，可以根据 'MutationRecord' 对象的 'type' 属性来判断具体的变动类型。常见的变动类型包括 'childList'（子节点的变动）、'attributes'（属性的变动）和 'characterData'（文本节点的内容变动）。

需要注意的是，'MutationObserver' 只能监听元素的变动，不能监听 CSS 样式的变动。如果需要监听 CSS 样式的变动，可以使用 'CSSStyleSheet' 对象的 'onpropertychange' 事件。