Razumevanje DOM je bistvenega pomena v vaši karieri spletnega razvijalca. Morali bi vedeti, kako izbrati različne elemente v DOM, da lahko nato preberete njihovo vsebino ali jih spremenite.

Prehod DOM opisuje, kako krmariti po drevesni strukturi, ki jo ustvarjajo dokumenti HTML. Tukaj je popoln vodnik o tem, kako prečkati DOM z JavaScriptom.

Kaj je DOM traversing?

The Objektni model dokumentaali na kratko DOM je drevesna predstavitev dokumenta HTML. Zagotavlja API ki vam kot spletnemu razvijalcu omogoča interakcijo s spletnim mestom s pomočjo JavaScripta.

Vsak element v DOM je znan kot vozlišče. Samo z DOM lahko manipulirate s strukturo, vsebino in slogom dokumenta HTML.

Prehod DOM (imenovan tudi hoja ali navigacija po DOM) je dejanje izbiranja vozlišč v drevesu DOM iz drugih vozlišč. Verjetno že poznate več metod za dostop do elementov v drevesu DOM po njihovem ID-ju, razredu ali imenu oznake. Uporabite lahko metode, kot so document.querySelector() in document.getElementById() narediti tako.

instagram viewer

Obstajajo tudi druge metode, ki jih lahko uporabite skupaj za krmarjenje po DOM na učinkovitejše in robustnejše načine. Kot si lahko predstavljate, je bolje iskati od že znane točke na zemljevidu kot iskati v celoti.

Na primer, izbiranje podrejenega elementa od njegovega nadrejenega je lažje in učinkovitejše kot iskanje po celotnem drevesu.

Vzorec dokumenta za prečkanje

Ko imate dostop do danega vozlišča v drevesu DOM, lahko dostopate do povezanih vozlišč na različne načine. Iz izbranega vozlišča se lahko v drevesu DOM premikate navzdol, navzgor ali vstran.

Prva metoda vključuje iskanje elementa, ki se začne z najvišjim vozliščem (kot je vozlišče dokumenta) in se pomika navzdol.

Drugi način je nasproten: premikate se od notranjega elementa navzgor po drevesu in iščete zunanji element. Zadnja metoda je, ko iščete element iz drugega elementa na isti ravni (kar pomeni, da sta elementa bratje in sestre) v drevesu dokumentov.

Za prikaz si oglejte ta primer dokumenta HTML:

<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="UTF-8" />
<meta http-ekviv="Združljiv z X-UA" vsebina="IE=rob" />
<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1,0" />
<naslov>Vzorčna stran</title>
</head>
<telo>
<glavni>
<h1>Naslov moje strani</h1>
<str>Tukaj gre lep napis</str>


<razred artikla="prvi__članek">
<h2>Seznam neverjetnih sadežev</h2>
<str>Jesti je treba sadje</str>


<razred div="ovitek-1">
<ul razred="jabolčni seznam">
<razred li="jabolko">Jabolka</li>
<razred li="oranžna">Pomaranče</li>
<razred li="avokado">Avokado</li>
<razred li="grozdje">
 grozdje


<ul>
<razred li="tip-1">Lunine kapljice</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<razred li="banana">banane</li>
</ul>


<razred gumba="btn-1">Preberite celoten seznam</button>
</div>
</article>


<razred artikla="drugi__članek">
<h2>Čudoviti kraji v Keniji</h2>
<str>Mesta, ki jih je treba obiskati v Keniji</str>


<razred div="ovoj-2">
<ul razred="krajev-seznam">
<li>Maasai Mara</li>
<li>Plaža Diani</li>
<li>Plaža Watamu</li>
<li>Nacionalni park Amboseli</li>
<li>Jezero Nakuru</li>
</ul>


<razred gumba="btn-2">Preberite celoten seznam</button>
</div>
</article>
</main>
</body>
</html>

Premikanje DOM navzdol

DOM lahko premaknete navzdol na enega od dveh načinov. Prva je običajna metoda izbirnika (element.querySelector oz element.querySelectorAll). Drugič, lahko uporabite otroci oz childNodes premoženje. Obstajata pa še dve posebni lastnosti, in sicer lastChild in firstChild.

Uporaba izbirnih metod

Metode querySelector() vam omogočajo iskanje enega ali več elementov, ki se ujemajo z danim izbirnikom. Na primer, prvi element lahko iščete z razredom "first-article" z uporabo document.querySelector('.first-article'). In prinesti vse h2 elemente v dokumentu, lahko uporabite querySelectorAll metoda: document.querySelectorAll('h2'). The querySelectorAll metoda vrne seznam vozlišč ujemajočih se elementov; vsak element lahko izberete z zapisom v oklepajih:

konst naslovi = dokument.querySelectorAll('h2');
konst firstHeading = naslovi [0]; // izbiranje prvega elementa h2
konst secondHeading = naslovi [1]; // izbira drugega elementa h2

Glavni ulov pri uporabi metod izbirnika je, da morate uporabiti ustrezne simbole, kjer je to primerno, pred izbirnikom, kot to počnete v CSS. Na primer ".classname" za razrede in "#id" za ID-je.

Ne pozabite, da bo rezultat element HTML, ne le notranja vsebina izbranega elementa. Za dostop do vsebine lahko uporabite vozlišča notranjiHTML lastnina:

dokument.querySelector('.orange').innerHTML

Uporaba podrejenih lastnosti ali lastnosti childNodes

The otroci lastnost izbere vse podrejene elemente, ki so neposredno pod danim elementom. Tukaj je primer otroci nepremičnina v akciji:

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

Sečnja jabolka na konzolo bo prikazal nabor vseh elementov seznama neposredno pod elementom z razredom "seznam jabolk" kot zbirko HTML. Zbirka HTML je predmet, podoben matriki, zato lahko za izbiro elementov uporabite zapis v oklepaju, kot pri querySelectorAll.

Za razliko od otroci lastnina, childNodes vrne vsa neposredna podrejena vozlišča (ne le podrejene elemente). Če vas zanimajo le podrejeni elementi, recimo samo elementi seznama, uporabite otroci premoženje.

Uporaba posebnih lastnosti lastChild in firstChild

Ti dve metodi nista tako robustni kot prvi dve. Kot pove že njihova imena, lastChild in firstChild lastnosti vrnejo zadnje in prvo podrejeno vozlišče elementa.

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

Prečkanje DOM navzgor

Po DOM se lahko pomikate navzgor z uporabo parentElement (oz parentNode) in najbližji lastnosti.

Uporaba parentElement ali parentNode

Oboje parentElement oz parentNode lastnosti vam omogočajo, da izberete nadrejeno vozlišče izbranega elementa eno raven višje. Kritična razlika je v tem parentElement izbere samo nadrejeno vozlišče, ki je element. Po drugi strani, parentNode lahko izbere nadrejenega ne glede na to, ali gre za element ali drugo vrsto vozlišča.

V spodnjem vzorcu kode uporabljamo parentElement da izberete div z razredom "wrapper-1" iz "apple-list":

konst appleList = dokument.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konzola.log (parentDiv); // prikaže element div z ovojnico razreda-1

Uporaba najbližje nepremičnine

The najbližji lastnost izbere prvi nadrejeni element, ki se ujema z podanim izbirnikom. Omogoča vam izbiro več ravni navzgor namesto ene. Na primer, če že imamo izbran gumb z razredom "btn-1", lahko izberemo glavni element z uporabo najbližji nepremičnine, kot sledi:

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

Všeč mi je querySelector in querySelectorAll, uporabite ustrezne izbirnike v najbližji metoda.

Prečenje DOM bočno

Za bočno hojo DOM sta na voljo dve metodi. Lahko uporabiš nextElementSibling oz prejšnjiElementSibling. Uporaba nextElementSibling da izberete naslednji sorodniški element in prejšnjiElementSibling da izberete prejšnjega brata ali sestro.

konst oranžna = dokument.querySelector('.orange');
konst jabolko = pomaranča.previousElementSibling;
konst avokado = pomaranča.nextElementSibling;

Obstajajo tudi enakovredni nextSibling in prejšnji sorojenec lastnosti, ki izbirajo tudi med vsemi vrstami vozlišč, ne le med elementi.

Naredite več z veriženjem lastnosti in metod prehoda DOM

Vse zgornje metode in lastnosti vam lahko omogočijo izbiro katerega koli vozlišča v DOM. Vendar se boste v nekaterih primerih morda želeli najprej premakniti navzgor, nato navzdol ali vstran. V tem primeru se bo veriženje različnih lastnosti izkazalo za priročno.