Properti Konten teks HTML DOM
Contoh
Dapatkan konten teks dari suatu elemen:
var x =
document.getElementById("myBtn").textContent;
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti textContent menyetel atau mengembalikan konten teks dari simpul yang ditentukan, dan semua turunannya .
Jika Anda menyetel properti textContent, simpul turunan apa pun akan dihapus dan diganti dengan simpul Teks tunggal yang berisi string yang ditentukan.
Catatan: Properti ini mirip dengan properti innerText , namun ada beberapa perbedaan:
- textContent mengembalikan konten teks dari semua elemen, sedangkan innerText mengembalikan konten semua elemen, kecuali elemen <script> dan <style>.
- innerText tidak akan mengembalikan teks elemen yang disembunyikan dengan CSS (textContent akan).
Tip: Terkadang properti ini dapat digunakan sebagai ganti properti nodeValue , tetapi ingat bahwa properti ini juga mengembalikan teks dari semua node anak.
Tip: Untuk menyetel atau mengembalikan konten HTML suatu elemen, gunakan properti innerHTML .
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sintaksis
Kembalikan konten teks dari sebuah simpul:
node.textContent
Setel konten teks dari sebuah simpul:
node.textContent = text
Nilai properti
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Detail Teknis
Nilai Kembali: | Sebuah String, mewakili teks dari node dan semua turunannya. Mengembalikan null jika elemennya adalah dokumen, tipe dokumen, atau notasi. |
---|---|
Versi DOM | Objek Node Tingkat 3 Inti |
Lebih Banyak Contoh
Contoh
Ubah konten tekstual elemen <p> dengan id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Contoh
Dapatkan semua konten tekstual dari elemen <ul> dengan id="myList":
var x = document.getElementById("myList").textContent;
Nilai x akan menjadi:
Coffee Tea
Contoh
Contoh ini menunjukkan beberapa perbedaan antara innerText, innerHTML dan 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>
Dapatkan konten elemen <p> di atas dengan properti yang ditentukan:
innerText mengembalikan: "Elemen ini memiliki spasi ekstra dan berisi elemen span."
innerHTML mengembalikan: " Elemen ini memiliki spasi ekstra dan berisi <span>elemen rentang</span>."
textContent mengembalikan: "Elemen ini memiliki spasi ekstra dan berisi elemen span."
Properti innerText hanya mengembalikan teks, tanpa spasi dan tag elemen dalam.
Properti innerHTML mengembalikan teks, termasuk semua spasi dan tag elemen dalam.
Properti textContent mengembalikan teks dengan spasi, tetapi tanpa tag elemen dalam.