Ako získať prístup k rodičovskému prvku pomocou vlastnosti parentElement HTML DOM

Ako Ziskat Pristup K Rodicovskemu Prvku Pomocou Vlastnosti Parentelement Html Dom



Pri pridávaní viacerých funkcií do modelu objektu dokumentu (DOM) pomocou JavaScriptu vývojár často potrebuje analyzovať priradenie prvku. Dá sa to dosiahnuť protokolovaním nadradeného prvku cieľového prvku (prvkov), čo zjednodušuje tok kódu a formátovanie zahrnutých funkcií na lokalite.

Prehľad obsahu

Čo je vlastnosť „parentElement“ v JavaScripte?

' parentElement ” v JavaScripte načíta prvok, ktorý je rodičom cieľového prvku.

Ako získať/vyvolať rodičovský prvok prostredníctvom vlastnosti parentElement HTML DOM?

K rodičovskému prvku je možné pristupovať pomocou HTML DOM “ parentElement ” nehnuteľnosť s “ nodeName ” alebo načítanie uzla nadradeného prvku namiesto toho cez “ parentNode ' nehnuteľnosť.





Syntax



uzol. parentElement

Návratová hodnota
Táto vlastnosť získava objekt prvku, ktorý predstavuje uzol nadradeného prvku uzla a dáva „ nulový ” ak uzol nezahŕňa rodiča.



Použité spoločné metódy a vlastnosti

document.querySelector() : Táto metóda získa prvý prvok zodpovedajúci selektoru CSS.



Syntax

dokument. querySelector ( toto )

V tejto syntaxi „ toto ” označuje jeden alebo viacero selektorov CSS.



document.getElementById() : Vráti prvok so zadaným id.

Syntax

dokument. getElementById ( id )

Tu, ' id “ označuje ID cieľového prvku, ktorý sa má načítať.

selectedIndex : Táto vlastnosť načíta index vybranej možnosti z rozbaľovacieho zoznamu. The '-1' voľba zruší výber všetkých možností.

nodeName : Táto vlastnosť získava názov uzla.

deti : Táto vlastnosť vráti podradené prvky prvku ako kolekciu.

vonkajší HTML : Táto vlastnosť prideľuje alebo získava prvok HTML, ako aj jeho atribúty a počiatočné a koncové značky.

parentNode : Táto konkrétna vlastnosť načíta nadradený uzol prvku alebo uzla.

Poznámka : Rozdiel medzi „ parentElement “ a „ parentNode vlastnosť je taká, že predchádzajúca vlastnosť, t. j. „parentElement“ dáva „ nulový ” ak nadradený uzol neodráža uzol prvku.

Príklad 1: Prístup k rodičovskému prvku prostredníctvom vlastnosti „parentElement“ v jazyku JavaScript

Tento príklad vyvolá nadradený prvok prvku a po kliknutí na tlačidlo zobrazí názov jeho (nadradeného) uzla.

HTML kód


< html >
< telo >
< h1 > vlastnosť parentElement v JavaScripte < / h1 >
< h2 > Vyberte jazyk: < / h2 >
< vyberte trieda = 'element' >
< možnosť > Python < / možnosť >
< možnosť > Java < / možnosť >
< možnosť > JavaScript < / možnosť >
< / vyberte >
< tlačidlo po kliknutí = 'displayParent()' trieda = 'tlačidlo' > Zobrazte nadradený prvok prvku „možnosť“. < / tlačidlo >
< div trieda = 'teplota' < / div < / telo >
< html >

V tomto kóde:

  • Uveďte dané „

    “ a „

    “ prvky, ktoré obsahujú nadpisy prvej a druhej úrovne.

  • Potom vytvorte a „“ prvok reprezentovaný danou triedou, ktorá obsahuje ďalšie podradené prvky, napr. '' .
  • Teraz vytvorte tlačidlo spojené s „ po kliknutí “, ktorá presmeruje na 'displayParent()' funkciu po kliknutí na tlačidlo.
  • Nakoniec špecifikujte „
    “ prvok, v ktorom sa má zobraziť výsledok, t. j. sprístupnený nadradený prvok.

CSS kód

<štýl >
telo {
zarovnanie textu : stred ;
farba : #fff ;
farba pozadia : sivá ;
výška : 100% ;
}
.tlačidlo {
výška : 2rem ;
hraničný polomer : 2px ;
šírka : 35 % ;
marža : 2rem auto ;
displej : blokovať ;
farba : #ba0b0b ;
kurzor : ukazovateľ ;
}
.tepl {
veľkosť písma : 1,5 rem ;
font-weight : tučný ;
}
>

Vo vyššie uvedenom kóde CSS:

  • Štýl celej webovej stránky pomocou vlastností „text-align“, „background-color“ atď.
  • Podobne aplikujte štýl na vytvorené tlačidlo prostredníctvom jeho triedy úpravou jeho výšky, šírky, zobrazenia, farby atď.
  • Nakoniec upravte štýl „ div ” odkazom na názov svojej triedy, v ktorej sa má zobraziť nadradený prvok, ku ktorému sa pristupuje.

JavaScript kód



< skript >
funkciu displayParent ( ) {
bol dostať = dokument. querySelector ( '.element' ) ;
bol toto = dostať . možnosti [ dostať . selectedIndex ] ;
bol priložiť = dokument. querySelector ( '.temp' ) ;
priložiť. innerHTML = 'Rodičovský prvok prvku možnosti je -> ' + toto. parentElement . nodeName ;
}
skript >

Podľa týchto riadkov kódu:

  • Definujte funkciu 'displayParent()' ktorý pristupuje k prvku „