javascript - 通过引用更改 DOM 元素

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;
}

当我尝试更改数组的内容(例如用字符串“changed”替换每个元素)时，浏览器窗口中没有任何反应。

是否可以通过引用存储节点，以便每次更改节点时，浏览器中的文本也会更改？

编辑:

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

更改数组元素的代码。

编辑2:

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

以下是这两个函数的调用方式。

Answer 1

尝试更改文本的代码会检查收集节点的数组结果。该数组由节点组成，因此如果您想修改内容，则需要通过节点 API 来完成。目前，您的代码只是修改了数组内容，这不会对 DOM 产生任何影响；它只是一个 JavaScript 数组。

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

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