DOM: n ymmärtäminen on välttämätöntä verkkokehitysurallesi. Sinun pitäisi osata valita eri elementtejä DOM: sta, jotta voit lukea niiden sisällön tai muokata niitä.

DOM-läpikulku kuvaa, kuinka navigoidaan HTML-dokumenttien luomassa puumaisessa rakenteessa. Tässä on täydellinen opas DOM: n läpikulkuun JavaScriptin avulla.

Mikä on DOM Traversing?

The Asiakirjaobjektimalli, tai lyhyesti DOM, on puumainen esitys HTML-dokumentista. Se tarjoaa an API jonka avulla voit web-kehittäjänä olla vuorovaikutuksessa verkkosivuston kanssa JavaScriptin avulla.

Jokainen DOM: n kohde tunnetaan solmuna. Vain DOM: n kautta voit muokata HTML-dokumenttisi rakennetta, sisältöä ja tyyliä.

DOM-läpikulku (kutsutaan myös kävelyksi tai navigoimiseksi DOM: ssa) on DOM-puun solmujen valitseminen muista solmuista. Olet todennäköisesti jo perehtynyt useisiin menetelmiin pääsy DOM-puun elementteihin tunnuksen, luokan tai tunnisteen nimen perusteella. Voit käyttää menetelmiä, kuten document.querySelector() ja document.getElementById() tehdä niin.

instagram viewer

On muitakin menetelmiä, joita voit käyttää yhdessä navigoidaksesi DOM: ssa tehokkaammin ja vankemmin. Kuten voit kuvitella, on parempi etsiä jo tunnetusta pisteestä kartalla kuin tehdä täydellinen haku.

Esimerkiksi alielementin valitseminen pääelementistä on helpompaa ja tehokkaampaa kuin sen etsiminen koko puusta.

Esimerkkiasiakirja läpikäytäväksi

Kun sinulla on pääsy tiettyyn solmuun DOM-puussa, voit käyttää siihen liittyviä solmuja eri tavoilla. Voit siirtyä alas, ylöspäin tai sivuttain DOM-puussa valitsemastasi solmusta.

Ensimmäinen menetelmä sisältää elementin etsimisen, joka alkaa ylimmästä solmusta (kuten asiakirjan solmusta) ja siirtyy alaspäin.

Toinen tapa on päinvastainen: siirryt sisemmästä elementistä ylös puuhun etsien ulompaa elementtiä. Viimeinen tapa on, kun etsit elementtiä toisesta elementistä samalla tasolla (eli nämä kaksi elementtiä ovat sisaruksia) dokumenttipuusta.

Havainnollistaaksesi tätä esimerkkiä HTML-dokumentista:

<!DOCTYPE html>
<html lang="fi">
<pää>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-yhteensopiva" sisältö="IE = reuna" />
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1,0" />
<otsikko>Esimerkkisivu</title>
</head>
<kehon>
<pää>
<h1>Sivuni otsikko</h1>
<s>Hieno kuvateksti tulee tänne</s>


<artikkeliluokka="ensimmäinen__artikkeli">
<h2>Luettelo upeista hedelmistä</h2>
<s>Hedelmiä pitää syödä</s>


<div class="kääre-1">
<ul luokka ="omena-lista">
<li luokka ="omena">Omenat</li>
<li luokka ="oranssi">Appelsiinit</li>
<li luokka ="avokado">Avokadot</li>
<li luokka ="rypäleen">
 Rypäleet


<ul>
<li luokka ="tyyppi-1">Kuu putoaa</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li luokka ="banaani">Banaanit</li>
</ul>


<painikeluokka="btn-1">Lue koko lista</button>
</div>
</article>


<artikkeliluokka="toinen__artikkeli">
<h2>Upeita paikkoja Keniassa</h2>
<s>Täytyy käydä paikoissa Keniassa</s>


<div class="kääre-2">
<ul luokka ="paikkaluettelo">
<li>Maasai Mara</li>
<li>Dianin ranta</li>
<li>Watamu Beach</li>
<li>Amboselin kansallispuisto</li>
<li>Nakuru-järvi</li>
</ul>


<painikeluokka="btn-2">Lue koko lista</button>
</div>
</article>
</main>
</body>
</html>

DOM: n läpikulku alaspäin

Voit kulkea DOM: ia alaspäin jommallakummalla kahdesta menetelmästä. Ensimmäinen on yleinen valintamenetelmä (element.querySelector tai element.querySelectorAll). Toiseksi voit käyttää lapset tai lapsisolmut omaisuutta. Siellä on myös kaksi muuta erityisomaisuutta, nimittäin viimeinen lapsi ja ensimmäinen lapsi.

Valintamenetelmien käyttö

querySelector()-menetelmien avulla voit etsiä yhtä tai useampaa elementtiä, jotka vastaavat tiettyä valitsinta. Voit esimerkiksi etsiä ensimmäistä elementtiä "first-article"-luokan avulla käyttämällä document.querySelector('.first-artikkeli'). Ja hakemaan kaikki h2 asiakirjan elementtejä, voit käyttää querySelectorAll menetelmä: document.querySelectorAll('h2'). The querySelectorAll menetelmä palauttaa solmuluettelon vastaavista elementeistä; voit valita jokaisen kohteen käyttämällä hakasulkua:

konst otsikot = asiakirja.querySelectorAll('h2');
konst firstHeading = otsikot[0]; // valitaan ensimmäinen h2-elementti
konst secondHeading = otsikot[1]; // valitaan toinen h2-elementti

Suurin saalis valitsinmenetelmiä käytettäessä on, että sinun on käytettävä soveltuvia symboleja ennen valitsinta, kuten teet CSS: ssä. Esimerkiksi ".classname" luokille ja "#id" tunnuksille.

Muista, että tuloksena on HTML-elementti, ei vain valitun elementin sisäinen sisältö. Päästäksesi sisältöön voit käyttää solmua innerHTML omaisuus:

asiakirja.querySelector('.orange').innerHTML

Lapsien tai childNodes-ominaisuuksien käyttäminen

The lapset ominaisuus valitsee kaikki alielementit, jotka ovat suoraan tietyn elementin alla. Tässä on esimerkki lapset omaisuus toiminnassa:

konst appleList = asiakirja.querySelector('.apple-list');
konst omenat = appleList.children; 
konsoli.log (omenat);

Kirjaaminen omenat konsoliin näyttää joukon kaikkia luettelokohteita suoraan elementin alla "omenalista"-luokalla HTML-kokoelmana. HTML-kokoelma on taulukon kaltainen objekti, joten voit käyttää hakasulkujen merkintää kohteiden valitsemiseen, kuten querySelectorAllissa.

toisin kuin lapset omaisuutta, lapsisolmut palauttaa kaikki suorat lapsisolmut (ei vain lapsielementit). Jos olet kiinnostunut vain alatason elementeistä, sano vain luettelokohteet, käytä lapset omaisuutta.

Erityisten lastChild- ja firstChild-ominaisuuksien käyttö

Nämä kaksi menetelmää eivät ole yhtä vahvoja kuin kaksi ensimmäistä. Kuten heidän nimensä viittaavat, viimeinen lapsi ja ensimmäinen lapsi ominaisuudet palauttavat elementin viimeisen ja ensimmäisen lapsisolmun.

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

DOM: n läpikulku ylöspäin

Voit navigoida DOM: ia ylöspäin käyttämällä vanhempiElementti (tai parentNode) ja lähin ominaisuuksia.

ParentElementin tai parentNode: n käyttö

Molemmat vanhempiElementti tai parentNode ominaisuuksien avulla voit valita valitun elementin pääsolmun yhden tason ylempänä. Kriittinen ero on se vanhempiElementti valitsee vain sen pääsolmun, joka on elementti. Toisaalta, parentNode voi valita ylätason riippumatta siitä, onko se elementti vai eri solmutyyppi.

Alla olevassa koodinäytteessä käytämme vanhempiElementti valitaksesi div, jonka luokka on "wrapper-1" "omenaluettelosta":

konst appleList = asiakirja.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konsoli.log (parentDiv); // näyttää div-elementin luokan wrapper-1 kanssa

Lähimmän omaisuuden käyttäminen

The lähin ominaisuus valitsee ensimmäisen yläelementin, joka vastaa määritettyä valitsinta. Sen avulla voit valita useita tasoja ylöspäin yhden sijasta. Esimerkiksi, jos meillä on jo painike, jossa luokka "btn-1" on valittuna, voimme valita pää elementtiä käyttämällä lähin omaisuutta seuraavasti:

konst btn1 = asiakirja.querySelector('.btn-1');
const mainEl = btn1.closest('pää');
konsoli.log (mainEl); // näyttää pääelementin

Kuten querySelector ja querySelectorAll, käytä asianmukaisia ​​valitsimia lähin menetelmä.

DOM: n poikki sivuttain

DOM: n ohjaamiseen sivuttain on kaksi tapaa. Voit käyttää seuraavaElementti Sisarus tai edellinenElementtisisarus. Käyttää seuraavaElementti Sisarus valitaksesi seuraavan sisaruselementin ja edellinenElementtisisarus valitaksesi edellisen sisaruksen.

konst oranssi = asiakirja.querySelector('.oranssi');
konst omena = orange.previousElementSibling;
konst avokado = orange.nextElementSibling;

Vastaaviakin löytyy seuraava sisarus ja edellinen sisarus ominaisuuksia, jotka myös valitsevat kaikista solmutyypeistä, ei vain elementeistä.

Tee enemmän ketjuttamalla DOM-läpikulkuominaisuudet ja -menetelmät

Kaikki yllä olevat menetelmät ja ominaisuudet voivat antaa sinun valita minkä tahansa solmun DOM: sta. Joissakin tapauksissa saatat kuitenkin haluta siirtyä ensin ylös, sitten alas tai sivuttain. Siinä tapauksessa eri ominaisuuksien ketjuttaminen yhteen on kätevää.