Question

我们说我在HTML文件中有一段文字。使用TreeWalker我将每个非空文本节点推送到一个数组：

function getTextNodes(elem) {
    var textNodes = [];
    var nextNode;

    var treeWalker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
            return node.textContent !== "\n" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
        }
    }, false);

    var counter = 1;

    while (nextNode = treeWalker.nextNode()) {
        textNodes.push(nextNode);

        console.log("Pushed " + counter + " times.");

        counter++;
    }

    return textNodes;
}

当我尝试更改数组的内容时，比如用字符串替换每个元素＆＃34;更改＆＃34;，浏览器窗口中没有任何内容。

是否有可能通过引用存储节点，这样每次更改时，浏览器中的文本也会发生变化？

编辑：

function changeTextNodes(elem) {
    for (var i = 0; i < elem.length; i++) {
        elem[i] = "change ";
    }
}

更改数组元素的代码。

EDIT2：

$(document).ready(function() {
    changeTextNodes(getTextNodes(document.body));
});

这里是如何调用2个函数的。

Answer 1

尝试更改文本的代码会检查数组结果以收集节点。该阵列由节点组成，因此，如果要修改内容，则需要通过节点API执行此操作。目前，您的代码只修改了数组内容，这对DOM没有影响;它只是一个JavaScript数组。

要更改内容，您需要修改nodeValue属性：

for (var i = 0; i < elem.length; i++) {
    elem[i].nodeValue = "change ";
}

通过引用更改DOM元素

1 个答案: