MutationObserver 在新节点上循环

Question

我在这里要做的是通过使它们成为“跨度”元素来突出显示一些文本节点。当新的消息/注释加载时，我也可以处理新添加的节点。但是，我发现MutationObserver不断找到新添加的节点。也许是因为dosothing创建了新节点，并且它将由MutationObserver重新发现。我如何防止这种情况发生？不确定我是否应该将MutationObserver放入EventListener中，但它似乎并不是在它之外工作。

document.addEventListener('DOMContentLoaded', function() {
    var allTextNodes = textNodesUnder(document.body);
    doSomething(allTextNodes);

    // Select the node that will be observed for mutations
    const targetNode = document.body;

    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        function scanning(el) {
            // el.style.visibility = "hidden";
            var newTextNodes = textNodesUnder(el);
            doSomething(newTextNodes);
        }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config); 
    //observer.disconnect(); //will not work if disconnect here
});

function doSomething(node) {
    var newItem = document.createElement("SPAN");
    newItem.style.backgroundColor = "red";
    var textnode = document.createTextNode(node.textContent);
    newItem.appendChild(textnode);
    node.replaceWith(newItem); 
}

Answer 1

每次更改节点的内容时，您的 MutationObserver 回调都会被调用，包括您在回调本身中执行此操作的时间。回调中发生更改，请调用 observer.disconnect()，然后在进行更改后使用 observe 重新连接：

const callback = function(mutationsList, observer) {
    function scanning(el) {
        observer.disconnect();
        // el.style.visibility = "hidden";
        var newTextNodes = textNodesUnder(el);
        doSomething(newTextNodes);
        observer.observe(targetNode, config);
    }
};