Jak uzyskać dostęp do elementu nadrzędnego za pomocą właściwości HTML DOM parentElement

Jak Uzyskac Dostep Do Elementu Nadrzednego Za Pomoca Wlasciwosci Html Dom Parentelement



Dodając wiele funkcjonalności w Document Object Model (DOM) przy użyciu JavaScript, programista często musi przeanalizować powiązanie elementu. Można to osiągnąć poprzez rejestrowanie elementu nadrzędnego elementów docelowych, co usprawnia przepływ kodu i formatowanie funkcji zawartych w witrynie.

Przegląd zawartości

Co to jest właściwość „parentElement” w JavaScript?

„ Element nadrzędny ” w JavaScript pobiera element będący rodzicem elementu docelowego.

Jak uzyskać dostęp do elementu nadrzędnego/wywołać go za pomocą właściwości HTML DOM parentElement?

Dostęp do elementu nadrzędnego można uzyskać za pomocą HTML DOM „ Element nadrzędny ”nieruchomość z” nazwa węzła ” lub pobranie zamiast tego węzła elementu nadrzędnego poprzez „ węzeł nadrzędny ' nieruchomość.





Składnia



węzeł. Element nadrzędny

Wartość zwracana
Ta właściwość pobiera obiekt elementu, który reprezentuje węzeł elementu nadrzędnego węzła i daje „ zero ”, jeśli węzeł nie zawiera elementu nadrzędnego.



Wykorzystane wspólne metody i właściwości

dokument.querySelector() : Ta metoda pobiera pierwszy element pasujący do selektora CSS.



Składnia

dokument. selektor zapytań ( Ten )

W tej składni „ Ten ” odnosi się do jednego lub większej liczby selektorów CSS.



dokument.getElementById() : Zwraca element o podanym identyfikatorze.

Składnia

dokument. pobierzElementById ( ID )

Tutaj, ' ID ” wskazuje identyfikator elementu docelowego, który ma zostać pobrany.

wybrany indeks : Ta właściwość pobiera indeks wybranej opcji z listy rozwijanej. The „-1” Opcja odznacza wszystkie opcje.

nazwa węzła : Ta właściwość pobiera nazwę węzła.

dzieci : Ta właściwość zwraca elementy podrzędne elementu jako kolekcję.

zewnętrznyHTML : ta właściwość przydziela lub pobiera element HTML, a także jego atrybuty oraz znaczniki początkowe i końcowe.

węzeł nadrzędny : Ta konkretna właściwość pobiera węzeł nadrzędny elementu lub węzła.

Notatka : Różnica pomiędzy „ Element nadrzędny ' I ' węzeł nadrzędny ” jest taka, że ​​poprzednia właściwość, tj. „parentElement”, daje „ zero ”, jeśli węzeł nadrzędny nie odzwierciedla węzła elementu.

Przykład 1: Dostęp do elementu nadrzędnego poprzez właściwość „parentElement” w JavaScript

Ten przykład wywołuje element nadrzędny elementu i wyświetla jego (nadrzędną) nazwę węzła po kliknięciu przycisku.

Kod HTML


< HTML >
< ciało >
< h1 > Właściwość parentElement w JavaScript < / h1 >
< h2 > Wybierz język: < / h2 >
< wybierać klasa = 'element' >
< opcja > Pyton < / opcja >
< opcja > Jawa < / opcja >
< opcja > JavaScript < / opcja >
< / wybierać >
< przycisk na kliknięcie = „wyświetl rodzic()” klasa = 'przycisk' > Wyświetl element nadrzędny elementu „opcja”. < / przycisk >
< div klasa = „temperatura” >< / div >< / ciało >
< HTML >

W tym kodzie:

  • Określ podane „

    ” I „

    ” elementy składające się odpowiednio na nagłówki pierwszego i drugiego poziomu.

  • Następnie utwórz „” element reprezentowany przez daną klasę, który zawiera dalsze elementy potomne, tj. „” .
  • Teraz utwórz przycisk powiązany z „ na kliknięcie ” wydarzenie, które przekierowuje do „wyświetl Rodzic()” działać po kliknięciu przycisku.
  • Na koniec określ „
    ” element, w którym ma zostać wyświetlony wynik, czyli wywołany element nadrzędny.

Kod CSS

>
ciało {
wyrównanie tekstu : Centrum ;
kolor : #fff ;
kolor tła : szary ;
wysokość : 100% ;
}
.przycisk {
wysokość : 2rem ;
promień granicy : 2 piks ;
szerokość : 35% ;
margines : 2rem automatyczny ;
wyświetlacz : blok ;
kolor : #ba0b0b ;
kursor : wskaźnik ;
}
temp {
rozmiar czcionki : 1,5rem ;
grubość czcionki : pogrubiony ;
}
>

W powyższym kodzie CSS:

  • Wystylizuj całą stronę internetową, stosując zastosowane właściwości „wyrównanie tekstu”, „kolor tła” itp.
  • Podobnie zastosuj stylizację do utworzonego przycisku poprzez jego klasę, dostosowując jego wysokość, szerokość, wyświetlacz, kolor itp.
  • Na koniec nadaj styl „ div ” odwołując się do nazwy jej klasy, w której ma być wyświetlany otwierany element nadrzędny.

Kod JavaScript



< scenariusz >
funkcjonować wyświetlaczRodzic ( ) {
był Dostawać = dokument. selektor zapytań ( '.element' ) ;
był Ten = Dostawać . opcje [ Dostawać . wybrany indeks ] ;
był dodać = dokument. selektor zapytań ( „.temp” ) ;
dodać. wewnętrznyHTML = „Element nadrzędny elementu opcji to ->” + Ten. Element nadrzędny . nazwa węzła ;
}
scenariusz >

Zgodnie z tymi liniami kodu:

  • Zdefiniuj funkcję „wyświetl Rodzic()” który uzyskuje dostęp do elementu „