通过引用更改 DOM 元素答案

【问题标题】：Changing DOM elements by reference通过引用更改 DOM 元素
【发布时间】：2017-05-03 18:20:32
【问题描述】：

假设我在 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 ";
    }
}

更改数组元素的代码。

EDIT2：

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

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

【问题讨论】：

尝试更改节点的代码在哪里？如果那是不起作用的代码，那么应该将其发布在这里，否则没有人可以提供帮助。此外，您的循环不只是发布文本节点，因为 .textContent 也会从元素节点返回内容。
@Pointy: .textContent 只是用来过滤掉只包含“\n”的TextNodes。主过滤器是之前的参数。
哦，对了，我明白了；对此感到抱歉。
@Pointy No biggie

标签： javascript html dom dynamic reference

【解决方案1】：

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

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

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

【讨论】：