JavaScript är ett kraftfullt skriptspråk som ger programmerare möjligheten att skapa dynamiska, interaktiva webbplatser. Att hitta ett specifikt elements överordnade element är en frekvent operation när man arbetar med Document Object Model (DOM).
Här kommer vi att titta på en mängd olika JavaScript-baserade metoder för att åstadkomma detta.
stoppning css
Det överordnade elementet för ett HTML-element kan hittas genom att använda attributet parentNode, vilket är den enklaste metoden. När ett element tillhandahålls returnerar detta attribut elementets överordnade nod i DOM-trädet. Att använda detta attribut illustreras av följande exempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metoden getElementById används i kodavsnittet ovan för att först välja det underordnade elementet efter ID. Efter det använder vi parentNode-attributet för att tilldela parent-elementet till parentElement-variabeln.
Använda parentElement-egenskapen: DOM erbjuder en användbar parentElement-egenskap som kan användas för att erhålla det överordnade elementet för ett HTML-element utöver egenskapen parentNode. Applikationen är mycket lik den tidigare tekniken:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Med en mer illustrativ och begriplig metod kan vi uppnå samma resultat genom att använda parentElement-attributet.
Använder metoden närmast(): Metoden closest() är ett annat effektivt verktyg som erbjuds av samtida webbläsare.
Med hjälp av denna teknik kan du bestämma vilket element i en CSS-väljares träd som är ett elements direkta förfader. Att använda tekniken närmaste() visas i följande exempel:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Den närmaste()-funktionen anropas sedan i koden ovan, och tillhandahåller en CSS-väljare som ett argument, efter att metoden getElementById har använts för att välja det underordnade elementet. Den första förfadern till elementet som matchar det angivna urvalet returneras av funktionen closest().
I det här fallet är elementet med klassen 'förälder-klass' som är det underordnade elementets närmaste förfader det vi försöker hitta.
Använda genomgångsmetoder: Du kan gå runt DOM-trädet med en av de många genomgångsmetoder som JavaScript erbjuder. Metoderna parentNode, previousSibling, nextSibling, firstChild och lastChild är bland dem. Du kan gå till det överordnade elementet för ett visst element genom att kombinera dessa tekniker. Som en illustration, överväg följande
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
I denna kodrad använder vi först getElementById för att välja det underordnade elementet, och sedan använder vi egenskapen parentNode för att erhålla dess överordnade element. Dessa genomgångstekniker låter dig navigera upp och ner i DOM-trädet för att hitta det nödvändiga överordnade eller underordnade elementet.
Använda parentElement-egenskapen för händelsehantering: När du använder JavaScript-händelsehanterare kan det vara nödvändigt att ha tillgång till händelsemålets överordnade element. parentElement-attributet i händelsehanteraren kan användas, till exempel om du har en lista med knappar och du vill vidta någon åtgärd när en knapp klickas på det överordnade elementet.
Här är 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 }); }); Med querySelectorAll väljer vi alla komponenter i kodexemplet ovan som har klassen 'knapp'. Sedan har varje knapp en klickhändelselyssnare kopplad med funktionen forEach.
Vi använder event.target.parentElement för att få tillgång till det överordnade elementet i händelsehanteraren. Som ett resultat, när knappen klickas, kan vi vidta åtgärder på det överordnade elementet.
Använda den överordnade elementegenskapen med dynamiska element:
Du kan hamna i situationer där du behöver komma åt det överordnade elementet för ett nybildat element om du arbetar med dynamiskt genererade element i din webbapplikation.
Efter att ha lagt till elementet i DOM kan du använda den överordnade elementegenskapen under vissa omständigheter.
Som en illustration kan du tänka på följande:
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 denna kodrad använder vi först getElementById för att välja det överordnade elementet. Sedan, med hjälp av appendChild-funktionen i createNewElement-funktionen, skapar vi ett nytt element, modifierar det vid behov och lägger till det i det överordnade elementet.
Genom att använda egenskapen parentElement kan vi få det nya elementets överordnade element efter att ha lagt till det i DOM.
Använda offsetParent-egenskapen:
Under vissa omständigheter kanske du vill hitta det element som är ett visst elements närmast placerade förfader. Du kan åstadkomma detta med egenskapen offsetParent. Det närmaste förfaderelementet med en annan position än statisk, vilket är standardpositioneringen, returneras.
Här är en illustration:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
I det ovannämnda kodavsnittet använder vi först metoden getElementById för att välja det underordnade elementet, och sedan används attributet offsetParent för att ange det närmast positionerade förfaderelementet till variabeln med namnet positionedAncestor.
Använda egenskapen parentNode med olika nodtyper:
Du kan navigera i DOM-trädet och komma till föräldern för flera nodtyper, såsom textnoder och kommentarnoder, förutom att komma till det överordnade elementet för ett HTML-element.
Du kan lättare navigera i DOM-trädet genom att använda egenskapen parentNode, som fungerar med olika nodtyper. Som en illustration kan du tänka på följande:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
I det här exemplet använder vi funktionen createTextNode för att skapa en textnod. Egenskapen parentNode används sedan för att hämta det överordnade elementet. När man hanterar invecklade DOM-strukturer som innehåller en mängd olika noder kan denna strategi vara till hjälp.
Använda parentElement-egenskapen med Shadow DOM:
Du kan behöva komma åt det överordnade elementet inom Shadow DOM-gränsen om du arbetar med Shadow DOM, en webbteknologi som möjliggör inkapsling av DOM-träd och CSS-stilar.
tat full form
I det här fallet är parentElement-egenskapen också tillämplig.
Som en illustration kan du tänka på följande:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
ShadowRoot-attributet för värdelementet används i koden ovan för att först skaffa skuggroten. Med hjälp av getElementById-funktionen väljer vi sedan det underordnade elementet inom skuggroten baserat på dess ID.
Med hjälp av egenskapen parentElement kan vi äntligen hämta det överordnade elementet. Detta gör det möjligt för dig att komma åt det överordnade elementet även inuti en Shadow DOM.
Positionerade element med offsetParent-egenskapen:
Du kan använda egenskapen offsetParent i kombination med egenskaperna offsetLeft och offsetTop för att lokalisera det närmaste placerade förfaderelementet för ett givet element om du uttryckligen behöver göra det.
Här är en illustration:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Med getElementById väljer vi först målelementet i denna kodrad. Därefter används offsetParent för målelementet för att initiera positionedAncestor-variabeln.
Nästa steg är att avgöra om den aktuella positionerade Ancestor har en beräknad position som 'statisk' genom att använda en while-loop.
positionedAncestor uppdateras till offsetParent för den aktuella positionedAncestor om den gör det.
Denna process fortsätter tills vi hittar den förfader som är närmast vår nuvarande plats eller når toppen av DOM-trädet.
Du kan ytterligare förbättra din förmåga att hämta det överordnade elementet i JavaScript genom att använda dessa extra strategier och metoder. Dessa metoder erbjuder svar på en rad problem, inklusive hantering av Shadow DOM, hantering av olika nodtyper och lokalisering av närmaste förfader.
Välj en teknik som uppfyller dina unika krav och förbättrar dina DOM-manipulationsfärdigheter.
Om du använder nyare metoder eller funktioner, glöm inte att noggrant testa din kod i en mängd olika webbläsare för att verifiera kompatibiliteten.
Du kommer att vara utrustad med kunskap och förmåga att arbeta med överordnade element i JavaScript och bygga dynamiska och interaktiva onlineupplevelser efter att du har ett fast grepp om dessa koncept.
Du har nu extra metoder tillgängliga för dig i JavaScript för att nå det överordnade elementet.
Att förstå dessa tekniker kommer att förbättra din förmåga att korrekt modifiera och interagera med DOM, oavsett om du arbetar med händelsehantering, dynamiska element eller behöver upptäcka den närmast placerade förfadern.
Välj alltid det tillvägagångssätt som bäst passar ditt unika användningsfall, med tanke på webbläsarkompatibilitet och de exakta behoven i ditt projekt. Med dessa metoder till ditt förfogande kommer du att vara utrustad med de färdigheter som krävs för att utforska och arbeta med överordnade komponenter i JavaScript med lätthet.