Saat menambahkan beberapa fungsi dalam Model Objek Dokumen (DOM) menggunakan JavaScript, pengembang sering kali perlu menganalisis keterkaitan elemen. Hal ini dapat dicapai dengan mencatat elemen induk dari elemen target yang menyederhanakan aliran kode dan pemformatan fitur yang disertakan dalam situs. Ikhtisar Isi
Apa yang dimaksud dengan Properti “parentElement” di JavaScript?
“ elemen induk Properti ” di JavaScript mengambil elemen yang merupakan induk dari elemen target.
Bagaimana Mengakses/Memanggil Elemen Induk Melalui Properti HTML DOM parentElement?
Elemen induk dapat diakses menggunakan HTML DOM “ elemen induk ” properti dengan “ Nama simpul ” properti atau mengambil node elemen induk melalui “ simpul induk ' Properti.
VIDEO
Sintaksis
elemen induk
Nilai Pengembalian batal ” jika node tidak terdiri dari orang tua.
Memanfaatkan Metode dan Properti Umum
dokumen.querySelector() : Metode ini mendapatkan elemen pertama yang cocok dengan pemilih CSS.
Sintaksis
dokumen. querySelector ( ini )
Dalam sintaksis ini, “ ini ” mengacu pada satu atau lebih pemilih CSS.
dokumen.getElementById() : Ini mengembalikan elemen yang memiliki id yang ditentukan.
Sintaksis
dokumen. dapatkanElementById ( pengenal )
Di Sini, ' pengenal ” menunjukkan id elemen target yang akan diambil.
indeks yang dipilih : Properti ini mengambil indeks opsi yang dipilih dari daftar drop-down. Itu '-1' opsi membatalkan pilihan semua opsi.
Nama simpul : Properti ini mengambil nama node.
anak-anak : Properti ini mengembalikan elemen anak elemen sebagai koleksi.
HTML luar : Properti ini mengalokasikan atau mengambil elemen HTML serta atributnya serta tag awal dan akhir.
simpul induk : Properti khusus ini mengambil simpul induk dari suatu elemen atau simpul.
Catatan : Perbedaan antara “ elemen induk ' Dan ' simpul induk ” properti adalah properti sebelumnya yaitu, “parentElement” memberikan “ batal ” jika simpul induk tidak mencerminkan simpul elemen.
Contoh 1: Mengakses Elemen Induk melalui Properti “parentElement” di JavaScript
Contoh ini memanggil elemen induk dari suatu elemen dan menampilkan nama simpul (induk)-nya saat tombol diklik.
Kode HTML
< html < tubuh < h1 Properti parentElement dalam JavaScript < / h1 < h2 Pilih Bahasa: < / h2 < Pilih kelas = 'elemen' > < pilihan ular piton < / pilihan < pilihan Jawa < / pilihan < pilihan JavaScript < / pilihan < / Pilih < tombol klik = 'tampilanOrang Tua()' kelas = 'tombol' > Menampilkan Elemen Induk dari Elemen 'opsi'. < / tombol < div kelas = 'suhu' < / div / tubuh < html
Dalam kode ini:
Tentukan yang diberikan “” Dan “” elemen yang masing-masing terdiri dari judul tingkat satu dan tingkat dua.
Setelah itu, buat a “” elemen yang diwakili oleh kelas tertentu yang berisi elemen turunan selanjutnya yaitu, “” .
Sekarang, buat tombol yang terkait dengan “ klik ” acara yang mengalihkan ke “tampilanOrang Tua()” berfungsi setelah tombol diklik.
Terakhir, tentukan “” elemen di mana hasilnya, yaitu elemen induk yang diakses, akan ditampilkan.
Kode CSS
> { perataan teks : tengah ; warna : #fff ; warna latar belakang : abu-abu ; tinggi : 100% ; } { tinggi : 2rem ; radius perbatasan : 2 piksel ; lebar : 35% ; batas : 2rem mobil ; menampilkan : memblokir ; warna : #ba0b0b ; kursor : penunjuk ; } { ukuran huruf : 1,5rem ; berat font : berani ; } >
Pada kode CSS di atas:
Gaya keseluruhan halaman web dengan properti “perataan teks”, “warna latar belakang”, dll.
Demikian pula, terapkan gaya pada tombol yang dibuat melalui kelasnya dengan menyesuaikan tinggi, lebar, tampilan, warna, dll.
Terakhir, beri gaya “ div ” dengan mengacu pada nama kelasnya di mana elemen induk yang diakses akan ditampilkan.
Kode JavaScript
VIDEO
< naskah
> fungsi tampilanOrangtua
( ) { dulu mendapatkan = dokumen.
querySelector ( '.elemen' ) ; dulu ini
= mendapatkan .
pilihan [ mendapatkan .
indeks yang dipilih ] ; dulu menambahkan
= dokumen.
querySelector ( '.temp' ) ; menambahkan.
innerHTML = 'Elemen Induk dari Elemen opsi adalah ->' + ini.
elemen induk .
Nama simpul ;
}
naskah >
Menurut baris kode ini:
Tentukan fungsinya “tampilanOrang Tua()” yang mengakses elemen “” dengan merujuk ke kelasnya melalui “dokumen.querySelector()” metode.
“ pilihan ” koleksi mendapatkan koleksi semua elemen “” di daftar drop-down dan “ indeks yang dipilih Properti ” mengambil indeks opsi yang dipilih untuk daftar drop-down.
Terakhir, gunakan “dokumen.querySelector()” metode lagi untuk mengakses elemen “” dan menambahkannya dengan elemen induk elemen “
” melalui penerapan “ elemen induk ' Dan ' Nama simpul ” (menampilkan nama node induk) properti.
Seluruh Kode
< html < tubuh < h1 Properti parentElement dalam JavaScript < / h1 < h2 Pilih Bahasa: < / h2 < Pilih kelas = 'elemen' > < pilihan ular piton < / pilihan < pilihan Jawa < / pilihan < pilihan JavaScript < / pilihan < / Pilih < tombol klik = 'tampilanOrang Tua()' kelas = 'tombol' > Menampilkan Elemen Induk dari Elemen 'opsi'. < / tombol < div kelas = 'suhu' < / div / tubuh < gaya < / gaya < naskah < / naskah
Keluaran
Di sini, dapat dilihat bahwa elemen induk dari semua node anak, yaitu opsi yang dipilih dari dropdown di “” elemen dikembalikan yaitu, “ PILIH ”.
Contoh 2: Mengakses Elemen Induk dan Anak melalui Properti “parentElement” dan “children” di JavaScript
Contoh kode berikut mengakses elemen induk dan anak dari elemen tertentu.
Kode HTML
< html tubuh div pengenal = 'induk' > div pengenal = 'anak' > h1 / h1 h1 / h1 / div / div / tubuh / html Di blok kode ini, buat dua elemen “
”, dan dua elemen “
” mengacu pada elemen turunan dari elemen “” terakhir.
Kode JavaScript
< naskah
> membiarkan
mendapatkan = dokumen.
dapatkanElementById ( 'anak' ) ; biarkan orang tua
= mendapatkan .
elemen induk ; menghibur.
catatan ( 'Elemen Induk ->' , induk.
HTML luar ) ; menghibur.
catatan ( 'Nama Node Elemen Induk ->' , induk.
Nama simpul ) ; biarkan anak-anak
= mendapatkan .
anak-anak ; untuk ( biarkan aku
= 0 ; Saya
< anak-anak.
panjang ; Saya
++ ) { menghibur.
catatan ( `Elemen Anak $
{ Saya
} : `
, anak-anak
[ Saya
] .
HTML luar ) ;
}
untuk ( biarkan aku
= 0 ; Saya
< anak-anak.
panjang ; Saya
++ ) { menghibur.
catatan ( `Nama Node Elemen Anak $
{ Saya
} : `
, anak-anak
[ Saya
] .
Nama simpul ) ;
}
naskah >
Penjelasan kode di atas adalah sebagai berikut:
VIDEO
Akses elemen “” terakhir berdasarkan “id”-nya menggunakan
“dokumen.getElementById()” metode dan ambil elemen induknya melalui “
elemen induk ' Properti.
Sekarang, tampilkan elemen induk dengan atribut, dan tag awal dan akhir melalui “ HTML luar ' Properti.
Juga, kembalikan nama elemen induk yaitu nama node menggunakan “ Nama simpul ' Properti.
Setelah itu, akses anak-anak elemen menggunakan properti “anak-anak”.
Terapkan “ untuk ” loop untuk mengulangi semua elemen turunan dan mengembalikannya dengan tag melalui properti “outerHTML” yang dibahas.
Demikian pula, gunakan loop “for” lagi untuk mengembalikan nama node elemen turunan juga.
Seluruh Kode
< html < tubuh < div pengenal = 'induk' > < div pengenal = 'anak' > < h1 Elemen Anak Pertama
< / h1 < h1 Elemen Anak Kedua
< / h1 < / div < / div
< / tubuh
< / html
< naskah biarkan dapatkan = document.getElementById('child');
biarkan orang tua = dapatkan.parentElement;
console.log('Elemen Induk -> ', parent.outerHTML);
console.log('Nama Node Elemen Induk -> ', parent.nodeName);
biarkan anak-anak = dapatkan.anak-anak;
untuk(misalkan i =0; i
< anak-anak.panjang; saya++ ) { konsol.log ( `Elemen Anak $ { Saya } : `, anak-anak [ Saya ] .outerHTML ) ; } untuk ( biarkan aku = 0 ; i < anak-anak.panjang; saya++ ) { konsol.log ( `Node Elemen Anak Nama $ { Saya } : `, anak-anak [ Saya ] .namanode ) ; } < / naskah
Keluaran
Hasil ini menyiratkan bahwa elemen induk dan anak dari elemen target ditampilkan secara detail (bersama dengan nama node) yang sesuai.
Contoh 3: Mengakses Elemen Induk Menggunakan Properti “parentNode”.
Dalam demonstrasi ini, elemen induk dari elemen tertentu dapat dipanggil dan kemudian elemen induk dari elemen tersebut juga akan diambil sehingga menghasilkan perilaku bersarang. Hal ini dapat dicapai melalui “ simpul induk ” properti yang mengambil node induk elemen.
Kode HTML
< html tubuh div pengenal = 'induk' > o pengenal = 'suhu' > itu pengenal = 'anak sementara' >Piton< / itu itu / itu itu / itu / o / div / tubuh / html Di sini, buat elemen “
” yang selanjutnya terdiri dari elemen “
(daftar terurut)” dan “(daftar item)” yang memiliki id tertentu.
Kode JavaScript
< naskah > mendapatkan = dokumen. dapatkanElementById ( 'anak sementara' ) ; = mendapatkan . simpul induk ; catatan ( 'Node Elemen Induk dari 'li'->' , induk ) ; = dokumen. dapatkanElementById ( 'suhu' ) ; = dapatkan2. simpul induk ; catatan ( 'Node Elemen Induk dari 'ol'->' , orang tua2 ) ; naskah >
Berdasarkan cuplikan kode ini, lakukan langkah-langkah yang disediakan di bawah ini:
Panggil elemen “ ” melalui “ dapatkanElementById() ”, akses node elemen induknya menggunakan metode “ simpul induk properti ”, dan menampilkan node induk.
Demikian pula, sekarang panggil node induk yang ditampilkan, yaitu induk “” dengan mengulangi metodologi yang sama.
Seluruh Kode
< html < tubuh < div pengenal = 'induk' > < o pengenal = 'suhu' > < itu pengenal = 'anak sementara' > ular piton < / itu < itu Jawa < / itu < itu JavaScript < / itu < / o < / div < naskah < / naskah < / tubuh < / html
Keluaran
Hasil ini menandakan bahwa node induk dalam kedua kasus ditampilkan sesuai.
Kesimpulan
Elemen induk dapat diakses dengan menggunakan HTML DOM “ elemen induk ” properti digabungkan dengan “ Nama simpul properti ” atau mengambil node induk melalui properti “parentNode”. Namun, untuk mengakses elemen anak, gunakan “ anak ' Properti.