HTML DOM Element textContent Attribut

Definition und Verwendung

textContent Das Attribut stellt oder gibt den Textinhalt eines bestimmten Knotens sowie den Text seiner gesamten Nachkommen bereit.

Wenn Sie textContent Das Attribut löscht alle Unter knoten und wird durch einen einzigen Textknoten mit der angegebenen Zeichenkette ersetzt.

Hinweis:Manchmal kann dieses Attribut verwendet werden, um das nodeValue-Attribut zu ersetzen, aber denken Sie daran, dass dieses Attribut gleichzeitig den Text aller Unter knoten zurückgibt.

Weitere Informationen:

innerText-Attribut

innerHTML-Attribut

Beispiel

Beispiel 1

Rückgabe des Textinhalts des Elements:

let text = element.textContent;

Probieren Sie es selbst aus

Beispiel 2

Ändern Sie den Textinhalt des <p>-Elements mit id="demo":

element.textContent = "I have changed!";

Probieren Sie es selbst aus

Beispiel 3

Erhalten Sie den gesamten Textinhalt des <ul>-Elements mit id="myList":

let text = document.getElementById("myList").textContent;

Probieren Sie es selbst aus

Syntax

Geben Sie den Textinhalt eines Knotens zurück:

element.textContent

oder

node.textContent

Setzen Sie den Textinhalt eines Knotens:

element.textContent = text
node.textContent = text

Attributswert

Wert Beschreibung
text Textinhalt eines Elements oder Knotens.

Rückgabewert

Typ Beschreibung
Zeichenfolge

Der Textinhalt des Elements und aller ihrer Nachkommen.

Wenn das Element document, document type oder notation ist, wird null zurückgegeben.

Unterschied zwischen innerHTML, innerText und textContent

Die innerText-Eigenschaft gibt zurück:

Gibt nur den Textinhalt des Elements und aller ihrer Nachkommen zurück, ohne versteckten CSS-Text, Abstände und Tags, außer für <script> und <style>-Elemente.

Die innerHTML-Eigenschaft gibt zurück:

Der Textinhalt des Elements, einschließlich aller Leerzeichen und innerer HTML-Tags.

Die textContent-Eigenschaft gibt zurück:

Der Textinhalt aller Elemente und ihrer Nachkommen, einschließlich Leerzeichen und verstecktem CSS-Text, aber ohne Tags.

HTML-Beispiel

<p id="myP">   Dieses Element hat zusätzlichen Abstand und enthält <span>ein span-Element</span>.</p>

JavaScript-Beispiel

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Probieren Sie es selbst aus

Im obigen Beispiel:

Die innerText-Eigenschaft gibt zurück:

Dieses Element hat zusätzlichen Abstand und enthält ein span-Element.

Die innerHTML-Eigenschaft gibt zurück:

   Dieses Element hat zusätzlichen Abstand und enthält <span>ein span-Element</span>.

Die textContent-Eigenschaft gibt zurück:

   Dieses Element hat zusätzlichen Abstand und enthält ein span-Element.

Browser-Unterstützung

element.textContent ist eine Eigenschaft von DOM Level 3 (2004).

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung