Node.textContent

Die Eigenschaft textContent des Node-Interfaces repräsentiert den Textinhalt des Nodes und seiner Nachkommen.

Hinweis: textContent und HTMLElement.innerText werden leicht verwechselt, die beiden Eigenschaften unterscheiden sich jedoch in wichtigen Punkten.

Wert

Ein String oder null. Der Wert hängt von der Situation ab:

• Wenn der Node ein document oder ein doctype ist, gibt textContent null zurück.

  Hinweis: Um den gesamten Text und die CDATA-Daten des kompletten Dokuments zu erhalten, verwende document.documentElement.textContent.

• Wenn der Node ein CDATA-Abschnitt, ein Kommentar, eine Processing Instruction oder ein Text-Node ist, gibt textContent den Text innerhalb des Nodes zurück bzw. setzt ihn, d.h. den Node.nodeValue.
• Für andere Node-Typen gibt textContent die Verkettung des textContent jedes Kind-Nodes zurück, ausgenommen Kommentare und Processing Instructions. (Dies ist ein leerer String, wenn der Node keine Kinder hat.)

Warnung: Das Setzen von textContent auf einem Node entfernt alle Kinder des Nodes und ersetzt sie durch einen einzigen Text-Node mit dem angegebenen String-Wert.

Unterschiede zu innerText

Verwechsle nicht die Unterschiede zwischen Node.textContent und HTMLElement.innerText. Obwohl die Namen ähnlich erscheinen, gibt es wichtige Unterschiede:

• textContent liefert den Inhalt aller Elemente, einschließlich <script>- und <style>-Elementen. Im Gegensatz dazu zeigt innerText nur "menschenlesbare" Elemente.
• textContent gibt jedes Element im Node zurück. Im Gegensatz dazu berücksichtigt innerText das Styling und gibt keinen Text von "versteckten" Elementen zurück.
  • Da innerText zudem CSS-Styles berücksichtigt, löst das Lesen des Wertes von innerText einen Reflow aus, um aktuelle berechnete Styles sicherzustellen. (Reflows können rechenintensiv sein und sollten daher möglichst vermieden werden.)

Unterschiede zu innerHTML

Element.innerHTML liest oder setzt HTML, wie der Name andeutet. Wir raten davon ab, innerHTML zum Lesen oder Setzen von Text innerhalb eines Elements zu verwenden, da es mit rohem HTML statt mit reinem Text arbeitet und anfällig für XSS-Angriffe sein kann. Selbst wenn du sicher bist, dass der Text niemals HTML-Syntax enthält, ist es dennoch weniger semantisch und langsamer, da der HTML-Parser aufgerufen werden muss.