HTML-DOM -textContent- Eigenschaft
Beispiel
Holen Sie sich den Textinhalt eines Elements:
var x =
document.getElementById("myBtn").textContent;
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Eigenschaft textContent legt den Textinhalt des angegebenen Knotens und aller seiner Nachkommen fest oder gibt ihn zurück .
Wenn Sie die Eigenschaft textContent festlegen, werden alle untergeordneten Knoten entfernt und durch einen einzelnen Textknoten ersetzt, der die angegebene Zeichenfolge enthält.
Hinweis: Diese Eigenschaft ähnelt der Eigenschaft innerText , es gibt jedoch einige Unterschiede:
- textContent gibt den Textinhalt aller Elemente zurück, während innerText den Inhalt aller Elemente mit Ausnahme der Elemente <script> und <style> zurückgibt.
- innerText gibt nicht den Text von Elementen zurück, die mit CSS ausgeblendet sind (textContent wird es tun).
Tipp: Manchmal kann diese Eigenschaft anstelle der Eigenschaft nodeValue verwendet werden , aber denken Sie daran, dass diese Eigenschaft auch den Text aller untergeordneten Knoten zurückgibt.
Tipp: Um den HTML-Inhalt eines Elements festzulegen oder zurückzugeben, verwenden Sie die innerHTML- Eigenschaft.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Syntax
Gibt den Textinhalt eines Knotens zurück:
node.textContent
Legen Sie den Textinhalt eines Knotens fest:
node.textContent = text
Eigenschaftswerte
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
Technische Details
| Rückgabewert: | Ein String, der den Text des Knotens und aller seiner Nachkommen darstellt. Gibt null zurück, wenn das Element ein Dokument, ein Dokumenttyp oder eine Notation ist. |
|---|---|
| DOM-Version | Knotenobjekt der Kernebene 3 |
Mehr Beispiele
Beispiel
Ändern Sie den Textinhalt eines <p>-Elements mit id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Beispiel
Holen Sie sich den gesamten Textinhalt eines <ul>-Elements mit id="myList":
var x = document.getElementById("myList").textContent;
Der Wert von x ist:
Coffee Tea
Beispiel
Dieses Beispiel demonstriert einige der Unterschiede zwischen innerText, innerHTML und textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Holen Sie sich den Inhalt des <p>-Elements oben mit den angegebenen Eigenschaften:
innerText gibt zurück: "Dieses Element hat zusätzlichen Abstand und enthält ein span-Element."
innerHTML gibt zurück: "Dieses Element hat zusätzliche Leerzeichen und enthält <span>ein span-Element</span>."
textContent gibt zurück: "Dieses Element hat zusätzlichen Abstand und enthält ein span-Element."
Die innerText-Eigenschaft gibt nur den Text zurück, ohne Leerzeichen und innere Element-Tags.
Die innerHTML-Eigenschaft gibt den Text zurück, einschließlich aller Leerzeichen und inneren Element-Tags.
Die Eigenschaft textContent gibt den Text mit Leerzeichen, aber ohne innere Element-Tags zurück.