Dalam JavaScript, pepohon DOM mengikut struktur hierarki yang mengandungi senarai besar nod. Struktur bermula dari nod akar (Dokumen) dan kemudian ditambah dengan nod induk dan anak. Untuk mengakses nod anak ini, JavaScript menawarkan ' childNodes ” harta benda. Sifat ini membantu pengguna mengakses semua atau nod anak tertentu bagi elemen induk yang berkaitan.
Siaran ini menghuraikan objektif, dan kerja sifat 'childNodes' elemen DOM HTML dalam JavaScript.
Apakah Harta 'childNodes' Elemen HTML DOM dalam JavaScript?
' childNodes ” ialah harta baca sahaja yang mengembalikan senarai semua nod anak unsur dalam bentuk objek NodeList. Sifat istimewa ini juga boleh digunakan untuk mengakses nod anak tertentu bagi elemen induk. Nod anak bermula dari indeks '0 (sifar)'. Selain itu, ruang putih, ulasan dan nod teks juga dianggap sebagai nod anak.
Sintaks
element.childNodes
Sintaks umum di atas mengembalikan objek NodeList yang mengandungi nod anak elemen sasaran.
Mari gunakan sintaks yang ditakrifkan di atas secara praktikal.
Kod HTML
Pertama, lihat kod HTML yang dinyatakan:
< div ID = 'Div' gaya = 'sempadan: 2px hitam pepejal; tinggi: 200px; lebar: 250px; padding: 10px' >< h2 > Tajuk Pertama h2 >
< h3 > Tajuk Kedua h3 >
< hlm > Perenggan Pertama hlm >
< hlm > Perenggan Kedua hlm >
div >
< hlm ID = 'untuk' > hlm >
Dalam baris kod di atas:
- Tambahkan ' elemen ” dengan id “Div”, digayakan dengan bantuan sifat (sempadan, tinggi dan lebar) yang dinyatakan.
- Dalam elemen '
', tentukan dua tajuk dan dua perenggan, masing-masing.- Akhir sekali, ' teg ” membenamkan perenggan kosong dengan id “para”.
Catatan: Kod HTML yang dinyatakan dipertimbangkan sepanjang siaran ini.
Contoh 1: Menggunakan Harta 'childNodes' untuk Mendapatkan Jumlah Bilangan Nod Anak Elemen Tertentu
Contoh ini menggunakan sifat 'childNodes' dan 'panjang' untuk mendapatkan jumlah bilangan nod anak yang terdapat dalam elemen induk tertentu.
Kod JavaScript
Mari ikuti kod yang diberikan:
< skrip >
const elem = document.getElementById ( 'Div' ) ;
biarkan num = elem.childNodes.length;
document.getElementById ( 'untuk' ) .innerHTML = 'Nilai:' + bilangan;
skrip >Dalam baris kod di atas:
- Pembolehubah 'elemen' menggunakan ' getElementById() ” kaedah untuk mengakses elemen induk yang idnya ialah “Div”.
- Pembolehubah 'num' menggunakan ' childNodes ” dan “ panjang sifat ” untuk mendapatkan bilangan nod anak yang terdapat dalam elemen “” yang diakses.
- Akhir sekali, kaedah 'getElementById()' mengambil perenggan kosong terbenam melalui idnya 'para' untuk menambahkannya dengan nilai pembolehubah 'num'.
Pengeluaran
Output menunjukkan bahawa terdapat sejumlah ' 9 ” nod anak dalam elemen “
” yang diberikan termasuk ruang putih antara elemen.Contoh 2: Menggunakan Harta 'childNodes' untuk Mendapatkan Nama Nod Anak Tertentu
Sifat 'childNodes' juga boleh digunakan dengan sifat 'nodeName' untuk mendapatkan nama nod anak. Mari lihat secara praktikal.
Kod JavaScript
Pergi melalui kod berikut:
< skrip >
const elem = document.getElementById ( 'Div' ) ;
biarkan num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'untuk' ) .innerHTML = 'Elemen:' +num;
skrip >Di sini, ' childNodes ” harta dikaitkan dengan “ nodeName harta ” untuk mendapatkan nama nod anak yang ditentukan berdasarkan indeks yang diakses iaitu, “1”.
Pengeluaran
Output memaparkan nama nod kanak-kanak iaitu, elemen 'H2' terhadap indeks yang ditentukan.
Contoh 3: Menggunakan Harta 'childNodes' untuk Menukar Warna Teks Nod Anak Tertentu
Contoh ini menggunakan sifat yang dibincangkan untuk menukar warna kanak-kanak yang diindeks sasaran.
Kod JavaScript
Pertimbangkan kod berikut:
< skrip >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'hijau' ;
skrip >Di sini, ' getElementById() ' kaedah mengambil elemen '
' induk melalui id 'Div' dan nod anaknya diletakkan pada indeks yang ditentukan melalui ' childNodes ” harta masing-masing. Selepas itu, gunakan ' gaya.warna ” untuk menukar warna teks nod anak yang diakses.Pengeluaran
Output mengesahkan bahawa warna teks nod anak yang ditentukan telah ditukar dengan sewajarnya.
Kesimpulan
Dalam JavaScript, ' childNodes sifat ” mendapatkan semula objek nodeList yang mengandungi nod anak elemen HTML sasaran. Nod kanak-kanak boleh diakses sekali gus atau yang dikehendaki dengan menyatakan nombor indeks dengan sifat 'childNodes'. Sifat ini membenarkan pelaksanaan fungsi JavaScript untuk melaksanakan tugas khas pada nod anak yang diakses. Artikel ini menghuraikan penggunaan sifat 'childNodes' dalam JavaScript.
- Dalam elemen '