JavaScript/DOM/Node/textContent
Die Eigenschaft Node.textContent enthält den Text eines DOM-Knotens, also beispielsweise eines HTML-Elements. und seiner Kindknoten. Sie können einen anderen Text zuweisen und so den Inhalt dynamisch ändern.
Syntax
var text = element.textContent;
-
text: Text wird ausgelesen und der Variabletextzugewiesen
element.textContent = text
- Inhalt wird durch den in der Variable
textgespeicherten Text ersetzt
Inhaltsverzeichnis
Anwendungsbeispiel
function auswerten() {
var liste = document.getElementById('liste'),
text = liste.textContent;
document.getElementById('ausgabe').textContent = text;
}
Was man beachten muss
Die textContent-Eigenschaft ist eine Eigenschaft der Node-Schnittstelle und weiß recht wenig über HTML, XML oder Elemente. Sie beachtet aber dies:
- Text im DOM befindet sich in einem speziellen Text-Node. Das Lesen und Schreiben von textContent auf einem Text-Node ändert nur diesen Text
- Ein Element hat keinen eigenen textContent. Statt dessen befindet sich der Text von Elementen in Text-Nodes, die Kindknoten dieses Elements sind. Der Abruf des textContent eines Elements bewirkt daher, dass alle Kindknoten dieses Elements durchlaufen werden und ihr textContent miteinander verkettet wird. Da ein Element andere Elemente als Kindknoten enthalten kann, ist dies ein rekursiver Prozess.
- Wenn das Element, dessen textContent Sie abrufen, ein <style> oder <script> Element enthält, so wird deren Inhalt, also das Stylesheet oder das Script, ebenfalls ausgelesen.
- textContent weiß außerdem nichts vom Layout. Der Text eines Elements, das mit dem hidden-Attribut, display:none oder visibility:hidden verborgen wurde, wird dennoch ausgelesen.
- Die Zuweisung einer Zeichenkette an die textContent Eigenschaft eines Elements entfernt seinen kompletten Inhalt und erzeugt einen Text-Knoten, der die zugewiesene Zeichenkette enthält.
innerText
Der Internet Explorer unterstützt textContent erst ab der Version 9. Die von ihm in Version 5.5 eingeführte, alternative Eigenschaft innerText verhält sich ähnlich, aber nicht identisch zu textContent. Aus Gründen der Kompatibilität wurde innerText von den anderen Browserherstellern ebenfalls implementiert und 2016 in den Standard übernommen. Im Gegensatz zu der Node-Eigenschaft textContent ist innerText auf der Schnittstelle HTMLElement definiert und damit nicht für XML-Elemente und auch nicht für andere DOM-Knoten verfügbar!
Syntax
let text = htmlElement.innerText;
-
text: Der Textinhalt des HTML Elements und seiner Kind-Elemente
htmlElement.innerText = text
- Der Inhalt des Elements wird durch den in der Variable
textgespeicherten Text ersetzt. Wenn das Element zuvor Kind-Elemente enthielt, werden sie entfernt.
<!doctype html>
<html>
<head>
<title>Test</title>
<script>
var Neu = "neuer Text";
function Aendern () {
document.getElementById("meinAbsatz").innerText = Neu;
}
</script>
</head>
<body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
Abgrenzung von textContent und innerText
Die Eigenschaft innerText orientiert sich an der visuellen Darstellung des Dokuments und vermeidet beim Auslesen einige der oben aufgeführten Probleme von textContent. Verborgener Text wird ignoriert, genau wie Text in <style> und <script> Elementen. Zeilenumbrüche, die durch ein „inline notiertes“ Blockelement erzeugt werden, finden sich im Ergebnis von innerText wieder.
Der Vorteil, dass innerText das tatsächliche Layout beachtet, ist gleichzeitig ein Nachteil. Denn zunächst einmal muss sichergestellt werden, dass das Layout aktuell ist. Das Lesen von innerText erfordert deshalb eine Aktualisierung der Bildschirmdarstellung (einen Reflow), und das kostet Zeit. Verwenden Sie innerText daher nur, wenn Sie diese Abhängigkeit von der Bildschirmdarstellung auch tatsächlich benötigen.
Wenn Sie innerText eine Zeichenkette zuweisen, besteht ebenfalls ein Unterschied. Zwar wird genau wie bei einer Zuweisung an textContent der Inhalt des Elements vollständig ersetzt, aber innerText erkennt Zeilenumbrüche (das Zeichen '\n') und ersetzt sie durch <br>-Elemente.
Abgrenzung von textContent und innerText zu innerHTML
Die Eigenschaft innerHTML bezieht sich nicht auf den Text in einem Element, sondern auf das darin befindliche HTML Markup. Sie ist nicht dafür vorgesehen, den Textinhalt des Elements zu erfassen.
Solange ein Element reinen Text enthält, gibt es zwischen textContent und innerHTML keinen Unterschied. Mit innerText ist es anders, weil es sich an der Anzeigedarstellung orientiert. Sobald Kind-Elemente hinzu kommen, ist innerHTML nicht mehr vergleichbar.
Bei einer Zuweisung an innerHTML sind die Unterschiede gravierend. Der an innerHTML zugewiesene Text wird als HTML interpretiert und in DOM Knoten umgewandelt. Bei einer Zuweisung an textContent oder innerText wird dagegen das HTML Markup als Sourcecode dargestellt.
Mit einer Zuweisung an innerHTML können Sie eine ganz neue HTML Struktur aufbauen. Dieses Feature ist sehr leistungsfähig, bedeutet aber auch, dass jede Zuweisung an innerHTML den im Browser eingebauten HTML Parser aktivieren muss, was Zeit kostet. Für einfache Textzuweisungen ist innerHTML nicht das Mittel der Wahl.
textContent oder innerText, wenn Sie reine Textinhalte verändern wollen. Dadurch, dass keine HTML-Elemente erzeugt werden müssen, ist dies performanter. Darüber hinaus verhindert man so potentielle XSS-Angriffe.Eine potenziell sehr gefährliche XSS-Lücke besteht nicht: Die HTML Spezifikation verlangt, dass ein <Script>-Element, das per innerHTML ins DOM gebracht wird, nicht ausgeführt wird. Es gibt aber subtilere Möglichkeiten, die nicht verhindert werden:
<p id="daten"></p>
<script>
let elem = document.getElementById("daten");
elem.innerHTML = `<img src="no.image.png" onerror="alert('Gotcha!')">`;
</script>
Weblinks
- W3C: textContent
- MDN: Node.textContent
- WHATWG: The innerText IDL attribute
- MDN: node.innerText
auswerten()aufgerufen.Diese Funktion liest mit textContent den Textinhalt der Liste aus und weist ihn der Variablen
textzu. Dieser Text wird dann mit textContent in den unteren Absatz geschrieben. Der Inhalt des Absatzes ändert sich dann dynamisch.