Ja dokumenta objekta modelī (DOM), izmantojot JavaScript tiek pievienotas vairākas funkcijas, izstrādātājam bieži ir jāanalizē elementa saistība. To var panākt, reģistrējot mērķa elementa(-u) vecākelementu, kas racionalizē koda plūsmu un vietnē iekļauto līdzekļu formatējumu. Satura pārskats
Kas ir JavaScript rekvizīts “parentElement”?
' vecākuElements ” rekvizīts JavaScript izgūst elementu, kas ir mērķa elementa vecāks.
Kā piekļūt/izsaukt vecāku elementu, izmantojot HTML DOM vecāku elementa īpašumu?
Vecākam elementam var piekļūt, izmantojot HTML DOM ' vecākuElements ' īpašums ar ' nodeName ' rekvizītu vai izgūstot vecākelementa mezglu, izmantojot ' vecākuNode ” īpašums.
VIDEO
Sintakse
vecākuElements
Atdeves vērtība null ”, ja mezglā nav vecāku.
Izmantotās kopējās metodes un īpašības
document.querySelector() : šī metode iegūst pirmo elementu, kas atbilst CSS atlasītājam.
Sintakse
dokumentu. querySelector ( šis )
Šajā sintaksē ' šis ” attiecas uz vienu vai vairākiem CSS atlasītājiem.
document.getElementById() : tas atgriež elementu ar norādīto ID.
Sintakse
dokumentu. getElementById ( id )
Šeit, ' id ” norāda ienesamā mērķa elementa ID.
atlasītsIndekss : šis rekvizīts nolaižamajā sarakstā izgūst atlasītās opcijas indeksu. The '-1' opcija noņem visu opciju atlasi.
nodeName : šis rekvizīts izgūst mezgla nosaukumu.
bērniem : šis rekvizīts atgriež elementa pakārtotos elementus kā kolekciju.
ārējais HTML : šis rekvizīts piešķir vai izgūst HTML elementu, kā arī tā atribūtus un sākuma un beigu tagus.
vecākuNode : šis konkrētais rekvizīts ienes elementa vai mezgla vecāku mezglu.
Piezīme : atšķirība starp “ vecākuElements ' un ' vecākuNode 'īpašums ir tāds, ka bijušais īpašums, t.i., 'parentElement' dod ' null ” ja vecākais mezgls neatspoguļo elementa mezglu.
1. piemērs. Piekļuve vecākajam elementam, izmantojot JavaScript rekvizītu “parentElement”.
Šajā piemērā tiek izsaukts elementa vecākelements un, noklikšķinot uz pogas, tiek parādīts tā (vecākā) mezgla nosaukums.
HTML kods
< html < ķermeni < h1 parentElement īpašums JavaScript < / h1 < h2 Izvēlieties valodu: < / h2 < atlasiet klasē = 'elements' > < opciju Python < / opciju < opciju Java < / opciju < opciju JavaScript < / opciju < / atlasiet < pogu onclick = 'displayParent()' klasē = 'poga' > Parādiet elementa 'opcijas' vecāku elementu < / pogu < div klasē = 'temp' >< / div / ķermeni < html
Šajā kodā:
Norādiet doto “” un “” elementi, kas veido attiecīgi pirmā un otrā līmeņa virsrakstus.
Pēc tam izveidojiet a “ ” elements, ko pārstāv dotā klase, kas satur citus bērnu elementus, t.i., “” .
Tagad izveidojiet pogu, kas saistīta ar “ onclick ” notikumu, kas novirza uz “displayParent()” funkciju, noklikšķinot uz pogas.
Visbeidzot, norādiet “” elements, kurā jāparāda rezultāts, t.i., vecākais elements, kuram piekļūts.
CSS kods
> { teksta līdzināšana : centrs ; krāsa : #fff ; fona krāsa : pelēks ; augstums : 100% ; } { augstums : 2rem ; robeža-rādiuss : 2 pikseļi ; platums : 35% ; starpība : 2rem auto ; displejs : bloķēt ; krāsa : #ba0b0b ; kursors : rādītājs ; } { fonta izmērs : 1,5 rem ; fonta svars : treknrakstā ; } Iepriekš minētajā CSS kodā:
Stilizējiet kopējo tīmekļa lapu, izmantojot lietotās 'teksta līdzināšanas', 'fona krāsas' utt. īpašības.
Tāpat pielietojiet stilu izveidotajai pogai, izmantojot tās klasi, pielāgojot tās augstumu, platumu, displeju, krāsu utt.
Visbeidzot izveidojiet stilu “ div ”, atsaucoties uz tās klases nosaukumu, kurā jāparāda piekļūtais vecāku elements.
JavaScript kods
VIDEO
< skripts > funkciju displayParent ( ) { bija gūt = dokumentu. querySelector ( '.element' ) ; bija šis = gūt . iespējas [ gūt . atlasītsIndekss ] ; bija pievienot = dokumentu. querySelector ( '.temp' ) ; innerHTML = 'Opcijas elementa vecākelements ir ->' + šis. vecākuElements . nodeName ; } skripts >
Saskaņā ar šīm koda rindām:
Definējiet funkciju “displayParent()” kas piekļūst elementam “”, atsaucoties uz tā klasi, izmantojot “document.querySelector()” metodi.
' iespējas ” kolekcija iegūst visu “” elementu kolekciju nolaižamajā sarakstā un “ atlasītsIndekss ” rekvizīts izgūst atlasītās opcijas indeksu nolaižamajā sarakstā.
Visbeidzot izmantojiet “document.querySelector()” metodi vēlreiz, lai piekļūtu elementam “” un pievienotu to elementa “
” vecākajam elementam, izmantojot lietoto “ vecākuElements ' un ' nodeName ” (parāda vecākmezgla nosaukumu) īpašības.
Viss kods
< html < ķermeni < h1 parentElement īpašums JavaScript < / h1 < h2 Izvēlieties valodu: < / h2 < atlasiet klasē = 'elements' > < opciju Python < / opciju < opciju Java < / opciju < opciju JavaScript < / opciju < / atlasiet < pogu onclick = 'displayParent()' klasē = 'poga' > Parādiet elementa 'opcijas' vecāku elementu < / pogu < div klasē = 'temp' >< / div / ķermeni < stils < / stils < skripts < / skripts
Izvade
Šeit var redzēt, ka visu pakārtoto mezglu vecāku elements, t.i., atlasīta opcija no nolaižamās izvēlnes “” tiek atgriezts elements, t.i., ' ATLASĪT ”.
2. piemērs. Piekļuve gan vecāku, gan bērna elementiem, izmantojot JavaScript rekvizītus “parentElement” un “childs”
Šis koda piemērs piekļūst gan konkrēta elementa vecākelementiem, gan pakārtotajiem elementiem.
HTML kods
< html ķermeni div id = 'vecāks' > div id = 'bērns' > h1 / h1 h1 / h1 / div / div / ķermeni / html Šajā koda blokā izveidojiet divus “
” elementus un divus “
”, kas attiecas uz pēdējā “” elementa pakārtotajiem elementiem.
JavaScript kods
< skripts
> ļaut
gūt = dokumentu.
getElementById ( 'bērns' ) ; ļaut vecākiem
= gūt .
vecākuElements ; konsole.
žurnāls ( 'Vecāks elements ->' , vecāks.
ārējais HTML ) ; konsole.
žurnāls ( 'Vecelementa mezgla nosaukums ->' , vecāks.
nodeName ) ; ļaujiet bērniem
= gūt .
bērniem ; priekš ( ļaujiet man
= 0 ; i
< bērniem.
garums ; i
++ ) { konsole.
žurnāls ( `Bērna elements $
{ i
} : `
, bērniem
[ i
] .
ārējais HTML ) ;
}
priekš ( ļaujiet man
= 0 ; i
< bērniem.
garums ; i
++ ) { konsole.
žurnāls ( `Bērna elementa mezgla nosaukums $
{ i
} : `
, bērniem
[ i
] .
nodeName ) ;
}
skripts >
Iepriekš minētā koda skaidrojums ir šāds:
VIDEO
Piekļūstiet pēdējam “” elementam pēc tā “id”, izmantojot
“document.getElementById()” metodi un iegūstiet tās vecākelementu, izmantojot '
vecākuElements ” īpašums.
Tagad parādiet vecāku elementu ar atribūtiem un sākuma un beigu tagus, izmantojot lietoto “ ārējais HTML ” īpašums.
Atgrieziet arī vecākelementa nosaukumu, t.i., mezgla nosaukumu, izmantojot ' nodeName ” īpašums.
Pēc tam piekļūstiet elementa bērniem, izmantojot rekvizītu “bērni”.
Pielietojiet ' priekš ” cilpa, lai atkārtotu visus pakārtotos elementus un atgrieztu tos ar tagiem, izmantojot apspriesto “outerHTML” rekvizītu.
Tāpat vēlreiz izmantojiet cilpu “for”, lai atgrieztu arī bērnu elementu mezglu nosaukumus.
Viss kods
< html < ķermeni < div id = 'vecāks' > < div id = 'bērns' > < h1 Pirmais bērna elements
< / h1 < h1 Otrais bērna elements
< / h1 < / div < / div
< / ķermeni
< / html
< skripts let get = document.getElementById('bērns');
let parent = get.parentElement;
console.log('Parent Element -> ', parent.outerHTML);
console.log('Vecelementa mezgla nosaukums -> ', vecāks.mezgla nosaukums);
ļaut bērniem = iegūt.bērni;
for(lai i =0; i
< bērni.garums; i++ ) { console.log ( `Bērna elements $ { i } : `, bērni [ i ] .outerHTML ) ; } priekš ( ļaujiet man = 0 ; i < bērni.garums; i++ ) { console.log ( `Bērna elementa mezgls Vārds $ { i } : `, bērni [ i ] .nodeName ) ; } < / skripts
Izvade
Šis rezultāts nozīmē, ka mērķa elementa vecāk- un pakārtotie elementi tiek attiecīgi parādīti detalizēti (kopā ar mezglu nosaukumiem).
3. piemērs. Piekļuve vecākajam elementam, izmantojot rekvizītu “parentNode”.
Šajā demonstrācijā var izsaukt konkrēta elementa vecākelementu un pēc tam tiks izgūts arī šī konkrētā elementa vecākais elements, tādējādi radot ligzdotu darbību. To var panākt, izmantojot ' vecākuNode ” rekvizītu, kas ienes elementa vecākmezglu.
HTML kods
< html ķermeni div id = 'vecāks' > ol id = 'temp' > ka id = 'tempbērns' >Python< / ka ka / ka ka / ka / ol / div / ķermeni / html Šeit izveidojiet elementu “
”, kas papildus ietver elementus “
(ordered list)” un “(list items)” ar norādītajiem ID.
JavaScript kods
< skripts > gūt = dokumentu. getElementById ( 'tempbērns' ) ; = gūt . vecākuNode ; žurnāls ( 'Li' vecākelementa mezgls-> ' , vecāks ) ; = dokumentu. getElementById ( 'temp' ) ; = iegūt2. vecākuNode ; žurnāls ( 'Ol-> vecāku elementa mezgls' , vecāks2 ) ; skripts >
Pamatojoties uz šo koda fragmentu, veiciet tālāk norādītās darbības.
Izsauciet elementu “ ”, izmantojot “ getElementById() ' metodi, piekļūstiet tā vecākelementa mezglam, izmantojot ' vecākuNode ” rekvizītu un parādīt vecāku mezglu.
Tāpat tagad izsauciet parādīto vecākmezglu, t.i., “” vecāku, atkārtojot to pašu metodoloģiju.
Viss kods
< html < ķermeni < div id = 'vecāks' > < ol id = 'temp' > < ka id = 'tempbērns' > Python < / ka < ka Java < / ka < ka JavaScript < / ka < / ol < / div < skripts < / skripts < / ķermeni < / html
Izvade
Šis rezultāts nozīmē, ka vecāku mezgli abos gadījumos tiek attiecīgi parādīti.
Secinājums
Vecākelementam var piekļūt, izmantojot HTML DOM ' vecākuElements 'īpašums kopā ar ' nodeName ” rekvizītu vai vecāku mezgla izgūšanu, izmantojot rekvizītu “parentNode”. Tomēr, lai tā vietā piekļūtu bērna elementam, izmantojiet “ bērns ” īpašums.