HTML DOM textContent Eigenschap
Voorbeeld
De tekstinhoud van een element ophalen:
var x =
document.getElementById("myBtn").textContent;
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Met de eigenschap textContent wordt de tekstinhoud van het opgegeven knooppunt en alle onderliggende items ingesteld of geretourneerd .
Als u de eigenschap textContent instelt, worden alle onderliggende knooppunten verwijderd en vervangen door een enkel tekstknooppunt dat de opgegeven tekenreeks bevat .
Opmerking: deze eigenschap is vergelijkbaar met de eigenschap innerText , maar er zijn enkele verschillen:
- textContent retourneert de tekstinhoud van alle elementen, terwijl innerText de inhoud van alle elementen retourneert, behalve de elementen <script> en <style>.
- innerText retourneert niet de tekst van elementen die verborgen zijn met CSS (textContent wel).
Tip: Soms kan deze eigenschap worden gebruikt in plaats van de eigenschap nodeValue , maar onthoud dat deze eigenschap ook de tekst van alle onderliggende knooppunten retourneert.
Tip: Gebruik de eigenschap innerHTML om de HTML-inhoud van een element in te stellen of te retourneren .
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Syntaxis
Retourneer de tekstinhoud van een knooppunt:
node.textContent
Stel de tekstinhoud van een knooppunt in:
node.textContent = text
Eigendomswaarden
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
Technische details
| Winstwaarde: | Een tekenreeks, die de tekst van het knooppunt en al zijn afstammelingen vertegenwoordigt. Retourneert null als het element een document, een documenttype of een notatie is. |
|---|---|
| DOM-versie | Kernniveau 3 knooppuntobject |
Meer voorbeelden
Voorbeeld
Wijzig de tekstuele inhoud van een <p> element met id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Voorbeeld
Krijg alle tekstuele inhoud van een <ul> element met id="myList":
var x = document.getElementById("myList").textContent;
De waarde van x wordt:
Coffee Tea
Voorbeeld
Dit voorbeeld demonstreert enkele van de verschillen tussen innerText, innerHTML en 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>
Haal de inhoud op van het <p> element hierboven met de gespecificeerde eigenschappen:
innerText geeft als resultaat: "Dit element heeft extra spatiëring en bevat een span-element."
innerHTML geeft als resultaat: " Dit element heeft extra spatiëring en bevat <span>een span-element</span>."
textContent retourneert: " Dit element heeft extra spatiëring en bevat een span-element."
De eigenschap innerText retourneert alleen de tekst, zonder spatiëring en tags voor innerlijke elementen.
De eigenschap innerHTML retourneert de tekst, inclusief alle spaties en tags voor innerlijke elementen.
De eigenschap textContent retourneert de tekst met spatiëring, maar zonder tags voor innerlijke elementen.