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.
„ 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.
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ą „
„ galimybės “ kolekcija gauna visų „“ elementų rinkinį išskleidžiamajame sąraše ir „ pasirinktasIndeksas “ ypatybė nuskaito pasirinktos parinkties indeksą išskleidžiamajame sąraše.
Galiausiai naudokite „document.querySelector()“ dar kartą, kad pasiektumėte „