HTML DOM textContent Eiendom
Voorbeeld
Kry die teksinhoud van 'n element:
var x =
document.getElementById("myBtn").textContent;
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die textContent-eienskap stel of gee die teksinhoud van die gespesifiseerde nodus, en al sy afstammelinge , terug .
As jy die textContent-eienskap stel , word enige kindernodusse verwyder en vervang deur 'n enkele teksnodus wat die gespesifiseerde string bevat.
Let wel: Hierdie eienskap is soortgelyk aan die innerText- eienskap, maar daar is 'n paar verskille:
- textContent gee die teksinhoud van alle elemente terug, terwyl innerText die inhoud van alle elemente terugstuur, behalwe vir <script> en <style> elemente.
- innerText sal nie die teks van elemente wat met CSS versteek is, terugstuur nie (textContent sal).
Wenk: Soms kan hierdie eienskap gebruik word in plaas van die nodeValue- eienskap, maar onthou dat hierdie eienskap ook die teks van alle kindernodusse gee.
Wenk: Om die HTML-inhoud van 'n element te stel of terug te gee, gebruik die innerHTML- eienskap.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sintaksis
Gee die teksinhoud van 'n nodus terug:
node.textContent
Stel die teksinhoud van 'n nodus:
node.textContent = text
Eiendomswaardes
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
Tegniese besonderhede
| Terugkeerwaarde: | 'n String, wat die teks van die nodus en al sy afstammelinge verteenwoordig. Wys nul as die element 'n dokument, 'n dokumenttipe of 'n notasie is. |
|---|---|
| DOM weergawe | Kernvlak 3 Node-objek |
Meer voorbeelde
Voorbeeld
Verander die tekstuele inhoud van 'n <p>-element met id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Voorbeeld
Kry al die tekstuele inhoud van 'n <ul>-element met id="myList":
var x = document.getElementById("myList").textContent;
Die waarde van x sal wees:
Coffee Tea
Voorbeeld
Hierdie voorbeeld demonstreer sommige van die verskille 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>
Kry die inhoud van die <p> element hierbo met die gespesifiseerde eienskappe:
innerText gee terug: "Hierdie element het ekstra spasiëring en bevat 'n spanelement."
innerHTML gee terug: " Hierdie element het ekstra spasiëring en bevat <span>'n span-element</span>."
textContent gee terug: " Hierdie element het ekstra spasiëring en bevat 'n span-element."
Die innerText eienskap gee net die teks terug, sonder spasiëring en innerlike element tags.
Die innerHTML eienskap gee die teks terug, insluitend alle spasiëring en innerlike element tags.
Die textContent-eienskap gee die teks terug met spasiëring, maar sonder innerlike element-merkers.