At forstå DOM er afgørende i din webudviklingskarriere. Du bør vide, hvordan du vælger forskellige elementer i DOM, så du kan læse deres indhold eller ændre dem.

DOM-traversering beskriver, hvordan man navigerer i den trælignende struktur, som HTML-dokumenter genererer. Her er en komplet guide til, hvordan du krydser DOM med JavaScript.

Hvad er DOM-traversering?

Det Dokumentobjektmodel, eller DOM for kort, er en trælignende repræsentation af et HTML-dokument. Det giver en API der giver dig som webudvikler mulighed for at interagere med en hjemmeside ved hjælp af JavaScript.

Hvert element i DOM er kendt som en node. Kun gennem DOM kan du manipulere din HTML-dokumentstruktur, indhold og stil.

DOM-traversal (også kaldet at gå eller navigere i DOM) er handlingen med at vælge noder i DOM-træet fra andre noder. Du er sikkert allerede bekendt med flere metoder til adgang til elementer i DOM-træet efter deres id, klasse eller tagnavn. Du kan bruge metoder som f.eks document.querySelector() og document.getElementById() for at gøre det.

instagram viewer

Der er andre metoder, du kan bruge sammen, til at navigere i DOM på mere effektive og robuste måder. Som du kan forestille dig, er det bedre at søge fra et allerede kendt punkt på et kort end at foretage en fuld søgning.

For eksempel er det nemmere og mere effektivt at vælge et underordnet element fra dets overordnede element end at søge efter det i hele træet.

Et eksempel på et dokument, der skal gennemgås

Når du har adgang til en given node i DOM-træet, kan du få adgang til dens relaterede noder på forskellige måder. Du kan bevæge dig nedad, opad eller sidelæns i DOM-træet fra din valgte node.

Den første metode involverer at søge efter et element, der starter med en node øverst (som dokumentknuden) og bevæger sig nedad.

Den anden måde er den modsatte: du bevæger dig fra et indre element op i træet og søger efter et ydre element. Den sidste metode er, når du søger efter et element fra et andet element på samme niveau (hvilket betyder, at de to elementer er søskende) i dokumenttræet.

For at demonstrere, overvej dette eksempel på HTML-dokument:

<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="UTF-8" />
<meta http-equiv="X-UA-kompatibel" indhold="IE=kant" />
<metanavn="viewport" indhold="bredde=enhedsbredde, indledende skala=1,0" />
<titel>Eksempel side</title>
</head>
<legeme>
<vigtigste>
<h1>Min sidetitel</h1>
<s>Fin billedtekst kommer her</s>


<artikelklasse="første__artikel">
<h2>Liste over fantastiske frugter</h2>
<s>Skal spise frugt</s>


<div klasse="indpakning-1">
<ul klasse="æble-liste">
<li klasse="æble">Æbler</li>
<li klasse="orange">Appelsiner</li>
<li klasse="avocado">Avocadoer</li>
<li klasse="drue">
 Druer


<ul>
<li klasse="type-1">Månen falder</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li klasse="banan">Bananer</li>
</ul>


<knapklasse="btn-1">Læs hele listen</button>
</div>
</article>


<artikelklasse="anden__artikel">
<h2>Fantastiske steder i Kenya</h2>
<s>Skal besøge steder i Kenya</s>


<div klasse="indpakning-2">
<ul klasse="plads-liste">
<li>Masai Mara</li>
<li>Diani Strand</li>
<li>Watamu Strand</li>
<li>Amboseli nationalpark</li>
<li>Lake Nakuru</li>
</ul>


<knapklasse="btn-2">Læs hele listen</button>
</div>
</article>
</main>
</body>
</html>

At krydse DOM nedad

Du kan krydse DOM nedad ved at bruge en af ​​to metoder. Den første er den almindelige vælgermetode (element.querySelector eller element.querySelectorAll). For det andet kan du bruge børn eller childNodes ejendom. Der er også to andre særlige egenskaber, nemlig sidste barn og førstebarn.

Brug af vælgermetoder

querySelector()-metoderne giver dig mulighed for at søge efter et eller flere elementer, der matcher en given vælger. For eksempel kan du søge efter det første element med en klasse "første artikel" ved hjælp af document.querySelector('.first-article'). Og for at hente det hele h2 elementer i dokumentet, kan du bruge querySelectorAll metode: document.querySelectorAll('h2'). Det querySelectorAll metode returnerer en nodeliste over matchende elementer; du kan vælge hvert element ved hjælp af parentesnotation:

konst overskrifter = dokument.querySelectorAll('h2');
konst firstHeading = overskrifter[0]; // ved at vælge det første h2-element
konst secondHeading = overskrifter[1]; // ved at vælge det andet h2-element

Den største fangst ved brug af vælgermetoder er, at du skal bruge de relevante symboler, hvor det er relevant, før vælgeren, som du gør i CSS. For eksempel ".classname" for klasser og "#id" for id'er.

Husk, at resultatet bliver et HTML-element, ikke kun det indre indhold af det valgte element. For at få adgang til indholdet kan du bruge nodernes indreHTML ejendom:

dokument.querySelector('.orange').innerHTML

Brug af børn eller childNodes Egenskaber

Det børn egenskaben vælger alle underordnede elementer, der er direkte under et givet element. Her er et eksempel på børn ejendom i aktion:

konst appleList = dokument.querySelector('.apple-list');
konst æbler = æbleliste.børn; 
konsol.log (æbler);

Logning æbler til konsollen vil vise et sæt af alle listeelementer direkte under elementet med en "apple-list"-klasse som en HTML-samling. En HTML-samling er et array-lignende objekt, så du kan bruge parentesnotation til at vælge elementer, som med querySelectorAll.

I modsætning til børn ejendom, childNodes returnerer alle direkte underordnede noder (ikke kun underordnede elementer). Hvis du kun er interesseret i underordnede elementer, f.eks. kun listeelementer, skal du bruge børn ejendom.

Brug af særlige lastChild- og firstChild-egenskaber

Disse to metoder er ikke så robuste som de to første. Som deres navne antyder, er sidste barn og førstebarn egenskaber returnerer et elements sidste og første underordnede noder.

konst appleList = dokument.querySelector('.apple-list');
konst firstChild = appleList.firstChild;
konst lastChild = appleList.lastChild;

At krydse DOM opad

Du kan navigere op i DOM ved hjælp af parentElement (eller forældreNode) og nærmest ejendomme.

Brug af parentElement eller parentNode

Begge parentElement eller forældreNode egenskaber lader dig vælge det valgte elements overordnede node et niveau op. Den kritiske forskel er det parentElement vælger kun den overordnede node, der er et element. På den anden side, forældreNode kan vælge en forælder, uanset om det er et element eller en anden nodetype.

I kodeeksemplet nedenfor bruger vi parentElement for at vælge div'en med "wrapper-1"-klassen fra "apple-list":

konst appleList = dokument.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konsol.log (forælderDiv); // viser div-element med class wrapper-1

Brug af den nærmeste ejendom

Det nærmest egenskab vælger det første overordnede element, der matcher en specificeret vælger. Det lader dig vælge flere niveauer op i stedet for ét. For eksempel, hvis vi allerede har knappen med klassen "btn-1" valgt, kan vi vælge vigtigste element ved hjælp af nærmest ejendom som følger:

konst btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.closest('vigtigste');
konsol.log (mainEl); // viser hovedelementet

Synes godt om querySelector og querySelectorAll, brug passende vælgere i nærmest metode.

At krydse DOM sidelæns

Der er to tilgængelige metoder til at gå DOM sidelæns. Du kan bruge næsteElementSøskende eller forrigeElementSøskende. Brug næsteElementSøskende for at vælge følgende søskendeelement og forrigeElementSøskende for at vælge den forrige søskende.

konst orange = dokument.querySelector('.orange');
konst æble = orange.previousElementSibling;
konst avocado = orange.nextElementSibling;

Der er også tilsvarende næste Søskende og tidligere søskende egenskaber, der også vælger fra alle nodetyper, ikke kun elementer.

Gør mere ved at sammenkæde DOM Traversal-egenskaber og -metoder

Alle metoder og egenskaber ovenfor kan gøre det muligt for dig at vælge en hvilken som helst node i DOM. Men i nogle tilfælde vil du måske først flytte op, derefter ned eller sidelæns. I så fald vil det være praktisk at kæde forskellige egenskaber sammen.