MutationObserver如何做到同步修改，而不是异步监听-Go服务器开发

MutationObserver 是设计用来异步监听 DOM 变化的，因此在它的回调函数中进行的操作是异步处理的，这意味着当 DOM 发生变化时，它不会立即执行你的回调，而是在下一个事件循环中调用。这种机制主要是为了提高性能，避免在更新过程中频繁地触发回调。

如果你想要在检测到变更后立即进行同步修改，有几种方法可以实现这一目标，但请注意这些方法并不是直接通过 MutationObserver 实现的，而是结合其他技术来实现需求。以下是一些常见的方法：

1. 使用 Promise

你可以使用 Promise.resolve() 在当前事件循环结束后立即进行同步操作。如下所示：

const targetNode = document.getElementById('yourTargetNodeId');

const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // 使用 Promise 来确保我们将在当前事件循环后处理
            Promise.resolve().then(() => {
                console.log('Synchronous modification based on childList changes.');
                // 执行同步修改
            });
        }
    }
});

const config = { childList: true };
observer.observe(targetNode, config);

2. 直接在观察到变化后修改 DOM

尽管这样会影响性能（因为可能会引起再次触发观察者），但你可以在 MutationObserver 的回调内直接对 DOM 进行修改。

const targetNode = document.getElementById('yourTargetNodeId');

const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('Child nodes have changed.');

            // 在这里做出同步DOM修改
            const newElement = document.createElement('div');
            newElement.textContent = "New Child Node";
            targetNode.appendChild(newElement); // 添加新的子节点
        }
    }
});

const config = { childList: true };
observer.observe(targetNode, config);