Panduan ini akan menggambarkan cara untuk mengakses dan memanipulasi sifat 'textContent' elemen DOM HTML dalam JavaScript.
Mula-mula, lihat pada asas sifat 'textContent' HTML DOM.
Apakah Harta 'textContent' HTML DOM dalam JavaScript?
' kandungan teks ” ialah sifat terbina dalam yang menetapkan, mendapatkan semula dan mengubah suai teks unsur atau nod tertentu termasuk semua keturunannya. Keturunan adalah elemen kanak-kanak seperti , , , dan banyak lagi yang digunakan untuk tujuan pemformatan. Semasa menetapkan teks menggunakan sifat 'textContent', keturunan elemen yang disasarkan digantikan sepenuhnya dengan teks baharu.
Sintaks (Tetapkan Kandungan Teks)
Sintaks asas untuk menetapkan teks elemen/nod menggunakan “ kandungan teks ” harta ada tertulis di bawah:
unsur. kandungan teks = teks | nod. kandungan teks = teks
Sintaks di atas mengambil yang dikehendaki ' teks ” sebagai nilai yang ingin ditetapkan oleh pengguna untuk elemen atau nod.
Sintaks (Dapatkan Kandungan Teks)
Sintaks umum untuk mengembalikan teks elemen atau nod melalui “ kandungan teks ” harta dinyatakan di sini:
unsur. kandungan teks | nod. kandungan teksNilai Pulangan: ' kandungan teks harta ” mengembalikan “ teks ” unsur atau nod dengan jarak tetapi tanpa teg HTML dalamannya.
Sekarang gunakan sintaks yang ditakrifkan di atas secara praktikal untuk mengakses dan memanipulasi sifat 'textContent'.
Bagaimana untuk Mengakses dan Memanipulasi Harta 'textContent' Elemen HTML DOM dalam JavaScript?
Sama seperti sifat 'innerHTML' dan 'innerText', ' kandungan teks ” harta juga membenarkan pengguna untuk menetapkan, mengakses dan mengubah suai teks elemen yang dikehendaki dengan mudah. Bahagian ini melaksanakan semua operasi ini pada elemen menggunakan contoh yang dinyatakan di bawah.
Contoh 1: Menggunakan Harta “textContent” untuk Mengakses Teks Elemen/Nod
Contoh ini menggunakan sifat 'textContent' untuk mengembalikan teks elemen atau nod tertentu termasuk semua anak-anaknya.
Kod HTML
< div ID = 'myDiv' onmouseover = 'getText()' gaya = 'sempadan: 3px hitam pepejal; lebar: 400px; padding: 5px 5px; jidar: auto;' >< h1 > Tajuk Pertama < / h1 >
< h2 > Tajuk Kedua < / h2 >
< h3 > Tajuk Ketiga < / h3 >
< h4 > Tajuk Keempat < / h4 >
< h5 > Tajuk Kelima < / h5 >
< h6 > Tajuk Keenam < / h6 >
< / div >
Dalam baris kod HTML di atas:
- ' Teg ” yang mempunyai id “myDiv” mencipta elemen div yang digayakan dengan jidar, lebar, padding sifat berikut (atas dan bawah, kiri dan kanan) dan jidar. Ia juga melampirkan ' onmouseover 'peristiwa yang memanggil' getText() fungsi ” apabila pengguna menuding tetikus di atasnya.
- Di dalam div, semua teg tajuk (h1,h2,h3,h4,h5, dan h6) yang ditentukan memasukkan elemen tajuk mengikut tahap yang ditentukan.
Kod JavaScript
< skrip >
fungsi getText ( ) {
adalah elem = dokumen. getElementById ( 'myDiv' ) ;
amaran ( unsur. kandungan teks ) ;
}
skrip >Dalam blok kod JavaScript yang ditulis di atas:
- Tentukan fungsi bernama “ getText() ”.
- Di dalam fungsi ini, pembolehubah 'elemen' menggunakan ' getElementById() ” kaedah untuk mengakses elemen div melalui idnya.
- ' amaran() ' kaedah mencipta kotak amaran yang menggunakan ' kandungan teks ” property untuk mengembalikan teks div induk bersama semua tanggungannya.
Pengeluaran
Output di bawah muncul kotak amaran yang menunjukkan kandungan teks elemen div:
Contoh 2: Menggunakan Harta 'textContent' untuk Menggantikan Kandungan Teks Elemen Termasuk Keturunannya
Contoh ini menunjukkan cara sifat 'textContent' menggantikan semua anak elemen sambil mengubah suai teksnya.
Kod HTML
< pusat >
< id h1 = 'kepala saya' onclick = 'modifyText()' >< b > ini b > ialah < rentang > Tajuk < rentang > < i > unsur i > h1 >
pusat >Dalam baris kod yang dinyatakan di atas:
- ' tag ' menambah elemen tajuk tahap 1 dengan dilampirkan ' onclick 'peristiwa yang memanggil' modifyText() ” fungsi apabila pengguna mengklik padanya.
- Elemen tajuk juga mengandungi “ ',' ”, dan “ ” tag sebagai keturunannya. Teg “ ” digunakan untuk menebalkan rentetan yang disertakan, teg “” tanpa sebarang sifat penggayaan digunakan untuk tidak menggunakan penggayaan pada rentetan yang diberikan dan teg “ ” digunakan untuk memaparkan rentetan yang ditentukan sebagai italik.
Kod JavaScript
< skrip >
di mana h1 = dokumen. getElementById ( 'kepala saya' ) ;
konsol. log ( h1 ) ;
fungsi modifyText ( ) {
h1. kandungan teks = 'Selamat datang ke Linuxhint!' ;
konsol. log ( h1 )
}
skrip >Dalam kod JavaScript di atas:
- Pembolehubah 'h1' menggunakan ' document.getElementById() ” kaedah untuk mengakses elemen tajuk melalui id yang ditetapkan.
- ' console.log() ” kaedah memaparkan elemen tajuk yang diakses pada konsol sebelum menukar kandungannya.
- Fungsi bernama “ modifyText() ” menggunakan “ kandungan teks ” harta untuk mengubah suai teks elemen tajuk yang diambil.
- Kaedah 'console.log()' terakhir sekali lagi memaparkan nilai 'h1' selepas pengubahsuaian.
Pengeluaran
Konsol dengan jelas menunjukkan bahawa semua kanak-kanak elemen tajuk yang diberikan telah digantikan dengan teks yang baru ditentukan apabila mengklik padanya:
Contoh 3: Menggunakan Harta “textContent” untuk Mengubah Suai Teks Anak Elemen
Contoh ini menggunakan sifat 'textContent' untuk mengubah suai teks anak elemen tertentu.
Kod HTML
< div ID = 'myDiv' gaya = 'sempadan: 3px hitam pepejal; lebar: 400px; padding: 5px 5px; jidar: auto;' >
< pusat >
< butang ID = 'btn' onmouseover = 'changeText()' > Butang Lama < / butang >
< / pusat >
< / div >Dalam senario ini:
- Elemen 'div' mempunyai elemen 'butang' yang dibuat dengan bantuan '
” tag. - Elemen butang seterusnya mengandungi id yang ditetapkan dan ' onmouseover 'peristiwa yang memanggil' changeText() ” berfungsi apabila tetikus melayang di atasnya.
Kod JavaScript
< skrip >
ialah parentElement = dokumen. getElementById ( 'myDiv' ) ;
var sasaran = dokumen. getElementById ( 'btn' ) ;
adalah cari_saya = parentElement. mengandungi ( sasaran ) ;
jika ( parentElement. mengandungi ( sasaran ) == benar ) {
konsol. log ( cari saya ) ;
fungsi changeTeks ( ) {
sasaran. kandungan teks = 'Butang Baharu' ;
}
} lain {
konsol. log ( 'Tidak wujud' )
}
skrip >Dalam coretan kod di atas:
- Pembolehubah 'parentElement' menggunakan ' getElementById() ” kaedah untuk mengakses elemen div induk. Pembolehubah 'sasaran' juga menggunakan kaedah 'getElementById()' untuk mengambil elemen butang tambahan menggunakan idnya.
- Pembolehubah 'find_me' menggunakan ' mengandungi() ” kaedah untuk menyemak sama ada elemen butang yang disasarkan adalah anak div atau tidak. Kaedah ini akan mengembalikan ' benar ” untuk “ya” sebaliknya “palsu”.
- ' jika tidak ” pernyataan mentakrifkan blok kod.
- Jika elemen yang disasarkan ialah anak kepada elemen induk, maka “ changeText() fungsi ” akan menukar teksnya melalui “ kandungan teks ” harta benda. Jika tidak, blok kod 'lain' akan dilaksanakan untuk memaparkan mesej yang ditentukan menggunakan ' console.log() ” kaedah.
Pengeluaran
Konsol menunjukkan ' benar ” nilai boolean yang mengesahkan elemen butang ialah anak div yang diberikan dan kemudian teksnya berubah apabila menuding tetikus di atasnya:
Perbezaan Antara TextContent, innerText dan innerHTML Properties?
Secara umumnya, ' kandungan teks ',' innerTeks ”, dan “ innerHTML ” sifat berurusan dengan teks elemen atau nod dalam cara menetapkan dan mendapatkannya. Walau bagaimanapun, sifat-sifat ini berbeza antara satu sama lain berdasarkan beberapa faktor. Bahagian ini menyerlahkan perbezaan utama antara kesemuanya:
Syarat 'Kandungan teks' 'InnerTeks' “innerHTML” Jenis Pemulangan Ia mengembalikan teks elemen termasuk semua anak-anaknya (tag pemformatan), teks tersembunyi CSS dan ruang. Ia tidak mengembalikan tag HTML sesuatu elemen. Ia mengembalikan kandungan teks elemen HTML yang disasarkan dengan semua anak-anaknya (tag pemformatan). Ia tidak mengembalikan ruang, teks tersembunyi CSS dan teg HTML kecuali