Panduan ini akan mengilustrasikan cara mengakses dan memanipulasi properti “textContent” elemen HTML DOM di JavaScript.
Pertama, lihat dasar-dasar properti “textContent” HTML DOM.
Apa yang dimaksud dengan Properti “textContent” HTML DOM di JavaScript?
“ konten teks ” adalah properti bawaan yang menyetel, mengambil, dan memodifikasi teks elemen atau node tertentu termasuk semua turunannya. Keturunannya adalah elemen turunan seperti , , , dan masih banyak lagi yang digunakan untuk tujuan pemformatan. Saat mengatur teks menggunakan properti “textContent”, turunan dari elemen yang ditargetkan akan diganti sepenuhnya dengan teks baru.
Sintaks (Atur Konten Teks)
Sintaks dasar untuk mengatur teks suatu elemen/node menggunakan “ konten teks ” propertinya tertulis di bawah ini:
elemen. konten teks = teks | simpul. konten teks = teks
Sintaks di atas mengambil “ teks ” sebagai nilai yang ingin ditetapkan pengguna untuk suatu elemen atau node.
Sintaks (Dapatkan Konten Teks)
Sintaks umum untuk mengembalikan teks elemen atau node melalui “ konten teks ” properti dinyatakan di sini:
elemen. konten teks | simpul. konten teksNilai Pengembalian: “ konten teks ” properti mengembalikan “ teks ” dari elemen atau node dengan spasi tetapi tanpa tag HTML bagian dalamnya.
Sekarang gunakan sintaks yang ditentukan di atas secara praktis untuk mengakses dan memanipulasi properti “textContent”.
Bagaimana Mengakses dan Memanipulasi Properti “textContent” Elemen HTML DOM di JavaScript?
Mirip dengan properti “innerHTML” dan “innerText”, “ konten teks Properti ” juga memungkinkan pengguna untuk mengatur, mengakses, dan memodifikasi teks elemen yang diinginkan dengan mudah. Bagian ini melakukan semua operasi ini pada elemen menggunakan contoh yang disebutkan di bawah.
Contoh 1: Menerapkan Properti “textContent” untuk Mengakses Teks Elemen/Node
Contoh ini menerapkan properti “textContent” untuk mengembalikan teks elemen atau node tertentu termasuk semua turunannya.
Kode HTML
< div pengenal = 'Div saya' onmouseover = 'dapatkan Teks()' gaya = 'batas: 3px hitam pekat; lebar: 400px; bantalan: 5px 5px; margin: otomatis;' >< h1 > Judul Pertama < / h1 >
< h2 > Judul Kedua < / h2 >
< h3 > Judul Ketiga < / h3 >
< h4 > Judul Keempat < / h4 >
< h5 > Judul Kelima < / h5 >
< h6 > Judul Keenam < / h6 >
< / div >
Pada baris kode HTML di atas:
- “ ” tag yang memiliki id “myDiv” membuat elemen div yang ditata dengan properti berikut border, width, padding (atas dan bawah, kiri dan kanan), dan margin. Itu juga melampirkan “ onmouseover ” acara yang memanggil “ dapatkan Teks() ” berfungsi ketika pengguna mengarahkan mouse ke atasnya.
- Di dalam div, semua tag heading (h1,h2,h3,h4,h5, dan h6) yang ditentukan memasukkan elemen heading sesuai dengan level yang ditentukan.
Kode JavaScript
< naskah >
fungsi getText ( ) {
adalah elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
peringatan ( elemen. konten teks ) ;
}
naskah >Di blok kode JavaScript yang ditulis di atas:
- Tentukan fungsi bernama “ dapatkan Teks() ”.
- Di dalam fungsi ini, variabel “elem” menerapkan “ dapatkanElementById() ” metode untuk mengakses elemen div melalui id-nya.
- “ peringatan() Metode ” membuat kotak peringatan yang menggunakan metode “ konten teks ” properti untuk mengembalikan teks div induk beserta semua tanggungannya.
Keluaran
Output di bawah ini memunculkan kotak peringatan yang menampilkan konten teks elemen div:
Contoh 2: Menerapkan Properti “textContent” untuk Mengganti Konten Teks Elemen Termasuk Keturunannya
Contoh ini menunjukkan bagaimana properti “textContent” menggantikan semua turunan elemen saat memodifikasi teksnya.
Kode HTML
< tengah >
< h1 identitas = 'kepalaku' klik = 'modifikasiTeks()' < B > Ini B > adalah < menjangkau > Menuju < menjangkau > < Saya > Elemen Saya > h1 >
tengah >Pada baris kode yang disebutkan di atas:
- “ ” tag menambahkan elemen judul level 1 dengan lampiran “ klik ” acara yang memanggil “ modifikasiTeks() ” berfungsi ketika pengguna mengkliknya.
- Elemen judul juga berisi “ ', '
', Dan ' ” menandai sebagai keturunannya. Tag “ ” digunakan untuk menebalkan string yang diapit, tag “” tanpa properti gaya apa pun digunakan untuk tidak menerapkan gaya apa pun pada string tertentu, dan tag “ ” digunakan untuk menampilkan string yang ditentukan sebagai miring.
Kode JavaScript
< naskah >
dimana h1 = dokumen. dapatkanElementById ( 'kepalaku' ) ;
menghibur. catatan ( h1 ) ;
fungsi memodifikasiTeks ( ) {
h1. konten teks = 'Selamat datang di Linuxhint!' ;
menghibur. catatan ( h1 )
}
naskah >Dalam kode JavaScript di atas:
- Variabel “h1” menggunakan “ dokumen.getElementById() ” metode untuk mengakses elemen judul melalui id yang ditetapkannya.
- “ konsol.log() Metode ” menampilkan elemen judul yang diakses di konsol sebelum mengubah kontennya.
- Fungsi bernama “ modifikasiTeks() ” menggunakan “ konten teks ” properti untuk mengubah teks elemen judul yang diambil.
- Metode “console.log()” terakhir kembali menampilkan nilai “h1” setelah modifikasi.
Keluaran
Konsol dengan jelas menunjukkan bahwa semua anak dari elemen judul tertentu telah diganti dengan teks yang baru ditentukan saat mengkliknya:
Contoh 3: Menerapkan Properti “textContent” untuk Memodifikasi Teks Anak Elemen
Contoh ini menggunakan properti “textContent” untuk mengubah teks turunan elemen tertentu.
Kode HTML
< div pengenal = 'Div saya' gaya = 'batas: 3px hitam pekat; lebar: 400px; bantalan: 5px 5px; margin: otomatis;' >
< tengah >
< tombol pengenal = 'btn' onmouseover = 'ubahTeks()' > Tombol Lama < / tombol >
< / tengah >
< / div >Dalam skenario ini:
- Elemen “div” memiliki elemen “tombol” yang dibuat dengan bantuan “
” tandai. - Elemen tombol selanjutnya berisi id yang ditetapkan dan “ onmouseover ” acara yang memanggil “ ubahTeks() ” berfungsi saat mouse mengarahkan kursor ke atasnya.
Kode JavaScript
< naskah >
adalah elemen induk = dokumen. dapatkanElementById ( 'Div saya' ) ;
target var = dokumen. dapatkanElementById ( 'btn' ) ;
adalah temukan_saya = elemen induk. mengandung ( target ) ;
jika ( elemen induk. mengandung ( target ) == BENAR ) {
menghibur. catatan ( Temukan aku ) ;
perubahan fungsiTeks ( ) {
target. konten teks = 'Tombol Baru' ;
}
} kalau tidak {
menghibur. catatan ( 'Tidak ada' )
}
naskah >Dalam cuplikan kode di atas:
- Variabel “parentElement” menerapkan “ dapatkanElementById() ” metode untuk mengakses elemen div induk. Variabel “target” juga menggunakan metode “getElementById()” untuk mengambil elemen tombol yang ditambahkan menggunakan id-nya.
- Variabel “find_me” menggunakan “ mengandung() ” metode untuk memeriksa apakah elemen tombol yang ditargetkan adalah anak dari div atau bukan. Metode ini akan mengembalikan “ BENAR ” untuk “ya” jika tidak “salah”.
- “ jika-lainnya ” pernyataan mendefinisikan blok kode.
- Jika elemen yang ditargetkan adalah anak dari elemen induk, maka “ ubahTeks() Fungsi ” akan mengubah teksnya melalui “ konten teks ' Properti. Jika tidak, blok kode “lain” akan dijalankan untuk menampilkan pesan tertentu menggunakan “ konsol.log() ' metode.
Keluaran
Konsol menunjukkan “ BENAR ” nilai boolean yang memverifikasi elemen tombol adalah anak dari div yang diberikan dan kemudian teksnya berubah saat mengarahkan mouse ke atasnya:
Perbedaan Antara Properti textContent, innerText, dan innerHTML?
Umumnya, “ konten teks ', ' teks dalam ', Dan ' innerHTML ” Properti berhubungan dengan teks elemen atau node dalam cara mengatur dan mendapatkannya. Namun, sifat-sifat ini berbeda satu sama lain berdasarkan beberapa faktor. Bagian ini menyoroti perbedaan utama di antara semuanya:
Ketentuan 'isi teks' 'Teks dalam' “HTML dalam” Jenis Pengembalian Ia mengembalikan teks suatu elemen termasuk semua turunannya (tag pemformatan), teks tersembunyi CSS, dan spasi. Itu tidak mengembalikan tag HTML suatu elemen. Ia mengembalikan konten teks dari elemen HTML yang ditargetkan dengan semua turunannya (tag pemformatan). Itu tidak mengembalikan spasi, teks tersembunyi CSS, dan tag HTML kecuali