A szülőelem elérése a HTML DOM szülőelem tulajdonság használatával

A Szuloelem Elerese A Html Dom Szuloelem Tulajdonsag Hasznalataval



Miközben több funkciót is hozzáfűz a dokumentumobjektum-modellhez (DOM) JavaScript használatával, a fejlesztőnek gyakran elemeznie kell az elem társítását. Ez a célelem(ek) szülőelemének naplózásával érhető el, ami leegyszerűsíti a kódfolyamot és a webhelyen szereplő szolgáltatások formázását.

Tartalom áttekintése

Mi az a „parentElement” tulajdonság a JavaScriptben?

A ' szülőElement ” tulajdonság a JavaScriptben lekéri azt az elemet, amely a célelem szülője.

Hogyan lehet elérni/meghívni a szülő elemet a HTML DOM szülőelem tulajdonságon keresztül?

A szülő elem a HTML DOM segítségével érhető el szülőElement ' ingatlan a ' nodeName ” tulajdonságot, vagy a szülőelem csomópontjának lekérése helyett a „ szülőcsomópont ' ingatlan.





Szintaxis



csomópont. szülőElement

Visszatérési érték
Ez a tulajdonság lekér egy elem objektumot, amely egy csomópont szülőelem csomópontját képviseli, és megadja a ' nulla ” ha a csomópont nem tartalmaz szülőt.



Használt általános módszerek és tulajdonságok

document.querySelector() : Ez a metódus megkapja a CSS-választónak megfelelő első elemet.



Szintaxis

dokumentum. querySelector ( ez )

Ebben a szintaxisban a „ ez ” egy vagy több CSS-választóra utal.



document.getElementById() : A megadott azonosítóval rendelkező elemet adja vissza.

Szintaxis

dokumentum. getElementById ( id )

Itt, ' id ” jelzi a célelem lekérendő azonosítóját.

kiválasztottIndex : Ez a tulajdonság lekéri a kiválasztott opció indexét a legördülő listából. A '-1' opció törli az összes opció kijelölését.

nodeName : Ez a tulajdonság lekéri a csomópont nevét.

gyermekek : Ez a tulajdonság gyűjteményként adja vissza az elem gyermekelemeit.

külső HTML : Ez a tulajdonság lefoglalja vagy lekéri a HTML elemet, valamint annak attribútumait és kezdő és záró címkéit.

szülőcsomópont : Ez az adott tulajdonság lekéri egy elem vagy egy csomópont szülőcsomópontját.

jegyzet : A különbség a „ szülőElement ” és „ szülőcsomópont ” tulajdonság az, hogy az előbbi tulajdonság, azaz a „parentElement” a „ nulla ” ha a szülőcsomópont nem elemcsomópontot tükröz.

1. példa: A szülőelem elérése a JavaScript „parentElement” tulajdonságán keresztül

Ez a példa meghívja egy elem szülőelemét, és megjeleníti annak (szülő) csomópontjának nevét a gombra kattintva.

HTML kód


< html >
< test >
< h1 > parentElement tulajdonság JavaScriptben < / h1 >
< h2 > Válassza ki a nyelvet: < / h2 >
< válassza ki osztály = 'elem' >
< választási lehetőség > Piton < / választási lehetőség >
< választási lehetőség > Jáva < / választási lehetőség >
< választási lehetőség > JavaScript < / választási lehetőség >
< / válassza ki >
< gomb kattintásra = 'displayParent()' osztály = 'gomb' > Jelenítse meg az „opció” elem szülő elemét < / gomb >
< div osztály = 'hőmérséklet' >< / div >< / test >
< html >

Ebben a kódban:

  • Adja meg az adott '

    ' és '

    ' elemek, amelyek az első, illetve a második szintű címsort tartalmazzák.

  • Ezt követően hozzon létre a „” az adott osztály által képviselt elem, amely tartalmazza a további gyermekelemeket, pl. „” .
  • Most hozzon létre egy gombot, amely a „ kattintásra ” esemény, amely átirányít a 'displayParent()' funkciót a gomb kattintásakor.
  • Végül adja meg a '
    ' azt az elemet, amelyben az eredményt, azaz az elért szülőelemet meg kell jeleníteni.

CSS kód

>
test {
szöveg igazítás : központ ;
szín : #fff ;
háttérszín : szürke ;
magasság : 100% ;
}
.gomb {
magasság : 2rem ;
határ-sugár : 2px ;
szélesség : 35% ;
árrés : 2rem auto ;
kijelző : Blokk ;
szín : #ba0b0b ;
kurzor : mutató ;
}
.hőmérséklet {
betűméret : 1,5 rem ;
font-weight : bátor ;
}
>

A fenti CSS-kódban:

  • Stílusozza a teljes weboldalt az alkalmazott „szöveg igazítás”, „háttérszín” stb. tulajdonságokkal.
  • Hasonlóképpen alkalmazza a stílust a létrehozott gombra az osztályán keresztül a magasság, a szélesség, a kijelző, a szín stb. beállításával.
  • Végül alakítsa ki a „ div ” hivatkozással az osztály nevére, amelyben az elért szülőelemet meg kell jeleníteni.

JavaScript kód



< forgatókönyv >
funkció displayParent ( ) {
volt kap = dokumentum. querySelector ( '.elem' ) ;
volt ez = kap . lehetőségek [ kap . kiválasztottIndex ] ;
volt mellékel = dokumentum. querySelector ( '.temp' ) ;
mellékel. innerHTML = 'Az opció elem szülőeleme ->' + ez. szülőElement . nodeName ;
}
forgatókönyv >

Ezen kódsorok szerint:

  • Határozza meg a függvényt 'displayParent()' amely az osztályára hivatkozva éri el a „