Pääelementin käyttäminen HTML DOM -emoelementtiominaisuuden avulla

Paaelementin Kayttaminen Html Dom Emoelementtiominaisuuden Avulla



Kun lisäät useita toimintoja Document Object Model (DOM) JavaScriptin avulla, kehittäjän on usein analysoitava elementin yhteys. Tämä voidaan saavuttaa kirjaamalla kohdeelementin (kohdeelementtien) yläelementti, mikä virtaviivaistaa koodinkulkua ja sivuston sisältämien ominaisuuksien muotoilua.

Sisällön yleiskatsaus

Mikä on JavaScriptin 'parentElement'-ominaisuus?

' vanhempiElement ” -ominaisuus JavaScriptissä noutaa elementin, joka on kohdeelementin ylätaso.

Kuinka käyttää/kutsua pääelementtiä HTML DOM -emäelementtiominaisuuden kautta?

Pääelementtiin pääsee käsiksi HTML DOM:lla ' vanhempiElement ' kiinteistö ' solmunNimi '-ominaisuutta tai noutamalla sen sijaan pääelementin solmun '' parentNode ” omaisuutta.



Syntaksi



solmu. vanhempiElementti

Palautusarvo
Tämä ominaisuus hakee elementtiobjektin, joka edustaa solmun pääelementtisolmua ja antaa ' tyhjä ', jos solmu ei sisällä emoa.



Käytettiin yleisiä menetelmiä ja ominaisuuksia

document.querySelector() : Tämä menetelmä saa ensimmäisen elementin, joka vastaa CSS-valitsinta.



Syntaksi

asiakirja. querySelector ( Tämä )

Tässä syntaksissa ' Tämä ” viittaa yhteen tai useampaan CSS-valitsimeen.



document.getElementById() : Se palauttaa elementin, jolla on määritetty tunnus.

Syntaksi

asiakirja. getElementById ( id )

Täällä, ' id ' osoittaa noudettavan kohdeelementin tunnuksen.

valittu Hakemisto : Tämä ominaisuus hakee valitun vaihtoehdon indeksin avattavasta luettelosta. The '-1' vaihtoehto poistaa kaikki valinnat.

solmunNimi : Tämä ominaisuus hakee solmun nimen.

lapset : Tämä ominaisuus palauttaa elementin alielementit kokoelmana.

ulkoinen HTML : Tämä ominaisuus varaa tai hakee HTML-elementin sekä sen attribuutit ja aloitus- ja lopputunnisteet.

parentNode : Tämä tietty ominaisuus hakee elementin tai solmun pääsolmun.

Huomautus : Ero ' vanhempiElementti ' ja ' parentNode 'ominaisuus on, että entinen ominaisuus eli 'parentElement' antaa ' tyhjä ', jos pääsolmu ei heijasta elementtisolmua.

Esimerkki 1: Pääelementin käyttö JavaScriptin 'parentElement'-ominaisuuden kautta

Tämä esimerkki kutsuu elementin pääelementin ja näyttää sen (emo)solmun nimen painiketta napsauttamalla.

HTML-koodi


< html >
< kehon >
< h1 > parentElement-ominaisuus JavaScriptissä < / h1 >
< h2 > Valitse kieli: < / h2 >
< valitse luokkaa = 'elementti' >
< vaihtoehto > Python < / vaihtoehto >
< vaihtoehto > Java < / vaihtoehto >
< vaihtoehto > JavaScript < / vaihtoehto >
< / valitse >
< -painiketta klikkaamalla = 'displayParent()' luokkaa = 'painike' > Näytä 'optio'-elementin yläelementti < / -painiketta >
< div luokkaa = 'lämpö' >< / div >< / kehon >
< html >

Tässä koodissa:

  • Määritä annettu '

    ' ja '

    ' elementit, jotka sisältävät tason yksi ja tason kaksi otsikot, vastaavasti.

  • Luo sen jälkeen a '' tietyn luokan edustama elementti, joka sisältää muita lapsielementtejä, esim. '' .
  • Luo nyt painike, joka liittyy ' klikkaamalla 'tapahtuma, joka ohjaa osoitteeseen 'displayParent()' toimintoa napin painalluksella.
  • Lopuksi täsmennä '
    ' elementti, jossa tulos eli käytetty pääelementti näytetään.

CSS-koodi

>
kehon {
tekstin tasaus : keskusta ;
väri : #F F F ;
taustaväri : harmaa ;
korkeus : 100 % ;
}
.painiketta {
korkeus : 2rem ;
raja-säde : 2px ;
leveys : 35 % ;
marginaali : 2rem auto ;
näyttö : lohko ;
väri : #ba0b0b ;
kohdistin : osoitin ;
}
.temp {
Fonttikoko : 1,5 rem ;
fontin paino : lihavoitu ;
}
>

Yllä olevassa CSS-koodissa:

  • Tyyliä koko verkkosivu käyttämällä 'text-align', 'background-color' jne. ominaisuuksia.
  • Samoin käytä tyyliä luotuun painikkeeseen sen luokan kautta säätämällä sen korkeutta, leveyttä, näyttöä, väriä jne.
  • Tyyli lopuksi ' div ” viittaamalla sen luokan nimeen, jossa käytetty pääelementti tulee näyttää.

JavaScript-koodi

< käsikirjoitus >
toiminto displayParent ( ) {
oli saada = asiakirja. querySelector ( '.element' ) ;
oli Tämä = saada . vaihtoehtoja [ saada . valittu Hakemisto ] ;
oli liittää = asiakirja. querySelector ( '.temp' ) ;
liittää. innerHTML = 'Vaihtoehtoelementin yläelementti on ->' + Tämä. vanhempiElement . solmunNimi ;
}
käsikirjoitus >

Näiden koodirivien mukaan:

  • Määritä funktio 'displayParent()' joka käyttää '