Kaip pasiekti pagrindinį elementą naudojant HTML DOM pirminio elemento ypatybę

Kaip Pasiekti Pagrindini Elementa Naudojant Html Dom Pirminio Elemento Ypatybe



Pridedant kelias funkcijas prie dokumento objekto modelio (DOM) naudojant „JavaScript“, kūrėjas dažnai turi analizuoti elemento susiejimą. Tai galima pasiekti registruojant pagrindinį tikslinio elemento (-ų) elementą, kuris supaprastina kodo srautą ir įtrauktų funkcijų formatavimą svetainėje.

Turinio apžvalga

Kas yra „JavaScript“ ypatybė „parentElement“?

„ tėvoElementas ” ypatybė „JavaScript“ nuskaito elementą, kuris yra tikslinio elemento pirminis elementas.

Kaip pasiekti / iškviesti pagrindinį elementą per HTML DOM pirminio elemento nuosavybę?

Pirminį elementą galima pasiekti naudojant HTML DOM ' tėvoElementas “ turtas su “ mazgoPavadinimas “ ypatybę arba nuskaitant pirminio elemento mazgą per „ parentNode ' nuosavybė.





Sintaksė



mazgas. tėvoElementas

Grąžinimo vertė
Ši savybė nuskaito elemento objektą, vaizduojantį pagrindinį mazgo elemento mazgą ir suteikia „ nulinis “, jei mazgas neapima pirminio.



Naudojami bendri metodai ir savybės

document.querySelector() : Šis metodas gauna pirmąjį elementą, atitinkantį CSS parinkiklį.



Sintaksė

dokumentas. querySelector ( tai )

Šioje sintaksėje „ tai “ reiškia vieną ar kelis CSS parinkiklius.



document.getElementById() : grąžina elementą su nurodytu ID.

Sintaksė

dokumentas. getElementById ( id )

Čia, ' id “ nurodo tikslinio elemento ID, kurį reikia gauti.

pasirinktasIndeksas : ši nuosavybė nuskaito pasirinktos parinkties indeksą iš išskleidžiamojo sąrašo. The '-1' parinktis panaikina visų parinkčių pasirinkimą.

mazgoPavadinimas : ši ypatybė nuskaito mazgo pavadinimą.

vaikai : ši ypatybė grąžina antrinius elemento elementus kaip kolekciją.

išorinis HTML : ši nuosavybė priskiria arba nuskaito HTML elementą, taip pat jo atributus ir pradžios bei pabaigos žymas.

parentNode : ši konkreti ypatybė paima pagrindinį elemento arba mazgo mazgą.

Pastaba : skirtumas tarp „ tėvoElementas “ ir „ parentNode “ savybė yra ta, kad buvusi nuosavybė, ty „parentElement“ suteikia „ nulinis “, jei pirminis mazgas neatspindi elemento mazgo.

1 pavyzdys: prieiga prie pagrindinio elemento per „JavaScript“ ypatybę „parentElement“.

Šiame pavyzdyje iškviečiamas pirminis elemento elementas ir paspaudus mygtuką parodomas jo (pirminio) mazgo pavadinimas.

HTML kodas


< html >
< kūnas >
< h1 > parentElement ypatybė „JavaScript“. < / h1 >
< h2 > Pasirinkite kalbą: < / h2 >
< pasirinkite klasė = 'elementas' >
< variantas > Python < / variantas >
< variantas > Java < / variantas >
< variantas > JavaScript < / variantas >
< / pasirinkite >
< mygtuką paspaudus = 'displayParent()' klasė = 'mygtukas' > Rodyti „parinkties“ elemento pagrindinį elementą < / mygtuką >
< div klasė = 'temp.' >< / div >< / kūnas >
< html >

Šiame kode:

  • Nurodykite duotąją „

    “ ir „

    “ elementus, kurie sudaro atitinkamai pirmojo ir antrojo lygio antraštes.

  • Po to sukurkite a „“ elementas, atstovaujamas nurodytos klasės, kurioje yra kiti antriniai elementai, t. y. „“ .
  • Dabar sukurkite mygtuką, susietą su „ paspaudus “ įvykis, kuris nukreipia į „displayParent()“ funkcija spustelėjus mygtuką.
  • Galiausiai nurodykite „
    “ elementas, kuriame turi būti rodomas rezultatas, ty pasiekiamas pirminis elementas.

CSS kodas

>
kūnas {
teksto lygiavimas : centras ;
spalva : #fff ;
fono spalva : pilka ;
aukščio : 100 % ;
}
.mygtukas {
aukščio : 2rem ;
pasienio spindulys : 2px ;
plotis : 35 % ;
marža : 2rem automatinis ;
ekranas : blokas ;
spalva : #ba0b0b ;
žymeklį : rodyklė ;
}
.temp {
šrifto dydis : 1,5 rem ;
šrifto svoris : drąsus ;
}
>

Aukščiau pateiktame CSS kode:

  • Stilizuokite bendrą tinklalapį naudodami pritaikytas „teksto lygiavimo“, „fono spalvos“ ir tt ypatybes.
  • Taip pat pritaikykite stilių sukurtam mygtukui per jo klasę, koreguodami jo aukštį, plotį, ekraną, spalvą ir kt.
  • Galiausiai sukurkite stilių „ div “, nurodant jos klasės pavadinimą, kuriame turi būti rodomas pasiekiamas pirminis elementas.

JavaScript kodas



< scenarijus >
funkcija displayParent ( ) {
buvo gauti = dokumentas. querySelector ( '.elementas' ) ;
buvo tai = gauti . galimybės [ gauti . pasirinktasIndeksas ] ;
buvo pridėti = dokumentas. querySelector ( '.temp' ) ;
pridėti. vidinis HTML = 'Parinkties elemento pagrindinis elementas yra ->' + tai. tėvoElementas . mazgoPavadinimas ;
}
scenarijus >

Pagal šias kodo eilutes:

  • Apibrėžkite funkciją „displayParent()“ kuris pasiekia elementą „