Ändern von DOM-Elementen durch Referenz

Question

Angenommen, ich habe einen Textabschnitt in einer HTML-Datei. Mit TreeWalker schob ich jedes nicht leeren Textknoten auf ein Array:

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

Wenn ich versuche, den Inhalt des Arrays zu ändern, wie jedes Element mit der Zeichenfolge „verändert“ zu ersetzen, passiert nichts im Browser-Fenstern.

Ist es irgendwie möglich, die Knoten als Referenz zu speichern, so dass sich bei jeder Änderung der Text im Browser ändert?

EDIT:

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

Der Code, der die Array-Elemente ändert.

EDIT2:

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

Hier ist, wie die 2 Funktionen aufgerufen werden.

Answer 1

Ihr Code, der versucht, den Text zu ändern, untersucht das Array-Ergebnis beim Sammeln der Knoten. Dieses Array besteht aus Knoten. Wenn Sie also den Inhalt ändern möchten, müssen Sie dies über die Knoten-API tun. Derzeit ändert Ihr Code nur den Array-Inhalt, der keine Auswirkungen auf das DOM hat. es ist nur ein JavaScript-Array.

Um den Inhalt zu ändern, Sie würden die nodeValue Eigenschaft ändern:

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