Node: textContent-Eigenschaft

Wert

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

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

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

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

• Für andere Knotentypen gibt textContent die Verkettung der textContent jedes Kindknotens zurück, ausgenommen Kommentare und Verarbeitungsanweisungen. (Dies ist eine leere Zeichenfolge, 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 "für Menschen lesbare" Elemente.
• textContent gibt jedes Element im Knoten zurück. Im Gegensatz dazu berücksichtigt innerText das Styling und gibt den Text von "versteckten" Elementen nicht zurück.
  • Da innerText jedoch CSS-Stile berücksichtigt, löst das Lesen des innerText-Wertes ein Reflow aus, um sicherzustellen, dass die berechneten Stile auf dem neuesten Stand sind. (Reflows können rechenintensiv sein und sollten daher möglichst vermieden werden.)

Unterschiede zu innerHTML

Element.innerHTML erhält oder setzt HTML, wie der Name schon sagt. Wir raten davon ab, innerHTML zu verwenden, um Text innerhalb eines Elements zu erhalten oder zu setzen, da es mit rohem HTML anstelle von Klartext arbeitet und anfällig für XSS-Angriffe sein kann. Selbst wenn Sie sicher sind, dass der Text niemals HTML-Syntax enthält, ist es immer noch weniger semantisch und langsamer, da der HTML-Parser aufgerufen werden muss.

Beispiele

Beginnen Sie mit diesem HTML-Fragmente.

<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 einstellen 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>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLElement.innerText
• Element.innerHTML