Node: textContent-Eigenschaft

Wert

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, ausgenommen Kommentare und Verarbeitungsanweisungen. (Dies ist ein leerer String, wenn der Knoten keine Kinder hat.)

Unterschiede zu innerText

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

• textContent erhält 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 nimmt innerText Rücksicht auf das Styling 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 sicherzustellen, dass die berechneten Stile auf dem neuesten Stand sind. (Reflows können rechnerisch aufwändig sein und sollten daher nach Möglichkeit vermieden werden.)

Unterschiede zu innerHTML

Element.innerHTML erhält oder setzt HTML, wie der Name andeutet. Wir raten davon ab, innerHTML zu verwenden, um Text in einem Element zu erhalten oder zu setzen, da es mit rohem HTML statt mit reinem Text arbeitet und anfällig für XSS-Attacken sein kann. Selbst wenn Sie sicher sind, dass der Text niemals HTML-Syntax enthält, ist es dennoch weniger semantisch und langsamer, da der HTML-Parser aufgerufen werden muss.

Beispiele

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 festlegen möchten, können Sie dies tun:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLScriptElement.textContent und HTMLScriptElement.text
• HTMLElement.innerText
• Element.innerHTML