根据MutationObserver

时间:2018-07-23 13:36:40

标签: javascript mutation-observers

好吧,对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 ...无关。我相当期待这样做是为了防止递归调用。

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

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

1 个答案:

答案 0 :(得分: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, '');
    }
}