Het begrijpen van de DOM is essentieel in uw carrière als webontwikkelaar. U moet weten hoe u verschillende elementen in de DOM moet selecteren, zodat u hun inhoud kunt lezen of wijzigen.

DOM traversing beschrijft hoe te navigeren door de boomachtige structuur die HTML-documenten genereren. Hier is een complete gids voor het doorkruisen van de DOM met JavaScript.

Wat is DOM doorkruisen?

De Documenteer objectmodel, of kortweg DOM, is een boomachtige weergave van een HTML-document. Het biedt een API waarmee u als webontwikkelaar kunt communiceren met een website met behulp van JavaScript.

Elk item in de DOM staat bekend als een knooppunt. Alleen via de DOM kunt u de structuur, inhoud en stijl van uw HTML-document manipuleren.

DOM-traversal (ook wel lopen of navigeren door de DOM genoemd) is het selecteren van knooppunten in de DOM-structuur van andere knooppunten. U bent waarschijnlijk al bekend met verschillende methoden voor toegang tot elementen in de DOM-structuur op basis van hun id, klasse of tagnaam. U kunt methoden gebruiken zoals

instagram viewer
document.querySelector() En document.getElementById() om dit te doen.

Er zijn andere methoden die u in combinatie kunt gebruiken om op efficiëntere en robuustere manieren door de DOM te navigeren. Zoals u zich kunt voorstellen, is het beter om te zoeken vanaf een reeds bekend punt op een kaart dan om volledig te zoeken.

Het selecteren van een onderliggend element van zijn ouder is bijvoorbeeld eenvoudiger en efficiënter dan ernaar zoeken in de hele boomstructuur.

Een voorbeelddocument om door te bladeren

Als u eenmaal toegang heeft tot een bepaald knooppunt in de DOM-structuur, kunt u op verschillende manieren toegang krijgen tot de gerelateerde knooppunten. U kunt vanaf uw geselecteerde knooppunt naar beneden, naar boven of opzij in de DOM-structuur gaan.

De eerste methode omvat het zoeken naar een element dat begint met een bovenste knooppunt (zoals het documentknooppunt) en naar beneden beweegt.

De tweede manier is het tegenovergestelde: je gaat van een binnenste element omhoog in de boom, op zoek naar een buitenste element. De laatste methode is wanneer u zoekt naar een element van een ander element op hetzelfde niveau (wat betekent dat de twee elementen broers en zussen zijn) in de documentstructuur.

Bekijk dit HTML-voorbeelddocument om dit te demonstreren:

<!DOCTYPE html>
<html lang="nl">
<hoofd>
<meta tekenset="UTF-8" />
<meta http-equiv="X-UA-compatibel" inhoud="IE=rand" />
<metanaam="uitkijk postje" inhoud="breedte=apparaatbreedte, beginschaal=1,0" />
<titel>Voorbeeld pagina</title>
</head>
<lichaam>
<voornaamst>
<h1>Mijn paginatitel</h1>
<P>Mooi onderschrift komt hier</P>


<artikelklasse="eerste artikel">
<h2>Lijst met geweldige vruchten</h2>
<P>Moet fruit eten</P>


<div klasse="wikkel-1">
<ul klasse="appel-lijst">
<li klasse="appel">Appels</li>
<li klasse="oranje">Sinaasappelen</li>
<li klasse="avocado">Avocado's</li>
<li klasse="druif">
 Druiven


<ul>
<li klasse="type 1">Maan valt</li>
<li>Sultana</li>
<li>Verdrag</li>
<li>Karmozijnrood zonder pit</li>
</ul>
</li>
<li klasse="banaan">Bananen</li>
</ul>


<knop klasse="btn-1">Lees de volledige lijst</button>
</div>
</article>


<artikelklasse="tweede__artikel">
<h2>Geweldige plekken in Kenia</h2>
<P>Moet plaatsen in Kenia bezoeken</P>


<div klasse="wikkel-2">
<ul klasse="plaatsen-lijst">
<li>Maasai Mara</li>
<li>Diani-strand</li>
<li>Watamu-strand</li>
<li>Amboseli nationaal park</li>
<li>het Nakuru-meer</li>
</ul>


<knop klasse="btn-2">Lees de volledige lijst</button>
</div>
</article>
</main>
</body>
</html>

De DOM naar beneden doorkruisen

U kunt de DOM naar beneden verplaatsen op twee manieren. De eerste is de gemeenschappelijke selectiemethode (element.querySelector of element.querySelectorAll). Ten tweede kun je de kinderen of kindNodes eigendom. Daarnaast zijn er nog twee andere bijzondere eigenschappen, namelijk laatste kind En eerstgeborene.

Selectormethoden gebruiken

Met de methoden querySelector() kunt u zoeken naar een of meer elementen die overeenkomen met een bepaalde selector. U kunt bijvoorbeeld zoeken naar het eerste element met een klasse "eerste lidwoord" met behulp van document.querySelector('.first-artikel'). En alles halen h2 elementen in het document, kunt u de querySelectorAll methode: document.querySelectorAll('h2'). De querySelectorAll methode retourneert een knooppuntenlijst met overeenkomende elementen; u kunt elk item selecteren met behulp van haakjesnotatie:

const koppen = document.querySelectorAll('h2');
const firstHeading = koppen[0]; // selecteren van het eerste h2-element
const secondHeading = koppen[1]; // het tweede h2-element selecteren

De belangrijkste vangst bij het gebruik van selectormethoden is dat u de juiste symbolen, indien van toepassing, vóór de selector moet gebruiken, zoals u doet in CSS. Bijvoorbeeld ".classname" voor klassen en "#id" voor id's.

Onthoud dat het resultaat een HTML-element zal zijn, niet alleen de innerlijke inhoud van het geselecteerde element. Om toegang te krijgen tot de inhoud kunt u de node's gebruiken binnenHTML eigendom:

document.querySelector('.oranje').innerHTML

Met behulp van de children of childNodes Properties

De kinderen eigenschap selecteert alle onderliggende elementen die zich direct onder een bepaald element bevinden. Hier is een voorbeeld van de kinderen eigendom in actie:

const appelLijst = document.querySelector('.apple-lijst');
const appels = appelLijst.kinderen; 
troosten.log (appels);

Loggen appels naar de console toont een set van alle lijstitems direct onder het element met een "apple-list"-klasse als een HTML-verzameling. Een HTML-collectie is een array-achtig object, dus u kunt haakjesnotatie gebruiken om items te selecteren, zoals bij querySelectorAll.

In tegenstelling tot de kinderen eigendom, kindNodes geeft alle directe onderliggende knooppunten terug (niet alleen onderliggende elementen). Als u alleen geïnteresseerd bent in onderliggende elementen, bijvoorbeeld alleen lijstitems, gebruikt u de kinderen eigendom.

Speciale eigenschappen lastChild en firstChild gebruiken

Deze twee methoden zijn niet zo robuust als de eerste twee. Zoals hun namen suggereren, de laatste kind En eerstgeborene eigenschappen retourneren de laatste en eerste onderliggende knooppunten van een element.

const appelLijst = document.querySelector('.apple-lijst');
const firstChild = appelLijst.firstChild;
const lastChild = appelLijst.lastChild;

De DOM naar boven doorkruisen

U kunt omhoog navigeren in de DOM met behulp van de ouderElement (of parentNode) En dichtstbijzijnde eigenschappen.

ParentElement of parentNode gebruiken

Beide ouderElement of parentNode Met eigenschappen kunt u het bovenliggende knooppunt van het geselecteerde element een niveau hoger selecteren. Het cruciale verschil is dat ouderElement kiest alleen het bovenliggende knooppunt dat een element is. Aan de andere kant, parentNode kan een ouder selecteren, ongeacht of het een element of een ander knooppunttype is.

In het onderstaande codevoorbeeld gebruiken we ouderElement om de div met de klasse "wrapper-1" uit "apple-list" te selecteren:

const appelLijst = document.querySelector('.apple-lijst');
const parentDiv = appelLijst.parentElement; 
troosten.log (ouderDiv); // geeft div-element weer met klasse wrapper-1

Gebruik van de dichtstbijzijnde woning

De dichtstbijzijnde eigenschap selecteert het eerste bovenliggende element dat overeenkomt met een opgegeven selector. Hiermee kunt u meerdere niveaus omhoog selecteren in plaats van één. Als we bijvoorbeeld al de knop met klasse "btn-1" hebben geselecteerd, kunnen we de voornaamst element met behulp van de dichtstbijzijnde eigenschap als volgt:

const btn1 = document.querySelector('.btn-1');
const mainEl = btn1.dichtstbijzijnde('voornaamst');
troosten.log (mainEl); // geeft het hoofdelement weer

Leuk vinden querySelector En querySelectorAll, gebruik de juiste selectors in de dichtstbijzijnde methode.

De DOM zijwaarts doorkruisen

Er zijn twee methoden beschikbaar om de DOM zijwaarts te laten lopen. Je kunt gebruiken volgendeElementSibling of vorigElementSibling. Gebruik volgendeElementSibling om het volgende broer of zus-element te selecteren en vorigElementSibling om de vorige broer of zus te selecteren.

const oranje = document.querySelector('.oranje');
const appel = sinaasappel.vorigElementBroer of zus;
const avocado = sinaasappel.nextElementBroer of zus;

Er zijn ook gelijkwaardige volgendeBroer of zus En vorigBroer of zus eigenschappen die ook selecteren uit alle knooppunttypen, niet alleen elementen.

Doe meer door DOM Traversal-eigenschappen en -methoden te koppelen

Met alle bovenstaande methoden en eigenschappen kunt u elk knooppunt in de DOM selecteren. In sommige gevallen wilt u misschien eerst omhoog en dan omlaag of zijwaarts. In dat geval is het handig om verschillende panden aan elkaar te koppelen.