JavaScript ir spēcīga skriptu valoda, kas programmētājiem sniedz iespēju izveidot dinamiskas, interaktīvas tīmekļa vietnes. Konkrēta elementa vecākelementa atrašana ir bieža darbība, strādājot ar dokumenta objekta modeli (DOM).
Šeit mēs apskatīsim dažādas uz JavaScript balstītas pieejas, lai to paveiktu.
HTML elementa vecāku elementu var atrast, izmantojot atribūtu parentNode, kas ir vienkāršākā metode. Kad elements tiek piegādāts, šis atribūts atgriež elementa vecākmezglu DOM kokā. Šī atribūta lietošanu ilustrē šāds piemērs:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metode getElementById tiek izmantota iepriekš minētajā koda fragmentā, lai vispirms izvēlētos pakārtoto elementu pēc ID. Pēc tam mēs izmantojam atribūtu parentNode, lai vecāku elementu piešķirtu mainīgajam parentElement.
Izmantojot vecāku elementa rekvizītu: DOM piedāvā noderīgu vecākuElement rekvizītu, ko var izmantot, lai papildus vecākuNode rekvizītam iegūtu HTML elementa vecāku elementu. Lietojumprogramma ir ļoti līdzīga iepriekšējai tehnikai:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Izmantojot ilustratīvāku un saprotamāku metodi, mēs varam sasniegt tādu pašu rezultātu, izmantojot atribūtu parentElement.
Izmantojot tuvāko() metodi: Vistuvākā() metode ir vēl viens efektīvs rīks, ko piedāvā mūsdienu pārlūkprogrammas.
Izmantojot šo paņēmienu, varat noteikt, kurš elements CSS atlasītāja kokā ir elementa tiešais priekštecis. Tuvākā() tehnikas izmantošana ir parādīta šajā piemērā:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Pēc tam, kad bērnelementa atlasei ir izmantota metode getElementById, iepriekš minētajā kodā tiek izsaukta funkcija tuvākā () un kā arguments tiek nodrošināts CSS atlasītājs. Elementa pirmo priekšteci, kas atbilst norādītajai atlasei, atgriež tuvākā () funkcija.
Šajā gadījumā mēs cenšamies atrast elementu ar klasi “parent-class”, kas ir bērna elementa tuvākais priekštecis.
Šķērsošanas metožu izmantošana: Varat apiet DOM koku, izmantojot vienu no daudzajām JavaScript piedāvātajām šķērsošanas metodēm. Starp tām ir metodes parentNode, previousSibling, nextSibling, firstChild un lastChild. Apvienojot šīs metodes, varat pāriet uz konkrēta elementa vecākelementu. Kā ilustrāciju apsveriet tālāk minēto
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Šajā koda rindā mēs vispirms izmantojam getElementById, lai izvēlētos pakārtoto elementu, un pēc tam izmantojam rekvizītu parentNode, lai iegūtu tā vecākelementu. Šīs šķērsošanas metodes ļauj pārvietoties uz augšu un uz leju DOM kokā, lai atrastu vajadzīgo vecāk- vai pakārtoto elementu.
Īpašuma parentElement izmantošana notikumu apstrādei: Izmantojot JavaScript notikumu apdarinātājus, var būt nepieciešama piekļuve notikuma mērķa vecākajam elementam. Atribūtu parentElement notikumu apdarinātājā var izmantot, piemēram, ja jums ir pogu saraksts un vēlaties veikt kādu darbību, kad uz vecākelementa tiek noklikšķināts uz pogas.
Šeit ir ilustrācija:
Ubuntu uzbūve ir būtiska
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Izmantojot querySelectorAll, mēs izvēlamies visus iepriekš koda parauga komponentus, kuriem ir klase “poga”. Pēc tam katrai pogai ir pievienots klikšķu notikumu uztvērējs, izmantojot funkciju forEach.
Mēs izmantojam event.target.parentElement, lai piekļūtu vecākelementam notikumu apdarinātājā. Tā rezultātā, noklikšķinot uz pogas, mēs varam veikt darbības ar vecākelementu.
Vecāka elementa īpašuma izmantošana ar dinamiskajiem elementiem:
Ja strādājat ar dinamiski ģenerētiem elementiem savā tīmekļa lietojumprogrammā, varat nokļūt situācijā, kad jums ir jāpiekļūst jaunizveidota elementa vecākajam elementam.
Pēc elementa pievienošanas DOM noteiktos apstākļos varat izmantot vecāka elementa rekvizītu.
Kā ilustrāciju apsveriet tālāk norādīto.
pavediens.iznīcināt
const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } Šajā koda rindā mēs vispirms izmantojam getElementById, lai izvēlētos vecāku elementu. Pēc tam, izmantojot funkciju appendChild funkcijā createNewElement, mēs izveidojam jaunu elementu, modificējam to pēc vajadzības un pievienojam vecākajam elementam.
Izmantojot rekvizītu parentElement, mēs varam iegūt jaunā elementa vecāku elementu pēc tā pievienošanas DOM.
OffsetParent rekvizīta izmantošana:
Dažos gadījumos jūs varētu vēlēties atrast elementu, kas ir konkrēta elementa tuvākais priekštecis. To var paveikt, izmantojot rekvizītu offsetParent. Tiek atgriezts tuvākais priekšteča elements, kura pozīcija nav statiska, kas ir noklusējuma pozicionēšana.
Šeit ir ilustrācija:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Iepriekš minētajā koda fragmentā mēs vispirms izmantojam metodi getElementById, lai izvēlētos pakārtoto elementu, un pēc tam atribūts offsetParent tiek izmantots, lai apzīmētu mainīgajam ar nosaukumu positionedAncestor vistuvāk novietoto priekšteča elementu.
Izmantojot vecākuNode rekvizītu ar dažādiem mezglu veidiem:
Varat pārvietoties DOM kokā un piekļūt vairāku veidu mezgliem, piemēram, teksta mezgliem un komentāru mezgliem, papildus HTML elementa vecākajam elementam.
Varat vieglāk pārvietoties DOM kokā, izmantojot rekvizītu parentNode, kas darbojas ar dažādiem mezglu veidiem. Kā ilustrāciju apsveriet tālāk norādīto.
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
Šajā piemērā mēs izmantojam funkciju createTextNode, lai izveidotu teksta mezglu. Rekvizīts parentNode tiek izmantots, lai izgūtu vecāku elementu. Strādājot ar sarežģītām DOM struktūrām, kas satur dažādus mezglus, šī stratēģija var būt noderīga.
Parastā elementa rekvizīta izmantošana ar Shadow DOM:
Ja strādājat ar Shadow DOM — tīmekļa tehnoloģiju, kas nodrošina DOM koku un CSS stilu iekapsulēšanu, iespējams, jums būs jāpiekļūst vecākajam elementam Shadow DOM robežās.
Šajā gadījumā ir piemērojams arī rekvizīts parentElement.
Kā ilustrāciju apsveriet tālāk norādīto.
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Saimnieka elementa atribūts shadowRoot tiek izmantots iepriekš minētajā kodā, lai vispirms iegūtu ēnas sakni. Izmantojot funkciju getElementById, mēs izvēlamies bērna elementu ēnas saknē, pamatojoties uz tā ID.
Izmantojot rekvizītu parentElement, mēs beidzot varam izgūt vecāku elementu. Tas ļauj piekļūt vecākajam elementam pat Shadow DOM iekšpusē.
Pozicionētie elementi ar nobīdiVecāk īpašums:
Varat izmantot rekvizītu offsetParent kopā ar rekvizītiem offsetLeft un offsetTop, lai atrastu konkrētā elementa tuvāko pozicionēto priekšteča elementu, ja tas ir skaidri jādara.
Šeit ir ilustrācija:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Izmantojot getElementById, mēs vispirms izvēlamies mērķa elementu šajā koda rindā. Pēc tam mērķa elementa offsetParent tiek izmantots, lai inicializētu positionedAncestor mainīgo.
Nākamais solis ir noteikt, vai pašreiz pozicionētajam priekštecim ir aprēķinātā “statiskā” pozīcija, izmantojot kamēr cilpu.
positionedAncestor tiek atjaunināts uz pašreizējā pozicionētāAncestor offsetParent, ja tā notiek.
Šis process turpinās, līdz atrodam priekšteci, kas ir vistuvāk mūsu pašreizējai atrašanās vietai, vai sasniedzam DOM koka virsotni.
Izmantojot šīs papildu stratēģijas un metodes, varat vēl vairāk uzlabot savu spēju izgūt galveno elementu JavaScript. Šīs metodes piedāvā atbildes uz dažādām problēmām, tostarp Shadow DOM apstrādi, dažādu veidu mezglu risināšanu un tuvākā priekšteča atrašanu.
Izvēlieties tehniku, kas atbilst jūsu unikālajām prasībām un uzlabo jūsu DOM manipulācijas prasmes.
Ja izmantojat jaunākas metodes vai līdzekļus, neaizmirstiet rūpīgi pārbaudīt savu kodu dažādās pārlūkprogrammās, lai pārbaudītu saderību.
Jūs iegūsit zināšanas un spējas strādāt ar JavaScript vecāku elementiem un veidot dinamisku un interaktīvu tiešsaistes pieredzi, kad būsit stingri pārzinājis šīs koncepcijas.
Tagad jums ir pieejamas papildu metodes JavaScript, lai sasniegtu vecākelementu.
primārās atslēgas saliktā atslēga
Izpratne par šīm metodēm uzlabos jūsu spēju pareizi modificēt un mijiedarboties ar DOM neatkarīgi no tā, vai strādājat ar notikumu apstrādi, dinamiskiem elementiem vai jums ir jāatklāj tuvākais pozicionētais priekštecis.
Vienmēr izvēlieties pieeju, kas vislabāk atbilst jūsu unikālajam lietošanas gadījumam, paturot prātā pārlūkprogrammas saderību un precīzas jūsu projekta vajadzības. Izmantojot šīs jūsu rīcībā esošās metodes, jūs iegūsit prasmes, kas nepieciešamas, lai viegli izpētītu un strādātu ar JavaScript vecākkomponentiem.