主动的MutationObserver - 在节点添加到DOM之前拦截

以下是一个示例代码，演示了如何使用主动的MutationObserver在将节点添加到DOM之前进行拦截：

// 目标节点
const targetNode = document.getElementById('target');

// 创建一个MutationObserver实例
const mutationObserver = new MutationObserver((mutationsList, observer) => {
  // 遍历每个变动
  for(let mutation of mutationsList) {
    // 检查是否有节点将要被添加到DOM
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 遍历新添加的节点
      for (let node of mutation.addedNodes) {
        // 在节点被添加到DOM之前进行拦截
        console.log('节点将要被添加到DOM:', node);
        // 这里可以进行各种操作，如修改节点属性、移除节点等
      }
    }
  }
});

// 配置MutationObserver
const observerConfig = { childList: true, subtree: true };

// 开始观察目标节点
mutationObserver.observe(targetNode, observerConfig);

// 添加一个新节点到目标节点
const newNode = document.createElement('div');
newNode.textContent = '新节点';
targetNode.appendChild(newNode);

在上述代码中，我们首先创建了一个MutationObserver实例，并指定了一个回调函数来处理变动。该回调函数在每次变动发生时被调用。然后，我们配置了MutationObserver实例，指定了观察子节点变动，并设置subtree属性为true以观察目标节点的所有子节点。最后，我们调用mutationObserver.observe()方法开始观察目标节点。

在回调函数中，我们遍历每个变动，并检查是否有节点将要被添加到DOM。如果是，则遍历新添加的节点，并在节点被添加到DOM之前进行拦截操作。在示例代码中，我们仅简单地打印了要添加的节点，但您可以根据自己的需求执行任何操作，例如修改节点属性、移除节点等。

最后，我们添加一个新节点到目标节点，并观察回调函数中的输出。您将看到在节点被添加到DOM之前，拦截操作被触发并打印了要添加的节点。