Cara Mengakses Elemen Induk Menggunakan HTML DOM parentElement Property

Cara Mengakses Elemen Induk Menggunakan Html Dom Parentelement Property



Semasa menambahkan berbilang fungsi dalam Model Objek Dokumen(DOM) menggunakan JavaScript, pembangun selalunya perlu menganalisis perkaitan elemen. Ini boleh dicapai dengan mengelog elemen induk elemen sasaran yang menyelaraskan aliran kod dan pemformatan ciri yang disertakan dalam tapak.

Gambaran Keseluruhan Kandungan

Apakah Harta 'parentElement' dalam JavaScript?

' parentElement ” harta dalam JavaScript mendapatkan semula elemen yang merupakan induk elemen sasaran.

Bagaimana untuk Mengakses/Memanggil Elemen Induk Melalui HTML DOM parentElement Property?

Elemen induk boleh diakses menggunakan HTML DOM “ parentElement ” harta dengan “ nodeName ' harta atau mendapatkan semula nod elemen induk sebaliknya melalui ' parentNode ” harta benda.





Sintaks



nod. parentElement

Nilai Pulangan
Sifat ini mendapatkan semula objek elemen yang mewakili nod elemen induk suatu nod dan memberikan “ null ” jika nod tidak terdiri daripada induk.



Kaedah dan Sifat Biasa Digunakan

document.querySelector() : Kaedah ini mendapat elemen pertama yang sepadan dengan pemilih CSS.



Sintaks

dokumen. querySelector ( ini )

Dalam sintaks ini, ' ini ” merujuk kepada satu atau lebih pemilih CSS.



document.getElementById() : Ia mengembalikan elemen yang mempunyai id yang ditentukan.

Sintaks

dokumen. getElementById ( ID )

Di sini, ' ID ” menunjukkan id elemen sasaran untuk diambil.

indeks terpilih : Sifat ini mendapatkan semula indeks pilihan yang dipilih daripada senarai juntai bawah. The '-1' pilihan menyahpilih semua pilihan.

nodeName : Sifat ini mendapatkan semula nama nod.

kanak-kanak : Sifat ini mengembalikan elemen anak elemen sebagai koleksi.

outerHTML : Sifat ini memperuntukkan atau mendapatkan semula elemen HTML serta atributnya dan teg mula dan tamat.

parentNode : Sifat khusus ini mengambil nod induk unsur atau nod.

Catatan : Perbezaan antara “ parentElement ” dan “ parentNode ” harta ialah harta bekas iaitu, “parentElement” memberikan “ null ” jika nod induk tidak mencerminkan nod elemen.

Contoh 1: Mengakses Elemen Induk melalui Harta 'parentElement' dalam JavaScript

Contoh ini memanggil elemen induk elemen dan memaparkan nama nod (induk)nya apabila butang klik.

Kod HTML


< html >
< badan >
< h1 > parentElement Property dalam JavaScript < / h1 >
< h2 > Pilih Bahasa: < / h2 >
< pilih kelas = 'elemen' >
< pilihan > Ular sawa < / pilihan >
< pilihan > Jawa < / pilihan >
< pilihan > JavaScript < / pilihan >
< / pilih >
< butang onclick = 'displayParent()' kelas = 'butang' > Paparkan Elemen Induk bagi Elemen 'pilihan'. < / butang >
< div kelas = 'temp' >< / div >< / badan >
< html >

Dalam kod ini:

  • Nyatakan yang diberikan “

    ” dan “

    ” elemen yang terdiri daripada tajuk tahap satu dan tahap dua, masing-masing.

  • Selepas itu, buat a “” elemen yang diwakili oleh kelas tertentu yang mengandungi elemen anak selanjutnya iaitu, “ .
  • Sekarang, buat butang yang dikaitkan dengan ' onclick ” acara yang mengubah hala ke 'displayParent()' berfungsi apabila klik butang.
  • Akhir sekali, nyatakan “
    ” elemen di mana hasilnya iaitu, elemen induk yang diakses akan dipaparkan.

Kod CSS

>
badan {
penjajaran teks : pusat ;
warna : #F F F ;
warna latar belakang : kelabu ;
ketinggian : 100% ;
}
.butang {
ketinggian : 2rem ;
jejari sempadan : 2px ;
lebar : 35% ;
margin : 2rem auto ;
paparan : blok ;
warna : #ba0b0b ;
kursor : penunjuk ;
}
.temp {
Saiz huruf : 1.5rem ;
berat fon : berani ;
}
>

Dalam kod CSS di atas:

  • Gayakan keseluruhan halaman web dengan ciri 'text-align', 'background-color' dsb.
  • Begitu juga, gunakan penggayaan pada butang yang dibuat melalui kelasnya dengan melaraskan ketinggian, lebar, paparan, warna, dsb.
  • Akhir sekali, gayakan “ div ” dengan merujuk kepada nama kelasnya di mana elemen induk yang diakses akan dipaparkan.

Kod JavaScript



< skrip >
fungsi paparanIbu bapa ( ) {
adalah dapatkan = dokumen. querySelector ( '.elemen' ) ;
adalah ini = dapatkan . pilihan [ dapatkan . indeks terpilih ] ;
adalah tambahkan = dokumen. querySelector ( '.temp' ) ;
tambahkan. innerHTML = 'Elemen Induk bagi Elemen pilihan ialah -> ' + ini. parentElement . nodeName ;
}
skrip >

Mengikut baris kod ini:

  • Tentukan fungsi 'displayParent()' yang mengakses elemen '