JavaScript er et potent scriptsprog, der giver programmører mulighed for at lave dynamiske, interaktive websteder. At finde et specifikt elements overordnede element er en hyppig operation, når du arbejder med Document Object Model (DOM).
Her vil vi se på en række JavaScript-baserede tilgange til at opnå dette.
Det overordnede element i et HTML-element kan findes ved at bruge parentNode-attributten, som er den nemmeste metode. Når et element leveres, returnerer denne attribut elementets overordnede node i DOM-træet. Brugen af denne attribut illustreres af følgende eksempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
GetElementById-metoden bruges i kodestykket ovenfor for først at vælge det underordnede element efter ID. Derefter bruger vi parentNode-attributten til at tildele det overordnede element til parentElement-variablen.
Brug af parentElement-egenskaben: DOM tilbyder en nyttig parentElement-egenskab, der kan bruges til at hente det overordnede element i et HTML-element ud over parentNode-egenskaben. Ansøgningen ligner meget den tidligere teknik:
software test
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Med en mere illustrativ og forståelig metode kan vi opnå det samme resultat ved at bruge parentElement-attributten.
Brug af den nærmeste() metode: Den nærmeste() metode er et andet effektivt værktøj, der tilbydes af moderne browsere.
Ved at bruge denne teknik kan du bestemme, hvilket element i et CSS-vælgertræ, der er et elements direkte forfader. Brug af den nærmeste() teknik er demonstreret i følgende eksempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Den nærmeste()-funktion kaldes derefter i koden ovenfor og leverer en CSS-vælger som et argument, efter at getElementById-metoden er blevet brugt til at vælge det underordnede element. Den første forfader til elementet, der matcher den angivne markering, returneres af funktionen nærmest().
I dette tilfælde er elementet med klassen 'forælder-klasse', der er underelementets nærmeste forfader, det, vi forsøger at finde.
Brug af gennemkørselsmetoder: Du kan gå rundt i DOM-træet ved at bruge en af de mange gennemløbsmetoder, som JavaScript tilbyder. Metoderne parentNode, previousSibling, nextSibling, firstChild og lastChild er blandt dem. Du kan gå til det overordnede element for et bestemt element ved at kombinere disse teknikker. Som illustration kan du overveje følgende
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
I denne kodelinje bruger vi først getElementById til at vælge det underordnede element, og derefter bruger vi egenskaben parentNode til at hente dets overordnede element. Disse traverseringsteknikker giver dig mulighed for at navigere op og ned i DOM-træet for at finde det påkrævede overordnede eller underordnede element.
Brug af parentElement-egenskaben til hændelseshåndtering: Når du bruger JavaScript-hændelseshandlere, kan det være nødvendigt at have adgang til hændelsesmålets overordnede element. parentElement-attributten i hændelseshandleren kan f.eks. bruges, hvis du har en liste over knapper, og du vil foretage dig noget, når der klikkes på en knap på det overordnede element.
Her er en illustration:
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 at bruge querySelectorAll vælger vi alle komponenter i kodeeksemplet ovenfor, der har klassen 'knap'. Derefter har hver knap en klikhændelseslytter tilknyttet ved hjælp af forEach-funktionen.
ikke null i js
Vi bruger event.target.parentElement til at få adgang til det overordnede element inde i hændelseshandleren. Som et resultat, når der klikkes på knappen, er vi i stand til at handle på det overordnede element.
Brug af den overordnede elementegenskab med dynamiske elementer:
Du kan komme ind i situationer, hvor du har brug for at få adgang til det overordnede element i et nydannet element, hvis du arbejder med dynamisk genererede elementer i din webapplikation.
Efter at have tilføjet elementet til DOM, kan du bruge den overordnede Element-egenskab under visse omstændigheder.
Som illustration kan du overveje følgende:
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 kodelinje bruger vi først getElementById til at vælge det overordnede element. Derefter, ved at bruge appendChild-funktionen inde i createNewElement-funktionen, opretter vi et nyt element, ændrer det efter behov og tilføjer det til det overordnede element.
Ved at bruge egenskaben parentElement kan vi få det nye elements overordnede element efter at have tilføjet det til DOM.
Brug af offsetParent-egenskaben:
I nogle tilfælde vil du måske finde det element, der er et bestemt elements nærmeste forfader. Du kan opnå dette ved at bruge egenskaben offsetParent. Det nærmeste forfaderelement med en anden position end statisk, som er standardpositioneringen, returneres.
Her er en illustration:
personalevalgskommission betydning
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
I det førnævnte kodestykke bruger vi først getElementById-metoden til at vælge underordnet element, og derefter bruges offsetParent-attributten til at udpege det nærmeste positionerede forfaderelement til variablen med navnet positionedAncestor.
Brug af parentNode-egenskaben med forskellige nodetyper:
Du kan navigere i DOM-træet og komme til forælderen af flere nodetyper, såsom tekstnoder og kommentarnoder, udover at komme til det overordnede element i et HTML-element.
Du kan lettere navigere i DOM-træet ved at bruge egenskaben parentNode, som fungerer med forskellige nodetyper. Som illustration kan du overveje følgende:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
I dette eksempel bruger vi funktionen createTextNode til at producere en tekstnode. Egenskaben parentNode bruges derefter til at hente det overordnede element. Når man beskæftiger sig med indviklede DOM-strukturer, der indeholder en række forskellige noder, kan denne strategi være nyttig.
Brug af parentElement-egenskaben med Shadow DOM:
Du skal muligvis få adgang til det overordnede element inden for Shadow DOM-grænsen, hvis du arbejder med Shadow DOM, en webteknologi, der muliggør indkapsling af DOM-træer og CSS-stile.
æble emojis på Android
I dette tilfælde er parentElement-egenskaben også gældende.
Som illustration kan du overveje følgende:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
ShadowRoot-attributten for værtselementet bruges i koden ovenfor til først at erhverve shadow-roden. Ved at bruge funktionen getElementById vælger vi derefter det underordnede element i skyggeroden baseret på dets ID.
Ved at bruge egenskaben parentElement kan vi endelig hente det overordnede element. Dette gør det muligt for dig at få adgang til det overordnede element selv inde i en Shadow DOM.
Placerede elementer med offsetParent-egenskaben:
Du kan bruge egenskaben offsetParent sammen med egenskaberne offsetLeft og offsetTop til at finde det nærmeste placerede forfaderelement for et givet element, hvis du udtrykkeligt har brug for det.
Her er en illustration:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Ved at bruge getElementById vælger vi først målelementet i denne kodelinje. Derefter bruges offsetParent for målelementet til at initialisere positionedAncestor-variablen.
Det næste trin er at bestemme, om den aktuelle positionerede Ancestor har en beregnet position som 'statisk' ved at bruge en while-løkke.
positionedAncestor opdateres til offsetParent for den aktuelle positionedAncestor, hvis den gør det.
Denne proces fortsætter, indtil vi finder den forfader, der er tættest på vores nuværende placering, eller når toppen af DOM-træet.
Du kan yderligere forbedre din evne til at hente det overordnede element i JavaScript ved at bruge disse ekstra strategier og metoder. Disse metoder giver svar på en række problemer, herunder håndtering af Shadow DOM, håndtering af forskellige nodetyper og lokalisering af den nærmeste forfader.
Vælg en teknik, der opfylder dine unikke krav og forbedrer dine DOM-manipulationsevner.
Hvis du bruger nyere metoder eller funktioner, så glem ikke at teste din kode grundigt i en række forskellige browsere for at bekræfte kompatibiliteten.
Du vil blive udstyret med viden og evner til at arbejde med overordnede elementer i JavaScript og opbygge dynamiske og interaktive onlineoplevelser, når du har et solidt greb om disse koncepter.
dato konvertere til streng
Du har nu ekstra metoder tilgængelige for dig i JavaScript for at nå det overordnede element.
Forståelse af disse teknikker vil forbedre din evne til korrekt at ændre og interagere med DOM, uanset om du arbejder med hændelseshåndtering, dynamiske elementer eller har brug for at finde den nærmeste forfader.
Vælg altid den tilgang, der passer bedst til din unikke use case, og husk browserkompatibilitet og dit projekts præcise behov. Med disse metoder til din rådighed, vil du være udstyret med de færdigheder, der kræves til at udforske og arbejde med de overordnede komponenter i JavaScript med lethed.