Kui lisate JavaScripti kasutades Document Object Model (DOM) mitu funktsiooni, peab arendaja sageli analüüsima elemendi seost. Seda saab saavutada sihtelemendi(te) emaelemendi logimisega, mis lihtsustab koodivoogu ja saidi kaasatud funktsioonide vormindamist. Sisu ülevaade
Mis on JavaScripti atribuut 'parentElement'?
' vanemElement ” atribuut JavaScriptis hangib elemendi, mis on sihtelemendi vanem.
Kuidas pääseda juurde/kutsuda põhielemendile HTML DOM-i emaelemendi atribuudi kaudu?
Emaelemendile pääseb juurde HTML DOM-i abil vanemElement ' kinnisvara koos ' nodeName ' atribuuti või hankides selle asemel lähteelemendi sõlme ' parentNode ” vara.
VIDEO
Süntaks
vanemElement
Tagastusväärtus null ”, kui sõlm ei sisalda vanemat.
Kasutatud levinud meetodid ja omadused
document.querySelector() : see meetod hangib esimese elemendi, mis vastab CSS-i valijale.
Süntaks
dokument. querySelector ( sel )
Selles süntaksis ' sel ” viitab ühele või mitmele CSS-valijale.
document.getElementById() : tagastab määratud ID-ga elemendi.
Süntaks
dokument. getElementById ( id )
Siin, ' id ” näitab tootava sihtelemendi ID-d.
valitudIndeks : see atribuut hangib ripploendist valitud valiku indeksi. The '-1' valik tühistab kõik valikud.
nodeName : see atribuut hangib sõlme nime.
lapsed : see atribuut tagastab elemendi alamelemendid kogumina.
välimine HTML : see atribuut eraldab või hangib HTML-elemendi, samuti selle atribuudid ning algus- ja lõpumärgendid.
parentNode : see konkreetne atribuut toob elemendi või sõlme emasõlme.
Märge : erinevus ' vanemElement ” ja „ parentNode ' omadus on see, et endine omadus, st 'parentElement' annab ' null ” kui vanemsõlm ei kajasta elemendi sõlme.
Näide 1: Juurdepääs emaelemendile JavaScripti atribuudi „parentElement” kaudu
See näide kutsub esile elemendi emaelemendi ja kuvab nupu klõpsamisel selle (vanema) sõlme nime.
HTML-kood
< html < keha < h1 parentElement atribuut JavaScriptis < / h1 < h2 Valige keel: < / h2 < vali klass = 'element' > < valik Python < / valik < valik Java < / valik < valik JavaScript < / valik < / vali < nuppu onclick = 'displayParent()' klass = 'nupp' > Kuvage 'valikulise' elemendi emaelement < / nuppu < div klass = 'temp' >< / div / keha < html
Selles koodis:
Täpsustage antud '' ja '' elemendid, mis koosnevad vastavalt esimese ja teise taseme pealkirjadest.
Pärast seda looge a '' element, mida esindab antud klass, mis sisaldab täiendavaid alamelemente, st '' .
Nüüd looge nupp, mis on seotud ' onclick ” sündmus, mis suunab aadressile 'displayParent()' funktsiooni nupu klõpsamisel.
Lõpuks täpsustage '' element, milles tulemus, st juurdepääsetav emaelement, kuvatakse.
CSS-kood
> { teksti joondamine : Keskus ; värvi : #fff ; taustavärv : hall ; kõrgus : 100% ; } { kõrgus : 2rem ; piiriraadius : 2 pikslit ; laius : 35% ; marginaal : 2rem auto ; kuva : blokk ; värvi : #ba0b0b ; kursor : osuti ; } { fondi suurus : 1,5 rem ; font-weight : julge ; } >
Ülaltoodud CSS-koodis:
Stiilige üldine veebileht kasutatud „teksti joondamise”, „taustavärvi” jne omadustega.
Samuti rakendage loodud nupule stiil selle klassi kaudu, kohandades selle kõrgust, laiust, kuva, värvi jne.
Lõpuks kujundage ' div ', viidates selle klassi nimele, milles kuvatakse juurdepääsetav emaelement.
JavaScripti kood
VIDEO
< stsenaarium
> funktsiooni displayParent
( ) { oli saada = dokument.
querySelector ( '.element' ) ; oli sel
= saada .
valikuid [ saada .
valitudIndeks ] ; oli lisama
= dokument.
querySelector ( '.temp' ) ; lisama.
sisemine HTML = 'Valikuelemendi emaelement on ->' + sel.
vanemElement .
nodeName ;
}
stsenaarium >
Nende koodiridade järgi:
Määratlege funktsioon 'displayParent()' mis pääseb juurde elemendile „”, viidates selle klassile 'document.querySelector()' meetod.
' valikuid ” kollektsiooni kogub kõik ripploendis olevad „” elemendid ja „ valitudIndeks ” atribuut hangib ripploendi jaoks valitud valiku indeksi.
Lõpuks kasutage 'document.querySelector()' meetod uuesti, et pääseda juurde elemendile „” ja lisada see elemendi „
” emaelemendiga rakendatud „ vanemElement ” ja „ nodeName ” (kuvab emasõlme nime) atribuudid.
Kogu kood
< html < keha < h1 parentElement atribuut JavaScriptis < / h1 < h2 Valige keel: < / h2 < vali klass = 'element' > < valik Python < / valik < valik Java < / valik < valik JavaScript < / valik < / vali < nuppu onclick = 'displayParent()' klass = 'nupp' > Kuvage 'valikulise' elemendi emaelement < / nuppu < div klass = 'temp' >< / div / keha < stiilis < / stiilis < stsenaarium < / stsenaarium
Väljund
Siin on näha, et kõigi alamsõlmede lähteelement, st valitud suvand rippmenüüst '' element tagastatakse, st ' VALI ”.
Näide 2: Juurdepääs nii ema- kui ka lapseelementidele JavaScriptis atribuutide „parentElement” ja „childs” kaudu
Järgmises koodinäites pääseb juurde nii konkreetse elemendi ülem- kui ka alamelementidele.
HTML-kood
< html keha div id = 'vanem' > div id = 'laps' > h1 / h1 h1 / h1 / div / div / keha / html Looge selles koodiplokis kaks elementi '
' ja kaks '
' elementi, mis viitavad viimase '' elemendi alamelementidele.
JavaScripti kood
< stsenaarium
> lase
saada = dokument.
getElementById ( 'laps' ) ; las vanem
= saada .
vanemElement ; konsool.
logi ( 'Vanemelement ->' , lapsevanem.
välimine HTML ) ; konsool.
logi ( 'Ülemelemendi sõlme nimi ->' , lapsevanem.
nodeName ) ; las lapsed
= saada .
lapsed ; jaoks ( las ma
= 0 ; i
< lapsed.
pikkus ; i
++ ) { konsool.
logi ( `Lapselement $
{ i
} : `
, lapsed
[ i
] .
välimine HTML ) ;
}
jaoks ( las ma
= 0 ; i
< lapsed.
pikkus ; i
++ ) { konsool.
logi ( `Alamelemendi sõlme nimi $
{ i
} : `
, lapsed
[ i
] .
nodeName ) ;
}
stsenaarium >
Ülaltoodud koodi selgitus on järgmine:
VIDEO
Juurdepääs viimasele „” elemendile selle „id” abil, kasutades
'document.getElementById()' meetod ja hankige selle emaelement '
vanemElement ” vara.
Nüüd kuvage ülemelement atribuutidega ning algus- ja lõppmärgenditega rakendatud ' välimine HTML ” vara.
Samuti tagastage emaelemendi nimi, st sõlme nimi, kasutades ' nodeName ” vara.
Pärast seda pääsete juurde elemendi lastele, kasutades atribuuti 'lapsed'.
Rakenda ' jaoks ” silmus, et itereerida kõiki alamelemente ja tagastada need koos siltidega käsitletud atribuudi „outerHTML” kaudu.
Samamoodi kasutage alamelementide sõlmenimede tagastamiseks uuesti tsüklit 'for'.
Kogu kood
< html < keha < div id = 'vanem' > < div id = 'laps' > < h1 Esimene lapse element
< / h1 < h1 Teine lapse element
< / h1 < / div < / div
< / keha
< / html
< stsenaarium let get = document.getElementById('laps');
let parent = get.parentElement;
console.log('Parent Element -> ', parent.outerHTML);
console.log('Parent Element Node Name -> ', parent.nodeName);
lase lastel = saada.lapsed;
for(olgu i =0; i
< lapsed.pikkus; i++ ) { console.log ( `Lapselement $ { i } : `, lapsed [ i ] .outerHTML ) ; } jaoks ( las ma = 0 ; i < lapsed.pikkus; i++ ) { console.log ( `Lapselemendi sõlm Nimi $ { i } : `, lapsed [ i ] .nodeName ) ; } < / stsenaarium
Väljund
See tulemus tähendab, et sihtelemendi ülem- ja alamelemendid kuvatakse vastavalt üksikasjalikult (koos sõlmede nimedega).
Näide 3: Juurdepääs emaelemendile atribuudi „parentNode” abil
Selles demonstratsioonis saab käivitada konkreetse elemendi emaelemendi ja seejärel tuuakse ka selle konkreetse elemendi emaelement, mille tulemuseks on pesastatud käitumine. Seda saab saavutada ' parentNode ” atribuut, mis toob elemendi ülemsõlme.
HTML-kood
< html keha div id = 'vanem' > ol id = 'temp' > et id = 'templaps' >Python< / et et / et et / et / ol / div / keha / html Siin looge element '
', mis sisaldab lisaks '
(ordered list)' ja '(loendiüksused)' elemente, millel on antud ID.
JavaScripti kood
< stsenaarium > saada = dokument. getElementById ( 'templaps' ) ; = saada . parentNode ; logi ( 'Li-> emaelemendi sõlm' , lapsevanem ) ; = dokument. getElementById ( 'temp' ) ; = saada2. parentNode ; logi ( 'Ol-> emaelemendi sõlm' , vanem2 ) ; stsenaarium >
Selle koodilõigu põhjal tehke alltoodud toimingud.
Kutsuge element ' ' nupu ' getElementById() ' meetodil, pääsete juurde selle emaelemendi sõlmele, kasutades ' parentNode ” atribuut ja kuvada ülemsõlme.
Samamoodi kutsuge nüüd sama metoodikat korrates välja kuvatud vanemsõlme, st '' vanem.
Kogu kood
< html < keha < div id = 'vanem' > < ol id = 'temp' > < et id = 'templaps' > Python < / et < et Java < / et < et JavaScript < / et < / ol < / div < stsenaarium < / stsenaarium < / keha < / html
Väljund
See tulemus tähendab, et mõlemal juhul kuvatakse emasõlmed vastavalt.
Järeldus
Emaelemendile pääseb juurde HTML DOM-i abil vanemElement ' vara koos ' nodeName ” atribuuti või emasõlme toomist atribuudi „parentNode” kaudu. Selle asemel alamelemendile juurde pääsemiseks kasutage aga laps ” vara.