Att förstå DOM är viktigt i din webbutvecklingskarriär. Du bör veta hur du väljer olika element i DOM, så att du sedan kan läsa deras innehåll eller ändra dem.

DOM-traversering beskriver hur man navigerar i den trädliknande struktur som HTML-dokument genererar. Här är en komplett guide om hur du går igenom DOM med JavaScript.

Vad är DOM-traversering?

De Dokumentobjektmodell, eller DOM för kort, är en trädliknande representation av ett HTML-dokument. Det ger en API som gör att du som webbutvecklare kan interagera med en webbplats med hjälp av JavaScript.

Varje objekt i DOM är känt som en nod. Endast genom DOM kan du manipulera din HTML-dokumentstruktur, innehåll och stil.

DOM-traversal (även kallat att gå eller navigera i DOM) är handlingen att välja noder i DOM-trädet från andra noder. Du är förmodligen redan bekant med flera metoder för åtkomst till element i DOM-trädet efter deras id, klass eller taggnamn. Du kan använda metoder som document.querySelector() och document.getElementById() att göra så.

instagram viewer

Det finns andra metoder som du kan använda tillsammans för att navigera i DOM på mer effektiva och robusta sätt. Som du kan föreställa dig är det bättre att söka från en redan känd punkt på en karta än att göra en fullständig sökning.

Att välja ett underordnat element från dess överordnade element är till exempel enklare och mer effektivt än att söka efter det i hela trädet.

Ett exempeldokument att gå igenom

När du väl har tillgång till en given nod i DOM-trädet kan du komma åt dess relaterade noder på olika sätt. Du kan flytta nedåt, uppåt eller åt sidan i DOM-trädet från din valda nod.

Den första metoden innebär att man söker efter ett element som börjar med en nod överst (som dokumentnoden) och flyttar sig nedåt.

Det andra sättet är motsatsen: du flyttar från ett inre element upp i trädet och söker efter ett yttre element. Den sista metoden är när du söker efter ett element från ett annat element på samma nivå (vilket betyder att de två elementen är syskon) i dokumentträdet.

För att demonstrera, överväg detta exempel på HTML-dokument:

<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="UTF-8" />
<meta http-equiv="X-UA-kompatibel" innehåll="IE=kant" />
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1,0" />
<titel>Exempelsida</title>
</head>
<kropp>
<huvud>
<h1>Min sidas titel</h1>
<sid>Fin bildtext kommer här</s>


<artikelklass="första__artikel">
<h2>Lista över fantastiska frukter</h2>
<sid>Måste äta frukt</s>


<div klass="omslag-1">
<ul klass="äpple-listan">
<li klass="äpple">Äpplen</li>
<li klass="orange">Apelsiner</li>
<li klass="avokado">Avokado</li>
<li klass="druva">
 Vindruvor


<ul>
<li klass="typ 1">Månen faller</li>
<li>Sultana</li>
<li>Harmoni</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li klass="banan">Bananer</li>
</ul>


<knappklass="btn-1">Läs hela listan</button>
</div>
</article>


<artikelklass="andra__artikel">
<h2>Fantastiska platser i Kenya</h2>
<sid>Måste besöka platser i Kenya</s>


<div klass="omslag-2">
<ul klass="platslista">
<li>Massai Mara</li>
<li>Diani Beach</li>
<li>Watamu Beach</li>
<li>Amboseli nationalpark</li>
<li>Lake Nakuru</li>
</ul>


<knappklass="btn-2">Läs hela listan</button>
</div>
</article>
</main>
</body>
</html>

Att korsa DOM nedåt

Du kan korsa DOM nedåt med en av två metoder. Den första är den vanliga väljarmetoden (element.querySelector eller element.querySelectorAll). För det andra kan du använda barn eller barnnoder fast egendom. Det finns även två andra speciella fastigheter, nämligen sista barnet och förstfödde.

Använda väljarmetoder

querySelector()-metoderna låter dig söka efter ett eller flera element som matchar en given väljare. Till exempel kan du söka efter det första elementet med en klass "första artikel" med hjälp av document.querySelector('.first-article'). Och att hämta allt h2 element i dokumentet kan du använda querySelectorAll metod: document.querySelectorAll('h2'). De querySelectorAll metod returnerar en nodlista med matchande element; du kan välja varje objekt med parentesnotation:

konst rubriker = dokumentera.querySelectorAll('h2');
konst firstHeading = rubriker[0]; // välj det första h2-elementet
konst secondHeading = rubriker[1]; // välj det andra h2-elementet

Den största haken när du använder väljarmetoder är att du måste använda lämpliga symboler, i förekommande fall, före väljaren som du gör i CSS. Till exempel ".classname" för klasser och "#id" för id.

Kom ihåg att resultatet blir ett HTML-element, inte bara det inre innehållet i det valda elementet. För att komma åt innehållet kan du använda nodernas innerHTML fast egendom:

dokumentera.querySelector('.orange').innerHTML

Använda barn- eller childNodes-egenskaperna

De barn egenskapen väljer alla underordnade element som finns direkt under ett givet element. Här är ett exempel på barn egendom i aktion:

konst appleList = dokumentera.querySelector('.apple-list');
konst apples = appleList.children; 
trösta.log (äpplen);

Skogsavverkning äpplen till konsolen kommer att visa en uppsättning av alla listobjekt direkt under elementet med en "apple-list"-klass som en HTML-samling. En HTML-samling är ett arrayliknande objekt, så du kan använda parentesnotation för att välja objekt, som med querySelectorAll.

till skillnad från barn fast egendom, barnnoder returnerar alla direkta underordnade noder (inte bara underordnade element). Om du bara är intresserad av underordnade element, säg bara listobjekt, använd barn fast egendom.

Använder särskilda lastChild- och firstChild-egenskaper

Dessa två metoder är inte lika robusta som de två första. Som deras namn antyder, den sista barnet och förstfödde egenskaper returnerar ett elements sista och första underordnade noder.

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

Att korsa DOM uppåt

Du kan navigera upp DOM med hjälp av parentElement (eller parentNode) och närmast egenskaper.

Använder parentElement eller parentNode

Både parentElement eller parentNode egenskaper låter dig välja det valda elementets överordnade nod en nivå upp. Den kritiska skillnaden är det parentElement väljer bara den överordnade noden som är ett element. Å andra sidan, parentNode kan välja en förälder oavsett om det är ett element eller en annan nodtyp.

I kodexemplet nedan använder vi parentElement för att välja div med klassen "wrapper-1" från "apple-list":

konst appleList = dokumentera.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
trösta.log (parentDiv); // visar div-element med class wrapper-1

Använder närmaste fastighet

De närmast egenskapen väljer det första överordnade elementet som matchar en angiven väljare. Det låter dig välja flera nivåer upp istället för en. Till exempel, om vi redan har knappen med klassen "btn-1" vald, kan vi välja huvud element med hjälp av närmast egendom enligt följande:

konst btn1 = dokumentera.querySelector('.btn-1');
const mainEl = btn1.närmast('huvud');
trösta.log (mainEl); // visar huvudelementet

Tycka om querySelector och querySelectorAll, använd lämpliga väljare i närmast metod.

Att korsa DOM i sidled

Det finns två metoder tillgängliga för att gå DOM i sidled. Du kan använda nästaElementSyskon eller föregåendeElementSyskon. Använda sig av nästaElementSyskon för att välja följande syskonelement och föregåendeElementSyskon för att välja föregående syskon.

konst orange = dokumentera.querySelector('.orange');
konst apple = orange.previousElementSibling;
konst avokado = orange.nextElementSyskon;

Det finns också likvärdiga nästaSyskon och tidigare syskon egenskaper som också väljer från alla nodtyper, inte bara element.

Gör mer genom att kedja DOM-traversalegenskaper och metoder

Alla metoder och egenskaper ovan kan göra att du kan välja valfri nod i DOM. Men i vissa fall kanske du vill flytta uppåt först, sedan nedåt eller åt sidan. I så fall kommer det att vara praktiskt att koppla ihop olika egenskaper.