DOM-i mõistmine on teie veebiarenduse karjääris hädavajalik. Peaksite teadma, kuidas DOM-is erinevaid elemente valida, et saaksite seejärel nende sisu lugeda või muuta.

DOM-i läbimine kirjeldab, kuidas navigeerida puulaadses struktuuris, mida HTML-dokumendid loovad. Siin on täielik juhend DOM-i läbimiseks JavaScriptiga.

Mis on DOM-i läbimine?

The Dokumendiobjekti mudel, või lühidalt DOM, on HTML-dokumendi puukujuline esitus. See annab an API mis võimaldab teil veebiarendajana JavaScripti kasutades veebisaidiga suhelda.

Iga DOM-i üksust nimetatakse sõlmeks. Ainult DOM-i kaudu saate manipuleerida oma HTML-dokumendi struktuuri, sisu ja stiiliga.

DOM-i läbimine (nimetatakse ka DOM-is kõndimiseks või navigeerimiseks) on DOM-puu sõlmede valimine teistest sõlmedest. Tõenäoliselt olete juba tuttav mitmete meetoditega juurdepääs DOM-puu elementidele nende ID, klassi või sildi nime järgi. Võite kasutada selliseid meetodeid nagu document.querySelector() ja document.getElementById() seda teha.

On ka teisi meetodeid, mida saate koos kasutada, et navigeerida DOM-is tõhusamal ja jõulisemal viisil. Nagu võite ette kujutada, on parem otsida kaardil juba tuntud punktist, kui teha täielik otsing.

instagram viewer

Näiteks alamelemendi valimine selle vanema hulgast on lihtsam ja tõhusam kui selle otsimine kogu puust.

Läbitava dokumendi näidis

Kui teil on juurdepääs DOM-puu antud sõlmele, pääsete sellega seotud sõlmedele juurde erinevatel viisidel. Saate liikuda DOM-puus valitud sõlmest alla, üles või külgsuunas.

Esimene meetod hõlmab elemendi otsimist, mis algab kõige ülemisest sõlmest (nagu dokumendi sõlm) ja liigub allapoole.

Teine võimalus on vastupidine: liigute sisemisest elemendist puu otsas üles, otsides välist elementi. Viimane meetod on siis, kui otsite dokumendipuust elementi teisest elemendist samal tasemel (see tähendab, et kaks elementi on õed-vennad).

Demonstreerimiseks vaadake seda HTML-dokumendi näidet:

<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="UTF-8" />
<meta http-equiv="X-UA-ühilduv" sisu="IE = serv" />
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1,0" />
<pealkiri>Näidisleht</title>
</head>
<keha>
<peamine>
<h1>Minu lehe pealkiri</h1>
<lk>Siia läheb kena pealkiri</lk>


<artikliklass="esimene__artikkel">
<h2>Hämmastavate puuviljade loend</h2>
<lk>Peab sööma puuvilju</lk>


<div klass="ümbris-1">
<ul klass="õuna-nimekiri">
<li klass="õun">Õunad</li>
<li klass="oranž">Apelsinid</li>
<li klass="avokaado">Avokaadod</li>
<li klass="viinamari">
 Viinamarjad


<ul>
<li klass="tüüp-1">Kuu langeb</li>
<li>Sultan</li>
<li>Concord</li>
<li>Karmiinpunane Seemneteta</li>
</ul>
</li>
<li klass="banaan">Banaanid</li>
</ul>


<nupu klass="btn-1">Loe täielikku nimekirja</button>
</div>
</article>


<artikliklass="teine__artikkel">
<h2>Hämmastavad kohad Keenias</h2>
<lk>Peab külastama kohti Keenias</lk>


<div klass="ümbris-2">
<ul klass="kohtade loend">
<li>Maasai Mara</li>
<li>Diani rand</li>
<li>Watamu rand</li>
<li>Amboseli rahvuspark</li>
<li>Nakuru järv</li>
</ul>


<nupu klass="btn-2">Loe täielikku nimekirja</button>
</div>
</article>
</main>
</body>
</html>

DOM-i läbimine allapoole

Saate DOM-i allapoole liikuda, kasutades ühte kahest meetodist. Esimene on tavaline valikumeetod (element.querySelector või element.querySelectorAll). Teiseks saate kasutada lapsed või lapsesõlmed vara. Lisaks on veel kaks erilist omadust, nimelt viimane laps ja esimene Laps.

Valimismeetodite kasutamine

Meetodid querySelector() võimaldavad otsida ühte või mitut elementi, mis vastavad antud selektorile. Näiteks võite otsida esimest elementi klassi "esimene artikkel" kasutades document.querySelector('.first-artikkel'). Ja kõik ära tuua h2 dokumendi elemente, saate kasutada querySelectorAll meetod: document.querySelectorAll('h2'). The querySelectorAll meetod tagastab sobivate elementide sõlmeloendi; saate iga üksuse valida sulgudes:

konst pealkirjad = dokument.querySelectorAll('h2');
konst firstHeading = pealkirjad[0]; // esimese h2 elemendi valimine
konst secondHeading = pealkirjad[1]; // teise h2 elemendi valimine

Selektorimeetodite kasutamisel peate kasutama sobivaid sümboleid, kui see on asjakohane, enne valijat, nagu teete CSS-is. Näiteks klasside jaoks ".classname" ja ID-de jaoks "#id".

Pidage meeles, et tulemuseks on HTML-element, mitte ainult valitud elemendi sisemine sisu. Sisule juurdepääsuks saate kasutada sõlme sisemine HTML vara:

dokument.querySelector('.orange').innerHTML

Laste või lapsesõlmede atribuutide kasutamine

The lapsed atribuut valib kõik alamelemendid, mis on otse antud elemendi all. Siin on näide sellest lapsed vara kasutuses:

konst appleList = dokument.querySelector('.apple-list');
konst õunad = appleList.children; 
konsool.log (õunad);

Logimine õunad kuvab konsooli kõigi loendiüksuste komplekti otse elemendi all koos "õunanimekirja" klassiga HTML-koguna. HTML-kogu on massiivilaadne objekt, nii et saate üksuste valimiseks kasutada sulgusid, nagu querySelectorAll puhul.

Erinevalt sellest lapsed vara, lapsesõlmed tagastab kõik otsesed alamsõlmed (mitte ainult alamelemendid). Kui olete huvitatud ainult alamelementidest, öelge, et ainult loendiüksused, kasutage lapsed vara.

Spetsiaalsete atribuutide lastChild ja firstChild kasutamine

Need kaks meetodit ei ole nii tugevad kui kaks esimest. Nagu nende nimed viitavad, viimane laps ja esimene Laps omadused tagastavad elemendi viimase ja esimese alamsõlme.

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

DOM-i läbimine ülespoole

Saate navigeerida DOM-is üles, kasutades nuppu vanemElement (või parentNode) ja lähim omadused.

ParenterElement või parentNode kasutamine

Mõlemad vanemElement või parentNode atribuudid võimaldavad valida valitud elemendi ülemsõlme ühe taseme võrra kõrgemal. Kriitiline erinevus seisneb selles vanemElement valib ainult elemendiks oleva emasõlme. Teiselt poolt, parentNode saab valida vanema, olenemata sellest, kas see on element või mõni muu sõlme tüüp.

Allolevas koodinäidis kasutame vanemElement et valida "apple-list"-st div klassiga "wrapper-1":

konst appleList = dokument.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konsool.log (parentDiv); // kuvab div elemendi klassi ümbrisega-1

Lähima kinnisvara kasutamine

The lähim atribuut valib esimese emaelemendi, mis vastab määratud valijale. See võimaldab teil valida ühe asemel mitu taset kõrgemal. Näiteks kui meil on juba valitud nupp klassiga "btn-1", saame valida selle peamine elementi kasutades lähim vara järgmiselt:

konst btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.closest('peamine');
konsool.log (mainEl); // kuvab põhielemendi

meeldib querySelector ja querySelectorAll, kasutage sobivaid valijaid lähim meetod.

DOM-i läbimine külgsuunas

DOM-i külili kõndimiseks on saadaval kaks meetodit. Sa võid kasutada järgmineElement Õde-vend või eelmineElement Õde-vend. Kasutage järgmineElement Õde-vend järgmise õdeelemendi valimiseks ja eelmineElement Õde-vend eelmise õe-venna valimiseks.

konst oranž = dokument.querySelector('.oranž');
konst õun = oranž.eelmineElementSibling;
konst avokaado = oranž.nextElementSibling;

On ka samaväärseid järgmine õde-vend ja eelmine õde-vend omadused, mis valivad ka kõigi sõlmetüüpide, mitte ainult elementide hulgast.

Tehke rohkem, aheldades DOM-i läbimise omadused ja meetodid

Kõik ülaltoodud meetodid ja omadused võimaldavad teil valida DOM-is mis tahes sõlme. Kuid mõnel juhul võite soovida liikuda kõigepealt üles, seejärel alla või külili. Sel juhul osutub kasulikuks erinevate omaduste aheldamine.