JavaScript er et kraftig skriptspråk som gir programmerere muligheten til å lage dynamiske, interaktive nettsider. Å finne et spesifikt elements overordnede element er en hyppig operasjon når du arbeider med Document Object Model (DOM).
Her skal vi se på en rekke JavaScript-baserte tilnærminger for å oppnå dette.
Det overordnede elementet til et HTML-element kan bli funnet ved å bruke parentNode-attributtet, som er den enkleste metoden. Når et element leveres, returnerer dette attributtet elementets overordnede node i DOM-treet. Bruk av dette attributtet er illustrert av følgende eksempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
GetElementById-metoden brukes i kodebiten ovenfor for først å velge det underordnede elementet etter ID. Etter det bruker vi parentNode-attributtet for å tilordne det overordnede elementet til parentElement-variabelen.
Bruke parentElement-egenskapen: DOM tilbyr en nyttig parentElement-egenskap som kan brukes til å hente det overordnede elementet til et HTML-element i tillegg til parentNode-egenskapen. Applikasjonen er veldig lik den tidligere teknikken:
programvaretesting
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Med en mer illustrativ og forståelig metode kan vi oppnå det samme resultatet ved å bruke parentElement-attributtet.
Bruk av den nærmeste () metoden: Den nærmeste ()-metoden er et annet effektivt verktøy som tilbys av moderne nettlesere.
Ved bruk av denne teknikken kan du bestemme hvilket element i et CSS-velgertre som er et elements direkte stamfar. Bruk av nærmeste()-teknikken er demonstrert i følgende eksempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Den nærmeste()-funksjonen kalles deretter i koden ovenfor, og gir en CSS-velger som et argument, etter at getElementById-metoden har blitt brukt til å velge det underordnede elementet. Den første stamfaren til elementet som samsvarer med det spesifiserte utvalget, returneres av funksjonen nærmest().
I dette tilfellet er elementet med klassen 'foreldre-klasse' som er underordnet elements nærmeste stamfar det vi prøver å finne.
Bruk av gjennomgangsmetoder: Du kan gå rundt DOM-treet ved å bruke en av de mange traverseringsmetodene som JavaScript tilbyr. Metodene parentNode, previousSibling, nextSibling, firstChild og lastChild er blant dem. Du kan gå til det overordnede elementet til et bestemt element ved å kombinere disse teknikkene. Tenk på følgende som en illustrasjon
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
I denne kodelinjen bruker vi først getElementById for å velge underordnet element, og deretter bruker vi egenskapen parentNode for å få det overordnede elementet. Disse traverseringsteknikkene lar deg navigere opp og ned i DOM-treet for å finne det nødvendige overordnede eller underordnede elementet.
Bruk av parentElement-egenskapen for hendelseshåndtering: Når du bruker JavaScript hendelsesbehandlere, kan det være nødvendig å ha tilgang til det overordnede elementet til hendelsesmålet. parentElement-attributtet i hendelsesbehandleren kan brukes, for eksempel hvis du har en liste over knapper og du ønsker å gjøre noe når en knapp klikkes på det overordnede elementet.
Her er en illustrasjon:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Ved å bruke querySelectorAll velger vi alle komponenter i kodeeksemplet ovenfor som har klassen 'knapp'. Deretter har hver knapp en klikkhendelseslytter ved å bruke forHver-funksjonen.
ikke null i js
Vi bruker event.target.parentElement for å få tilgang til det overordnede elementet inne i hendelsesbehandleren. Som et resultat, når knappen klikkes, kan vi iverksette tiltak på det overordnede elementet.
Bruk av den overordnede elementegenskapen med dynamiske elementer:
Du kan komme inn i situasjoner der du trenger tilgang til det overordnede elementet til et nyopprettet element hvis du jobber med dynamisk genererte elementer i nettapplikasjonen din.
Etter å ha lagt til elementet i DOM, kan du bruke den overordnede Element-egenskapen under visse omstendigheter.
Tenk på følgende som en illustrasjon:
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 } I denne kodelinjen bruker vi først getElementById for å velge det overordnede elementet. Deretter, ved å bruke appendChild-funksjonen i createNewElement-funksjonen, lager vi et nytt element, endrer det etter behov og legger det til det overordnede elementet.
Ved å bruke egenskapen parentElement kan vi få det nye elementets overordnede element etter å ha lagt det til DOM.
Bruk av offsetParent-egenskapen:
I noen tilfeller vil du kanskje finne det elementet som er et bestemt elements nærmeste stamfar. Du kan oppnå dette ved å bruke offsetParent-egenskapen. Det nærmeste stamfarelementet med en annen posisjon enn statisk, som er standardposisjoneringen, returneres.
Her er en illustrasjon:
personell valgkommisjon betydning
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
I den nevnte kodebiten bruker vi først getElementById-metoden for å velge underordnet element, og deretter brukes offsetParent-attributtet for å angi det nærmeste posisjonerte forfedreelementet til variabelen kalt positionedAncestor.
Bruke parentNode-egenskapen med forskjellige nodetyper:
Du kan navigere i DOM-treet og komme til overordnet til flere nodetyper, for eksempel tekstnoder og kommentarnoder, i tillegg til å komme til overordnet element til et HTML-element.
Du kan lettere navigere i DOM-treet ved å bruke egenskapen parentNode, som fungerer med forskjellige nodetyper. Tenk på følgende som en illustrasjon:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
I dette eksemplet bruker vi createTextNode-funksjonen til å produsere en tekstnode. Egenskapen parentNode brukes deretter til å hente det overordnede elementet. Når du arbeider med intrikate DOM-strukturer som inneholder en rekke noder, kan denne strategien være nyttig.
Bruk av parentElement-egenskapen med Shadow DOM:
Du må kanskje få tilgang til det overordnede elementet innenfor Shadow DOM-grensen hvis du jobber med Shadow DOM, en nettteknologi som muliggjør innkapsling av DOM-trær og CSS-stiler.
java åpen fil
I dette tilfellet er parentElement-egenskapen også aktuelt.
Tenk på følgende som en illustrasjon:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
ShadowRoot-attributtet til vertselementet brukes i koden ovenfor for først å skaffe skyggeroten. Ved å bruke getElementById-funksjonen velger vi deretter det underordnede elementet i skyggeroten basert på IDen.
Ved å bruke egenskapen parentElement kan vi endelig hente det overordnede elementet. Dette gjør det mulig for deg å få tilgang til det overordnede elementet selv inne i en Shadow DOM.
Plasserte elementer med offsetParent-egenskapen:
Du kan bruke egenskapen offsetParent sammen med egenskapene offsetLeft og offsetTop for å finne det nærmeste posisjonerte stamfarelementet til et gitt element hvis du eksplisitt trenger å gjøre det.
Her er en illustrasjon:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Ved å bruke getElementById velger vi først målelementet i denne kodelinjen. Deretter brukes offsetParent til målelementet til å initialisere den posisjonerte Ancestor-variabelen.
Det neste trinnet er å finne ut om den gjeldende posisjonerte Ancestor har en beregnet posisjon 'statisk' ved å bruke en while-løkke.
positionedAncestor oppdateres til offsetParent til gjeldende positionedAncestor hvis den gjør det.
Denne prosessen fortsetter til vi finner stamfaren som er nærmest vår nåværende plassering eller når toppen av DOM-treet.
Du kan ytterligere forbedre din evne til å hente det overordnede elementet i JavaScript ved å bruke disse ekstra strategiene og metodene. Disse metodene gir svar på en rekke problemer, inkludert håndtering av Shadow DOM, håndtering av forskjellige nodetyper og lokalisering av nærmeste stamfar.
Velg en teknikk som oppfyller dine unike krav og forbedrer DOM-manipulasjonsferdighetene dine.
Hvis du bruker nyere metoder eller funksjoner, ikke glem å teste koden din grundig i en rekke nettlesere for å bekrefte kompatibiliteten.
Du vil bli utstyrt med kunnskap og evner til å jobbe med overordnede elementer i JavaScript og bygge dynamiske og interaktive nettopplevelser etter at du har en god forståelse av disse konseptene.
linux-vert
Du har nå ekstra metoder tilgjengelig for deg i JavaScript for å nå det overordnede elementet.
Forståelse av disse teknikkene vil forbedre din evne til å modifisere og samhandle med DOM på riktig måte, enten du jobber med hendelseshåndtering, dynamiske elementer eller trenger å finne den nærmeste posisjonerte stamfaren.
Velg alltid den tilnærmingen som passer best for ditt unike bruksområde, med tanke på nettleserkompatibilitet og de nøyaktige behovene til prosjektet ditt. Med disse metodene til din disposisjon, vil du være utstyrt med ferdighetene som kreves for å utforske og arbeide med overordnede komponenter i JavaScript med letthet.