javascript - 从 MutationObserver 的突变编辑 DOM 中的元素

Question

好吧，对 js 还很陌生，尝试随机的东西(自定义 chrome 扩展)，在这里我遇到了来自 MutationObserver 的突变问题。

所以这是交易。获取突变本身没有问题，但我要做的是从突变中获取元素并对其进行编辑，以便我可以在页面上看到更改。我所说的更改只是指编辑这些元素中的文本。

这基本上是我想要实现的目标:

var observer = new MutationObserver(function (mutations) {
    for (mutation in mutations) {
        if(mutation.addedNodes != null && mutation.addedNodes.length > 0)
            mutation.addednodes.innerText = "my text";
    }
});

observer.observe(document, {childList: true, subtree: true});

这显然是行不通的，因为我认为这些突变与 DOM... 或其他东西无关。我预计这是有意为之，以防止递归调用。

否则，如果有一种方法可以在用户交互期间将新添加的元素的文本编辑到页面，那也可以回答这个问题。

如果这个问题在某个地方得到了回答，我很抱歉，但我向上帝发誓我找不到这个问题的答案。

Answer 1

所以根据 wOxxOm 在评论中的建议，我设法让这样的东西起作用:

function onMutation(mutations) {
    for (var i = 0, len = mutations.length; i < len; i++) {
        var added = mutations[i].addedNodes;
        for (var j = 0, lenAdded = added.length; j < lenAdded; j++) {
            var node = added[j];

            if (!node.parentNode || !node.textContent.match(pattern)) continue;

            editNode(node);
        }
    }
}

function editNode(node) {
    var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
    var textNode;

    while (textNode = treeWalker.nextNode()) {
        textNode.nodeValue = textNode.nodeValue.replace(pattern, '');
    }
}