it-swarm.com.de

Was ist ein Textknoten, dessen Verwendung? //document.createTextNode ()

Also habe ich langsam einen Großteil meines normalen jQuery-Codes durch natives Javascript ersetzt und bin auf die document.createTextNode() und verwandte MDN-Dokumentation gestoßen. Nach dem Lesen bin ich etwas verwirrt, was ein Textknoten ist.

Ich verstehe, dass es verwendet werden kann, um Text in div einzufügen, aber ich bin mir sicher, dass es ein bisschen mehr beinhaltet als nur "Wörter in Elemente einfügen". Betrachtet man dies Es scheint, dass ein Textknoten auch auf den Text von Attributen verweisen kann.

Kann irgendjemand eine genauere Definition dessen geben, was ein Textknoten ist und wofür er verwendet wird? Gibt es praktische Verwendungen für dieses andere als grundlegende Dinge wie dieses?

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);
49
AlbertEngelB

Der gesamte anzeigbare HTML-Text auf einer Seite (außer Text in Formularelementen oder benutzerdefinierten eingebetteten Objekten) befindet sich in Textknoten. Die Seite besteht aus einer Reihe verschiedener Knotentypen (eine Liste der verschiedenen Knotentypen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Node). nodeType ), von denen einige untergeordnete Knoten haben können und einige nicht. Ein div ist beispielsweise ein ELEMENT-Knoten, der untergeordnete Knoten enthalten kann. Diese untergeordneten Knoten können andere ELEMENT-Knoten oder TEXT-Knoten, COMMENT-Knoten oder andere Knotentypen sein.

Wenn Sie die Eigenschaft .innerHTML Eines Elementknotens festlegen, werden die entsprechenden Knoten erstellt und zu untergeordneten Knoten des Elements gemacht, für das Sie die Eigenschaft innerHTML festgelegt haben. Befindet sich in dem von Ihnen festgelegten innerHTML Text, werden Textknoten erstellt, die diesen enthalten.

DOCUMENT_NODE, ELEMENT_NODE Und TEXT_NODE Sind die am häufigsten verwendeten Knotentypen und befinden sich auf jeder Seite mit Text.

In Ihrem Codebeispiel:

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

Dadurch wird ein Textknoten erstellt und in das von Ihnen erstellte div eingefügt. Es erzeugt die gleiche DOM-Struktur wie diese:

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

Im letzteren Fall legt das System den Textknoten für Sie an.


Bei der einfachen Javascript-Programmierung (jQuery schützt Entwickler vor Knoten, die nicht vom Typ ELEMENT_NODE Sind), werden Sie jedes Mal auf Textknoten stoßen, wenn Sie die untergeordneten Knoten eines Elements mit Text durchlaufen. Sie müssen das .nodeType Jedes untergeordneten Elements überprüfen, um festzustellen, ob es sich um ein anderes Element, einen Textknoten oder einen anderen Knotentyp handelt.


Im Allgemeinen gibt es nicht viele Gründe, Textknoten direkt zu manipulieren, da Sie die übergeordnete Eigenschaft .innerHTML Häufig einfacher verwenden können. Um Ihnen eine Vorstellung zu geben, hier einige Gründe, warum Sie sich direkt mit Textknoten befassen sollten:

  1. Sie möchten Text ändern, ohne die umgebenden Elemente zu beeinflussen. .innerHTML Erstellt alle neuen Elemente für die betroffenen Elemente, wodurch alle Event-Handler, die möglicherweise für sie festgelegt wurden, beendet werden. Wenn Sie jedoch .nodeValue Für einen Textknoten festlegen, werden keine Elemente neu erstellt.

  2. Wenn Sie nur den Text in einem Dokument ohne das resultierende HTML-Markup suchen möchten und genau wissen möchten, wo sich die einzelnen Textteile in der DOM-Hieararchie befinden, können Sie einfach nach allen Textknoten suchen. Wenn Sie beispielsweise eine Textsuche im Dokument durchführen und dann gefundenen Text markieren, würden Sie wahrscheinlich direkt nach Textknoten suchen.

  3. Sie möchten Text ohne Sicherheitsrisiko anzeigen, da er andere Markups enthält, die der Browser bei Verwendung von .innerHTML Analysieren und interpretieren würde. Sie erstellen also einen Textknoten und legen den Wert seines Texts fest, und der Browser fügt keinen HTML-Code ein. Moderne Browser können auch die Eigenschaft .textContent Eines Elements anstelle von .innerHTML Verwenden, um dieses Problem zu lösen.

59
jfriend00