通過引用更改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 ";
}