HTML DOM parentElement Özelliğini Kullanarak Ana Öğeye Nasıl Erişilir

Html Dom Parentelement Ozelligini Kullanarak Ana Ogeye Nasil Erisilir



Geliştiricinin, JavaScript kullanarak Belge Nesnesi Modeline (DOM) birden fazla işlevsellik eklerken sıklıkla öğenin ilişkisini analiz etmesi gerekir. Bu, kod akışını ve siteye dahil edilen özelliklerin biçimlendirmesini kolaylaştıran hedef öğenin/öğelerin ana öğesinin günlüğe kaydedilmesiyle başarılabilir.

İçeriğe Genel Bakış

JavaScript'teki “parentElement” Özelliği nedir?

“ ebeveynElement JavaScript'teki ” özelliği, hedef öğenin üst öğesi olan öğeyi alır.

HTML DOM parentElement Özelliği Aracılığıyla Ana Öğeye Nasıl Erişilir/Çağırılır?

Ana öğeye HTML DOM kullanılarak erişilebilir ' ebeveynElement ” özelliği “ düğümAdı ” özelliği veya bunun yerine ana öğenin düğümünün “ aracılığıyla alınması ebeveynNode ' mülk.





Sözdizimi



düğüm. ebeveynElement

Geri dönüş değeri
Bu özellik, bir düğümün ana öğe düğümünü temsil eden bir öğe nesnesini alır ve şunu verir: hükümsüz ” Düğüm bir ebeveyni içermiyorsa.



Kullanılan Ortak Yöntemler ve Özellikler

document.querySelector() : Bu yöntem, CSS seçiciyle eşleşen ilk öğeyi alır.



Sözdizimi

belge. sorguSeçici ( Bu )

Bu sözdiziminde, “ Bu ” bir veya daha fazla CSS seçiciyi ifade eder.



document.getElementById() : Belirtilen kimliğe sahip öğeyi döndürür.

Sözdizimi

belge. getElementById ( İD )

Burada, ' İD ” getirilecek hedef öğenin kimliğini belirtir.

seçiliIndex : Bu özellik, seçilen seçeneğin indeksini açılır listeden alır. '-1' seçeneği tüm seçeneklerin seçimini kaldırır.

düğümAdı : Bu özellik düğümün adını alır.

çocuklar : Bu özellik, öğenin alt öğelerini koleksiyon olarak döndürür.

dışHTML : Bu özellik, HTML öğesinin yanı sıra niteliklerini ve başlangıç ​​ve bitiş etiketlerini tahsis eder veya alır.

ebeveynNode : Bu özel özellik, bir öğenin veya düğümün üst düğümünü getirir.

Not : “ arasındaki fark ebeveynElement ' Ve ' ebeveynNode ” özelliği, önceki özelliğin, yani “parentElement”in “ hükümsüz ” eğer ana düğüm bir öğe düğümünü yansıtmıyorsa.

Örnek 1: JavaScript'teki “parentElement” Özelliği aracılığıyla Ana Öğeye Erişim

Bu örnek, bir öğenin ana öğesini çağırır ve düğme tıklatıldığında onun (ana) düğüm adını görüntüler.

HTML Kodu


< HTML >
< vücut >
< h1 > JavaScript'te parentElement Özelliği < / h1 >
< h2 > Dili seçin: < / h2 >
< seçme sınıf = 'öğe' >
< seçenek > Python < / seçenek >
< seçenek > Java < / seçenek >
< seçenek > JavaScript < / seçenek >
< / seçme >
< düğme tıklamada = 'displayParent()' sınıf = 'düğme' > 'Seçenek' Öğesinin Ana Öğesini Görüntüle < / düğme >
< div sınıf = 'sıcaklık' >< / div >< / vücut >
< HTML >

Bu kodda:

  • Verilenleri belirtin “

    ” Ve “

    ” sırasıyla birinci düzey ve ikinci düzey başlıkları oluşturan öğeler.

  • Bundan sonra bir oluşturun “” verilen sınıf tarafından temsil edilen ve diğer alt öğeleri içeren öğe; “” .
  • Şimdi “ ile ilişkilendirilmiş bir düğme oluşturun. tıklamada ” etkinliğine yönlendiren olay “displayParent()” düğmeye tıklandığında çalışır.
  • Son olarak şunu belirtin “
    ” sonucun, yani erişilen ana öğenin görüntüleneceği öğe.

CSS Kodu

>
vücut {
Metin hizalama : merkez ;
renk : #ffff ;
arka plan rengi : gri ;
yükseklik : 100% ;
}
.düğme {
yükseklik : 2rem ;
sınır yarıçapı : 2 piksel ;
Genişlik : %35 ;
marj : 2rem Oto ;
görüntülemek : engellemek ;
renk : #ba0b0b ;
imleç : Işaretçi ;
}
.temp {
yazı Boyutu : 1,5rem ;
yazı tipi ağırlığı : gözü pek ;
}
>

Yukarıdaki CSS kodunda:

  • Genel web sayfasını uygulanan 'metin hizalama', 'arka plan rengi' vb. özelliklerle stillendirin.
  • Benzer şekilde, oluşturulan düğmeye yüksekliğini, genişliğini, görüntüsünü, rengini vb. ayarlayarak stilini sınıfı aracılığıyla uygulayın.
  • Son olarak “ div Erişilen ana öğenin görüntüleneceği sınıf adına atıfta bulunarak.

JavaScript Kodu



< senaryo >
işlev ekranEbeveyn ( ) {
öyleydi elde etmek = belge. sorguSeçici ( '.öğe' ) ;
öyleydi Bu = elde etmek . seçenekler [ elde etmek . seçiliIndex ] ;
öyleydi eklemek = belge. sorguSeçici ( '.temp' ) ;
ekleyin. içHTML = 'Seçenek Öğesinin Ana Öğesi -> ' + Bu. ebeveynElement . düğümAdı ;
}
senaryo >

Bu kod satırlarına göre:

  • Fonksiyonu tanımlayın “displayParent()” '