JavaScript is een krachtige scripttaal die programmeurs de mogelijkheid geeft dynamische, interactieve websites te maken. Het vinden van het bovenliggende element van een specifiek element is een veel voorkomende handeling bij het werken met het Document Object Model (DOM).
Hier zullen we verschillende op JavaScript gebaseerde benaderingen bekijken om dit te bereiken.
Het bovenliggende element van een HTML-element kan worden gevonden door het parentNode-attribuut te gebruiken, wat de eenvoudigste methode is. Wanneer een element wordt opgegeven, retourneert dit attribuut het bovenliggende knooppunt van het element in de DOM-boom. Het gebruik van dit attribuut wordt geïllustreerd door het volgende voorbeeld:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
De methode getElementById wordt in het bovenstaande codefragment gebruikt om eerst het onderliggende element op ID te kiezen. Daarna gebruiken we het parentNode-attribuut om het ouderelement toe te wijzen aan de parentElement-variabele.
De eigenschap parentElement gebruiken: De DOM biedt een nuttige eigenschap parentElement die kan worden gebruikt om naast de eigenschap parentNode ook het bovenliggende element van een HTML-element te verkrijgen. De toepassing lijkt sterk op de eerdere techniek:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Met een meer illustratieve en begrijpelijke methode kunnen we hetzelfde resultaat bereiken door het parentElement-attribuut te gebruiken.
Gebruikmakend van de dichtstbijzijnde() methode: De dichtstbijzijnde() methode is een ander effectief hulpmiddel dat door hedendaagse browsers wordt aangeboden.
a b c-nummers
Met behulp van deze techniek kunt u bepalen welk element in de structuur van een CSS-selector de directe voorouder van een element is. Het gebruik van de dichtstbijzijnde() techniek wordt gedemonstreerd in het volgende voorbeeld:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
De functie dichtstbijzijnde() wordt vervolgens aangeroepen in de bovenstaande code en levert een CSS-selector als argument, nadat de methode getElementById is gebruikt om het onderliggende element te selecteren. De eerste voorloper van het element dat overeenkomt met de opgegeven selectie wordt geretourneerd door de functie dichtstbijzijnde().
In dit geval proberen we het element met de klasse 'parent-class', de dichtstbijzijnde voorouder van het kindelement, te vinden.
Traversal-methoden gebruiken: U kunt de DOM-boom omzeilen met behulp van een van de vele traversal-methoden die JavaScript biedt. De methoden parentNode, previousSibling, nextSibling, firstChild en lastChild zijn daar voorbeelden van. Door deze technieken te combineren, kunt u naar het bovenliggende element van een bepaald element gaan. Beschouw ter illustratie het volgende
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
In deze coderegel gebruiken we eerst getElementById om het onderliggende element te kiezen, en vervolgens gebruiken we de eigenschap parentNode om het bovenliggende element te verkrijgen. Met deze traversal-technieken kunt u op en neer in de DOM-structuur navigeren om het vereiste bovenliggende of onderliggende element te vinden.
De eigenschap parentElement gebruiken voor gebeurtenisafhandeling: Wanneer u JavaScript-gebeurtenishandlers gebruikt, kan het nodig zijn om toegang te hebben tot het bovenliggende element van het gebeurtenisdoel. Het parentElement-attribuut in de gebeurtenishandler kan bijvoorbeeld worden gebruikt als u een lijst met knoppen heeft en u actie wilt ondernemen wanneer op een knop op het bovenliggende element wordt geklikt.
Hier is een illustratie:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Met behulp van querySelectorAll kiezen we alle componenten in het bovenstaande codevoorbeeld die de klasse 'button' hebben. Vervolgens is aan elke knop een klikgebeurtenislistener gekoppeld met behulp van de functie forEach.
We gebruiken event.target.parentElement om toegang te krijgen tot het bovenliggende element in de gebeurtenishandler. Als gevolg hiervan kunnen we, wanneer op de knop wordt geklikt, actie ondernemen op het bovenliggende element.
Gebruik maken van de bovenliggende elementeigenschap met dynamische elementen:
Er kunnen zich omstandigheden voordoen waarin u toegang moet hebben tot het bovenliggende element van een nieuw gevormd element als u werkt met dynamisch gegenereerde elementen in uw webtoepassing.
Nadat u het element aan de DOM hebt toegevoegd, kunt u onder bepaalde omstandigheden de bovenliggende Element-eigenschap gebruiken.
Denk ter illustratie eens aan het volgende:
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 } In deze coderegel gebruiken we eerst getElementById om het bovenliggende element te kiezen. Vervolgens maken we met behulp van de appendChild-functie binnen de createNewElement-functie een nieuw element, passen we dit indien nodig aan en voegen we het toe aan het bovenliggende element.
Met behulp van de eigenschap parentElement kunnen we het bovenliggende element van het nieuwe element ophalen nadat het aan de DOM is toegevoegd.
De eigenschap offsetParent gebruiken:
In bepaalde omstandigheden wilt u misschien het element vinden dat de dichtstbijzijnde voorouder van een bepaald element is. U kunt dit bereiken met behulp van de eigenschap offsetParent. Het dichtstbijzijnde voorouderelement met een andere dan statische positie, wat de standaardpositionering is, wordt geretourneerd.
Hier is een illustratie:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
In het bovengenoemde codefragment gebruiken we eerst de getElementById-methode om het onderliggende element te kiezen, en vervolgens wordt het offsetParent-attribuut gebruikt om het dichtstbijzijnde gepositioneerde voorouderelement aan te duiden bij de variabele met de naam positionAncestor.
De eigenschap parentNode gebruiken met verschillende knooppunttypen:
U kunt door de DOM-structuur navigeren en naar de ouder van verschillende soorten knooppunten gaan, zoals tekstknooppunten en commentaarknooppunten, naast het ouderelement van een HTML-element.
U kunt gemakkelijker door de DOM-structuur navigeren door de eigenschap parentNode te gebruiken, die met verschillende knooppunttypen werkt. Denk ter illustratie eens aan het volgende:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
In dit voorbeeld gebruiken we de functie createTextNode om een tekstknooppunt te maken. De eigenschap parentNode wordt vervolgens gebruikt om het bovenliggende element op te halen. Bij het omgaan met ingewikkelde DOM-structuren die een verscheidenheid aan knooppunten bevatten, kan deze strategie nuttig zijn.
De eigenschap parentElement gebruiken met de Shadow DOM:
Mogelijk moet u toegang krijgen tot het bovenliggende element binnen de Shadow DOM-grens als u werkt met Shadow DOM, een webtechnologie die inkapseling van DOM-structuren en CSS-stijlen mogelijk maakt.
In dit geval is de eigenschap parentElement ook van toepassing.
Denk ter illustratie eens aan het volgende:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Het shadowRoot-attribuut van het hostelement wordt in de bovenstaande code gebruikt om eerst de schaduwwortel te verkrijgen. Met behulp van de functie getElementById kiezen we vervolgens het onderliggende element binnen de schaduwwortel op basis van zijn ID.
Met behulp van de eigenschap parentElement kunnen we eindelijk het bovenliggende element ophalen. Dit maakt het voor u mogelijk om toegang te krijgen tot het bovenliggende element, zelfs binnen een Shadow DOM.
Gepositioneerde elementen met de eigenschap offsetParent:
if door Rudyard Kipling regel voor regel uitleg
U kunt de eigenschap offsetParent gebruiken in combinatie met de eigenschappen offsetLeft en offsetTop om het dichtstbijzijnde gepositioneerde bovenliggende element van een bepaald element te lokaliseren als u dat expliciet wilt doen.
Hier is een illustratie:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Met behulp van getElementById kiezen we eerst het doelelement in deze coderegel. Daarna wordt de offsetParent van het target-element gebruikt om de gepositioneerdeAncestor-variabele te initialiseren.
De volgende stap is om te bepalen of de huidige gepositioneerdeAncestor een berekende positie van 'statisch' heeft door een while-lus te gebruiken.
gepositioneerdeAncestor wordt bijgewerkt naar de offsetParent van de huidige gepositioneerdeAncestor als dit het geval is.
Dit proces gaat door totdat we de voorouder vinden die het dichtst bij onze huidige locatie ligt of de top van de DOM-boom bereikt.
U kunt uw vermogen om het bovenliggende element in JavaScript op te halen verder verbeteren door deze extra strategieën en methoden te gebruiken. Deze methoden bieden antwoorden op een reeks problemen, waaronder het omgaan met Shadow DOM, het omgaan met verschillende soorten knooppunten en het lokaliseren van de dichtstbijzijnde voorouder.
Kies een techniek die aan uw unieke eisen voldoet en uw DOM-manipulatievaardigheden verbetert.
Als u nieuwere methoden of functies gebruikt, vergeet dan niet uw code grondig te testen in verschillende browsers om de compatibiliteit te verifiëren.
Je wordt uitgerust met de kennis en vaardigheden om met bovenliggende elementen in JavaScript te werken en dynamische en interactieve online ervaringen op te bouwen nadat je deze concepten goed begrijpt.
U beschikt nu over extra methoden in JavaScript om het bovenliggende element te bereiken.
Als u deze technieken begrijpt, verbetert u uw vermogen om de DOM op de juiste manier aan te passen en ermee te communiceren, of u nu werkt met gebeurtenisafhandeling of dynamische elementen of de dichtstbijzijnde voorouder moet ontdekken.
Selecteer altijd de aanpak die het beste past bij uw unieke gebruiksscenario, waarbij u rekening houdt met browsercompatibiliteit en de precieze behoeften van uw project. Met deze methoden tot uw beschikking beschikt u over de vaardigheden die nodig zijn om de bovenliggende componenten in JavaScript gemakkelijk te verkennen en ermee te werken.