Node: textContent-Eigenschaft

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Hinweis:>textContent und HTMLElement.innerText werden leicht verwechselt, aber die beiden Eigenschaften sind in wichtigen Punkten unterschiedlich.

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 den gesamten Text und die 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 der textContent jedes Kindknotens, ausgenommen Kommentare und Verarbeitungsanweisungen, zurück. (Dies ist ein leerer String, wenn der Knoten keine Kinder hat.)

Warnung: Das Setzen von textContent auf einen Knoten entfernt alle Kinder des Knotens und ersetzt sie durch einen einzigen Textknoten mit dem angegebenen String-Wert.

Unterschiede zu innerText

Verwechseln Sie nicht die Unterschiede zwischen Node.textContent und HTMLElement.innerText. Obwohl die Namen ähnlich scheinen, gibt es wichtige Unterschiede:

  • textContent erfasst den Inhalt aller Elemente, einschließlich <script>- und <style>-Elementen. Im Gegensatz dazu zeigt innerText nur "lesbare" Elemente an.
  • 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 außerdem CSS-Stile berücksichtigt, löst das Lesen des Werts von innerText ein Reflow aus, um sicherzustellen, dass die berechneten Stile aktuell sind. (Reflows können rechnerisch aufwendig sein und sollten daher vermieden werden, wenn möglich.)

Unterschiede zu innerHTML

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

Zudem kann die Verwendung von textContent XSS-Angriffe verhindern.

Beispiele

Starten Sie mit diesem HTML-Fragment.

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

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

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

Wenn Sie den Textinhalt des Elements lieber festlegen möchten, können Sie dies tun:

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

Spezifikationen

Specification
DOM
# dom-node-textcontent

Browser-Kompatibilität

Siehe auch