Razumijevanje DOM-a ključno je u vašoj karijeri web razvoja. Trebali biste znati kako odabrati različite elemente u DOM-u, tako da možete čitati njihov sadržaj ili ih mijenjati.

Prelaženje DOM-a opisuje kako se kretati strukturom stabla koju generiraju HTML dokumenti. Evo cjelovitog vodiča o tome kako preći DOM s JavaScriptom.

Što je DOM traversing?

The Objektni model dokumenta, ili skraćeno DOM, stablo je predstavljanja HTML dokumenta. Pruža API koji vam, kao web programeru, omogućuje interakciju s web lokacijom pomoću JavaScripta.

Svaka stavka u DOM-u poznata je kao čvor. Samo putem DOM-a možete manipulirati strukturom, sadržajem i stilom svog HTML dokumenta.

Prolazak DOM-a (također nazvan hodanje ili navigacija DOM-om) je čin odabira čvorova u DOM stablu od drugih čvorova. Vjerojatno ste već upoznati s nekoliko metoda za pristup elementima u DOM stablu prema njihovom ID-u, klasi ili nazivu oznake. Možete koristiti metode poput document.querySelector() i document.getElementById() učiniti tako.

instagram viewer

Postoje i druge metode koje možete koristiti u kombinaciji za navigaciju DOM-om na učinkovitije i robusnije načine. Kao što možete zamisliti, bolje je pretraživati ​​s već poznate točke na karti nego izvršiti potpunu pretragu.

Na primjer, odabir podređenog elementa od njegovog nadređenog je lakši i učinkovitiji nego njegovo traženje po cijelom stablu.

Ogledni dokument za pregledavanje

Nakon što imate pristup određenom čvoru u DOM stablu, možete pristupiti njegovim povezanim čvorovima na različite načine. Možete se pomicati prema dolje, prema gore ili u stranu u DOM stablu iz odabranog čvora.

Prva metoda uključuje traženje elementa koji počinje s najvišim čvorom (poput čvora dokumenta) i kreće se prema dolje.

Drugi način je suprotan: krećete se od unutarnjeg elementa prema stablu, tražeći vanjski element. Posljednja metoda je kada tražite element iz drugog elementa na istoj razini (što znači da su ta dva elementa srodna) u stablu dokumenta.

Za demonstraciju, razmotrite ovaj primjer HTML dokumenta:

<!DOCTYPE html>
<html lang="hr">
<glava>
<meta charset="UTF-8" />
<meta http-ekviv="X-UA-kompatibilan" sadržaj="IE=rub" />
<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1,0" />
<titula>Ogledna stranica</title>
</head>
<tijelo>
<glavni>
<h1>Naslov moje stranice</h1>
<str>Ovdje ide lijep natpis</str>


<klasa artikla="prvi__članak">
<h2>Popis nevjerojatnih plodova</h2>
<str>Treba jesti voće</str>


<div klasa="omot-1">
<ul klasa="lista-jabuka">
<li klasa="jabuka">Jabuke</li>
<li klasa="naranča">Naranče</li>
<li klasa="avokado">Avokado</li>
<li klasa="grožđe">
 Grožđe


<ul>
<li klasa="tip-1">Mjesečeve kapi</li>
<li>Sultanija</li>
<li>Concord</li>
<li>Grimizna bez sjemena</li>
</ul>
</li>
<li klasa="banana">Banane</li>
</ul>


<gumb klasa="btn-1">Pročitajte cijeli popis</button>
</div>
</article>


<klasa artikla="drugi__članak">
<h2>Nevjerojatna mjesta u Keniji</h2>
<str>Mjesta koja morate posjetiti u Keniji</str>


<div klasa="omot-2">
<ul klasa="popis mjesta">
<li>Maasai Mara</li>
<li>Plaža Diani</li>
<li>Plaža Watamu</li>
<li>Nacionalni park Amboseli</li>
<li>Jezero Nakuru</li>
</ul>


<gumb klasa="btn-2">Pročitajte cijeli popis</button>
</div>
</article>
</main>
</body>
</html>

Kretanje DOM-a prema dolje

DOM možete preći prema dolje pomoću jedne od dvije metode. Prva je uobičajena metoda selektora (element.querySelector ili element.querySelectorAll). Drugo, možete koristiti djece ili dijeteČvorovi vlasništvo. Postoje još dva posebna svojstva, naime, zadnje dijete i prvoDijete.

Korištenje metoda odabira

Metode querySelector() omogućuju vam traženje jednog ili više elemenata koji odgovaraju danom selektoru. Na primjer, možete tražiti prvi element s klasom "first-article" pomoću document.querySelector('.first-article'). I pokupiti sve h2 elemente u dokumentu, možete koristiti querySelectorAll metoda: document.querySelectorAll('h2'). The querySelectorAll metoda vraća popis čvorova podudarnih elemenata; možete odabrati svaku stavku koristeći zagradu:

konst naslovi = dokument.querySelectorAll('h2');
konst firstHeading = naslovi[0]; // odabir prvog h2 elementa
konst secondHeading = naslovi[1]; // odabir drugog h2 elementa

Glavna začkoljica pri korištenju metoda selektora je da morate koristiti odgovarajuće simbole, gdje je primjenjivo, prije selektora kao što to radite u CSS-u. Na primjer, ".classname" za klase i "#id" za ID-ove.

Zapamtite da će rezultat biti HTML element, a ne samo unutarnji sadržaj odabranog elementa. Za pristup sadržaju možete koristiti čvorove unutarnjiHTML svojstvo:

dokument.querySelector('.orange').innerHTML

Korištenje svojstava djece ili childNodes

The djece svojstvo odabire sve podređene elemente koji su izravno ispod danog elementa. Evo primjera djece nekretnina u akciji:

konst popis jabuka = dokument.querySelector('.apple-list');
konst jabuke = appleList.children; 
konzola.log (jabuke);

Sječa drva jabuke na konzolu će prikazati skup svih stavki popisa izravno ispod elementa s klasom "apple-list" kao HTML kolekciju. HTML kolekcija je objekt sličan nizu, tako da možete koristiti notaciju u zagradama za odabir stavki, kao kod querySelectorAll.

Za razliku od djece vlasništvo, dijeteČvorovi vraća sve izravne podređene čvorove (ne samo podređene elemente). Ako vas zanimaju samo podređeni elementi, recimo samo stavke popisa, koristite djece vlasništvo.

Korištenje posebnih svojstava lastChild i firstChild

Ove dvije metode nisu tako robusne kao prve dvije. Kao što njihova imena sugeriraju, zadnje dijete i prvoDijete svojstva vraćaju zadnji i prvi podređeni čvor elementa.

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

Kretanje DOM-a prema gore

Možete se kretati prema gore DOM-om pomoću parentElement (ili parentNode) i najbliži Svojstva.

Korištenje parentElement ili parentNode

Oba parentElement ili parentNode svojstva omogućuju odabir nadređenog čvora odabranog elementa jednu razinu više. Kritična razlika je u tome parentElement odabire samo nadređeni čvor koji je element. S druge strane, parentNode može odabrati roditelja bez obzira radi li se o elementu ili drugoj vrsti čvora.

U donjem primjeru koda koristimo parentElement za odabir diva s klasom "wrapper-1" s "apple-list":

konst popis jabuka = dokument.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konzola.log (parentDiv); // prikazuje div element s klasom omotač-1

Korištenje najbližeg posjeda

The najbliži svojstvo odabire prvi nadređeni element koji odgovara navedenom selektoru. Omogućuje odabir više razina umjesto jedne. Na primjer, ako već imamo odabranu tipku s klasom "btn-1", možemo odabrati glavni element pomoću najbliži imovine kako slijedi:

konst btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.closest('glavni');
konzola.log (mainEl); // prikazuje glavni element

Kao querySelector i querySelectorAll, koristite odgovarajuće selektore u najbliži metoda.

Prelaženje DOM-a bočno

Postoje dvije dostupne metode za bočno hodanje DOM-a. Možeš koristiti nextElementSibling ili prethodniElementSibling. Koristiti nextElementSibling za odabir sljedećeg srodnog elementa i prethodniElementSibling za odabir prethodnog brata ili sestre.

konst narančasta = dokument.querySelector('.orange');
konst jabuka = ​​naranča.previousElementSibling;
konst avokado = naranča.nextElementSibling;

Postoje i ekvivalenti sljedeći brat/sestra i prijašnji brat/sestra svojstva koja također odabiru iz svih vrsta čvorova, a ne samo elemenata.

Učinite više lančanim svojstvima i metodama obilaska DOM-a

Sve gore navedene metode i svojstva mogu vam omogućiti odabir bilo kojeg čvora u DOM-u. Međutim, u nekim slučajevima možda ćete se htjeti prvo pomaknuti gore, zatim dolje ili u stranu. U tom će se slučaju dobro povezati različita svojstva.