Node: textContent Eigenschaft

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

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

  Hinweis: Um alle Text- und CDATA-Daten für das gesamte Dokument zu erhalten, verwenden Sie document.documentElement.textContent.

• Wenn der Knoten ein CDATA-Abschnitt, ein Kommentar, eine Verarbeitungsanweisung oder ein Textknoten ist, gibt textContent den Text innerhalb des Knotens zurück oder setzt ihn, d.h. den Node.nodeValue.

• Für andere Knotentypen gibt textContent die Verkettung des textContent jedes Kindknotens zurück, mit Ausnahme von Kommentaren und Verarbeitungsanweisungen. (Dies ist ein leerer String, wenn der Knoten keine Kinder hat.)

Lassen Sie sich nicht von den Unterschieden zwischen Node.textContent und HTMLElement.innerText verwirren. Obwohl die Namen ähnlich erscheinen, gibt es wichtige Unterschiede:

• textContent erfasst den Inhalt aller Elemente, einschließlich <script>- und <style>-Elementen. Im Gegensatz dazu zeigt innerText nur "menschlich lesbare" Elemente.

• textContent gibt jedes Element im Knoten zurück. Im Gegensatz dazu ist innerText styling-bewusst und gibt den Text von "versteckten" Elementen nicht zurück.

  • Da innerText CSS-Stile berücksichtigt, löst das Lesen des Werts von innerText ein Reflow aus, um aktuelle berechnete Stile sicherzustellen. (Reflows können rechnerisch aufwendig sein und sollten daher nach Möglichkeit vermieden werden.)

Element.innerHTML gibt HTML zurück, wie der Name schon sagt. Manchmal verwenden Leute innerHTML, um Text innerhalb eines Elements zu lesen oder zu schreiben, aber textContent hat eine bessere Leistung, da der Wert nicht als HTML geparst wird.

Darüber hinaus kann die Verwendung von textContent XSS-Angriffe verhindern.

Beginnen Sie mit diesem HTML-Fragment.

<div id="divA">This is <span>some</span> text!</div>

Sie können textContent verwenden, um den Textinhalt des Elements zu erhalten:

let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'

Wenn Sie den Textinhalt des Elements setzen möchten, können Sie folgendes tun:

document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

• HTMLElement.innerText
• Element.innerHTML
• Mehr zu den Unterschieden zwischen innerText und textContent (Blogeintrag)