Dalam JavaScript, pohon DOM mengikuti struktur hierarkis yang berisi sejumlah besar node. Struktur dimulai dari simpul akar (Dokumen) dan kemudian ditambahkan dengan simpul induk dan anak. Untuk mengakses simpul anak ini, JavaScript menawarkan ' childNodes ' Properti. Properti ini membantu pengguna untuk mengakses semua atau simpul anak tertentu dari elemen induk terkait.
Posting ini menguraikan tujuan, dan cara kerja elemen DOM HTML properti 'childNodes' dalam JavaScript.
Apa itu Properti 'childNodes' Elemen DOM HTML dalam JavaScript?
“ childNodes ” adalah properti hanya-baca yang mengembalikan daftar semua simpul anak dari suatu elemen dalam bentuk objek NodeList. Properti khusus ini juga dapat digunakan untuk mengakses simpul anak tertentu dari elemen induk. Node anak dimulai dari indeks “0 (nol)”. Selain itu, spasi putih, komentar, dan simpul teks juga dianggap sebagai simpul anak.
Sintaksis
element.childNodes
Sintaks umum di atas mengembalikan objek NodeList yang berisi simpul anak dari elemen yang ditargetkan.
Mari gunakan sintaks yang ditentukan di atas secara praktis.
Kode HTML
Pertama, lihat kode HTML yang disebutkan:
< div pengenal = 'Div' gaya = 'batas: 2px hitam pekat; tinggi: 200px; lebar: 250px; padding: 10px' >< h2 > Tajuk Pertama h2 >
< h3 > Tajuk Kedua h3 >
< P > Paragraf pertama P >
< P > Paragraf kedua P >
div >
< P pengenal = 'untuk' > P >
Pada baris kode di atas:
- Tambah sebuah ' ” dengan id 'Div', ditata dengan bantuan properti yang dinyatakan (border, height, dan width).
- Di dalam elemen “
”, tentukan masing-masing dua judul dan dua paragraf.- Terakhir, “ ” tag menyematkan paragraf kosong dengan id 'para'.
Catatan: Kode HTML yang dinyatakan dipertimbangkan di seluruh posting ini.
Contoh 1: Menerapkan Properti “childNodes” untuk Mendapatkan Jumlah Total Node Anak dari Elemen Tertentu
Contoh ini menggunakan properti “childNodes” dan “length” untuk mendapatkan jumlah total node anak yang ada di elemen induk tertentu.
Kode JavaScript
Mari ikuti kode yang diberikan:
< naskah >
const elem = document.getElementById ( 'Div' ) ;
membiarkan num = elem.childNodes.length;
document.getElementById ( 'untuk' ) .innerHTML = 'Nilai: ' + angka;
naskah >Pada baris kode di atas:
- Variabel 'elem' menggunakan ' getElementById() ” untuk mengakses elemen induk yang id-nya adalah 'Div'.
- Variabel “num” menggunakan “ childNodes ' Dan ' panjang ” untuk mendapatkan jumlah simpul anak yang ada di elemen “” yang diakses.
- Terakhir, metode “getElementById()” mengambil paragraf kosong tersemat melalui id “para” untuk menambahkannya dengan nilai variabel “num”.
Keluaran
Output menyiratkan bahwa ada total ' 9 ” simpul anak dalam elemen “
” yang diberikan termasuk spasi putih di antara elemen.Contoh 2: Menerapkan Properti “childNodes” untuk Mendapatkan Nama Node Anak Tertentu
Properti “childNodes” juga dapat digunakan dengan properti “nodeName” untuk mendapatkan nama node anak. Mari kita lihat secara praktis.
Kode JavaScript
Pergi melalui kode berikut:
< naskah >
const elem = document.getElementById ( 'Div' ) ;
membiarkan num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'untuk' ) .innerHTML = 'Elemen:' +bil;
naskah >Di sini, “ childNodes Properti ” dikaitkan dengan properti “ nodeName ” untuk mendapatkan nama simpul anak yang ditentukan berdasarkan indeks yang diakses yaitu, '1'.
Keluaran
Keluaran menampilkan nama simpul anak, yaitu elemen 'H2' terhadap indeks yang ditentukan.
Contoh 3: Menerapkan Properti “childNodes” untuk Mengubah Warna Teks dari Node Anak Tertentu
Contoh ini menggunakan properti yang didiskusikan untuk mengubah warna target anak yang diindeks.
Kode JavaScript
Pertimbangkan kode berikut:
< naskah >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .gaya.warna = 'hijau' ;
naskah >Di sini, “ getElementById() ” metode mengambil elemen induk “
” melalui id “Div” dan node anaknya ditempatkan pada indeks yang ditentukan melalui metode “ childNodes ” properti, masing-masing. Setelah itu, gunakan “ gaya. warna ” untuk mengubah warna teks simpul anak yang diakses.Keluaran
Output mengonfirmasi bahwa warna teks dari simpul anak yang ditentukan telah diubah dengan benar.
Kesimpulan
Dalam JavaScript, “ childNodes ” properti mengambil objek nodeList yang berisi simpul anak dari elemen HTML target. Node anak dapat diakses sekaligus atau yang diinginkan dengan menentukan nomor indeks dengan properti “childNodes”. Properti ini memungkinkan eksekusi fungsi JavaScript untuk melakukan tugas khusus pada node anak yang diakses. Artikel ini menguraikan penerapan properti 'childNodes' di JavaScript.
- Di dalam elemen “