DOM izpratne ir būtiska jūsu tīmekļa izstrādes karjerā. Jums jāzina, kā atlasīt dažādus elementus DOM, lai pēc tam varētu lasīt to saturu vai modificēt tos.

DOM šķērsošana apraksta, kā pārvietoties koka veida struktūrā, ko ģenerē HTML dokumenti. Šeit ir pilns ceļvedis par to, kā šķērsot DOM, izmantojot JavaScript.

Kas ir DOM šķērsošana?

The Dokumenta objekta modelis, vai saīsināti DOM, ir kokam līdzīgs HTML dokumenta attēlojums. Tas nodrošina an API kas ļauj jums kā tīmekļa izstrādātājam mijiedarboties ar vietni, izmantojot JavaScript.

Katrs DOM vienums ir pazīstams kā mezgls. Tikai izmantojot DOM, varat manipulēt ar sava HTML dokumenta struktūru, saturu un stilu.

DOM šķērsošana (saukta arī par iešanu vai navigāciju pa DOM) ir darbība, kurā DOM kokā tiek atlasīti mezgli no citiem mezgliem. Jūs, iespējams, jau esat iepazinies ar vairākām metodēm piekļūt elementiem DOM kokā pēc ID, klases vai atzīmes nosaukuma. Varat izmantot tādas metodes kā document.querySelector() un document.getElementById() darīt tā.

Ir arī citas metodes, kuras varat izmantot kopā, lai efektīvāk un stabilāk pārvietotos pa DOM. Kā jau varat iedomāties, labāk ir meklēt no jau zināma punkta kartē, nevis veikt pilnu meklēšanu.

Piemēram, bērna elementa atlase no tā vecāka ir vienkāršāka un efektīvāka nekā tā meklēšana visā kokā.

Pārvietojama dokumenta paraugs

Kad jums ir piekļuve noteiktam mezglam DOM kokā, varat piekļūt ar to saistītajiem mezgliem dažādos veidos. Varat pārvietoties uz leju, uz augšu vai uz sāniem DOM kokā no atlasītā mezgla.

Pirmā metode ietver elementa meklēšanu, sākot ar augstāko mezglu (piemēram, dokumenta mezglu) un virzoties uz leju.

Otrs veids ir pretējs: jūs virzāties no iekšējā elementa uz augšu pa koku, meklējot ārējo elementu. Pēdējā metode ir, ja dokumentu kokā meklējat elementu no cita elementa tajā pašā līmenī (tas nozīmē, ka abi elementi ir brāļi un māsas).

Lai parādītu, apsveriet šo HTML dokumenta piemēru:

<!DOCTYPE html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="UTF-8" />
<meta http-equiv="X-UA saderīgs" saturs="IE=mala" />
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1,0" />
<virsraksts>Lapas paraugs</title>
</head>
<ķermeni>
<galvenais>
<h1>Manas lapas nosaukums</h1>
<lpp>Šeit ir jauks paraksts</lpp>


<raksta klase="pirmais__raksts">
<h2>Apbrīnojamo augļu saraksts</h2>
<lpp>Jāēd augļi</lpp>


<div klase="iesaiņojums-1">
<ul klase="ābolu saraksts">
<li klase="ābolu">Āboli</li>
<li klase="apelsīns">Apelsīni</li>
<li klase="avokado">Avokado</li>
<li klase="vīnogas">
 Vīnogas


<ul>
<li klase="tips-1">Mēness pilieni</li>
<li>Sultāna</li>
<li>Saskaņa</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li klase="banāns">Banāni</li>
</ul>


<pogas klase="btn-1">Lasīt pilnu sarakstu</button>
</div>
</article>


<raksta klase="otrais__raksts">
<h2>Brīnišķīgas vietas Kenijā</h2>
<lpp>Jāapmeklē vietas Kenijā</lpp>


<div klase="iesaiņojums-2">
<ul klase="vietu saraksts">
<li>Masai Māra</li>
<li>Diani pludmale</li>
<li>Vatamu pludmale</li>
<li>Amboseli nacionālais parks</li>
<li>Nakuru ezers</li>
</ul>


<pogas klase="btn-2">Lasīt pilnu sarakstu</button>
</div>
</article>
</main>
</body>
</html>

DOM šķērsošana uz leju

Varat šķērsot DOM uz leju, izmantojot vienu no divām metodēm. Pirmā ir parastā atlases metode (elements.querySelector vai elements.querySelectorAll). Otrkārt, jūs varat izmantot bērniem vai bērnsNodes īpašums. Ir arī divas citas īpašas īpašības, proti, Pēdējais bērns un pirmaisBērns.

Atlases metožu izmantošana

Metodes querySelector() ļauj meklēt vienu vai vairākus elementus, kas atbilst konkrētajam atlasītājam. Piemēram, varat meklēt pirmo elementu ar klasi "pirmais raksts", izmantojot document.querySelector('.first-article'). Un atnest visu h2 elementi dokumentā, varat izmantot querySelectorAll metode: document.querySelectorAll('h2'). The querySelectorAll metode atgriež atbilstošo elementu mezglu sarakstu; katru vienumu var atlasīt, izmantojot iekavās:

konst virsraksti = dokumentu.querySelectorAll('h2');
konst firstHeading = virsraksti[0]; // atlasot pirmo h2 elementu
konst secondHeading = virsraksti[1]; // atlasot otro h2 elementu

Lietojot atlasītāja metodes, galvenā problēma ir tāda, ka pirms atlasītāja, ja iespējams, ir jāizmanto atbilstošie simboli, kā to darāt CSS. Piemēram, ".classname" klasēm un "#id" ID.

Atcerieties, ka rezultāts būs HTML elements, nevis tikai atlasītā elementa iekšējais saturs. Lai piekļūtu saturam, varat izmantot mezglu innerHTML īpašums:

dokumentu.querySelector('.orange').innerHTML

Bērnu vai childNodes rekvizītu izmantošana

The bērniem rekvizīts atlasa visus pakārtotos elementus, kas atrodas tieši zem noteiktā elementa. Šeit ir piemērs bērniem īpašums darbībā:

konst appleList = dokumentu.querySelector('.apple-list');
konst āboli = appleList.children; 
konsole.baļķis (āboli);

Mežizstrāde āboli konsole parādīs visu saraksta vienumu kopu tieši zem elementa ar "apple-list" klasi kā HTML kolekciju. HTML kolekcija ir masīvam līdzīgs objekts, tāpēc vienumu atlasīšanai varat izmantot iekavu apzīmējumus, tāpat kā querySelectorAll.

Atšķirībā no bērniem īpašums, bērnsNodes atgriež visus tiešos pakārtotos mezglus (ne tikai bērnu elementus). Ja jūs interesē tikai pakārtotie elementi, sakiet tikai saraksta vienumi, izmantojiet bērniem īpašums.

Īpašo lastChild un firstChild rekvizītu izmantošana

Šīs divas metodes nav tik spēcīgas kā pirmās divas. Kā liecina viņu nosaukumi, Pēdējais bērns un pirmaisBērns rekvizīti atgriež elementa pēdējo un pirmo pakārtoto mezglu.

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

DOM šķērsošana augšup

Varat pārvietoties uz augšu DOM, izmantojot vecākuElements (vai vecākuNode) un tuvākais īpašības.

ParenterElement vai parentNode izmantošana

Abi vecākuElements vai vecākuNode rekvizīti ļauj atlasīt atlasītā elementa vecākmezglu vienu līmeni uz augšu. Būtiskā atšķirība ir tā vecākuElements izvēlas tikai vecāku mezglu, kas ir elements. No otras puses, vecākuNode var atlasīt vecāku neatkarīgi no tā, vai tas ir elements vai cits mezgla veids.

Tālāk esošajā koda paraugā mēs izmantojam vecākuElements lai atlasītu div ar klasi "wrapper-1" no "apple-list":

konst appleList = dokumentu.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konsole.log (parentDiv); // parāda div elementu ar klases iesaiņojumu-1

Izmantojot tuvāko īpašumu

The tuvākais rekvizīts atlasa pirmo vecākelementu, kas atbilst norādītajam atlasītājam. Tas ļauj izvēlēties vairākus līmeņus uz augšu, nevis vienu. Piemēram, ja mums jau ir atlasīta poga ar klasi "btn-1", mēs varam atlasīt galvenais elements, izmantojot tuvākais īpašumu šādi:

konst btn1 = dokumentu.querySelector('.btn-1');
const mainEl = btn1.closest('galvenais');
konsole.log (mainEl); // parāda galveno elementu

Patīk querySelector un querySelectorAll, izmantojiet atbilstošos atlasītājus tuvākais metodi.

DOM šķērsošana uz sāniem

Ir pieejamas divas metodes, kā staigāt DOM uz sāniem. Tu vari izmantot nākamaisElementsBrālis vai iepriekšējaisElementsMāsa. Izmantot nākamaisElementsBrālis lai atlasītu šādu brāļa elementu un iepriekšējaisElementsMāsa lai izvēlētos iepriekšējo brāli.

konst oranžs = dokumentu.querySelector('.oranžs');
konst ābols = oranžs.iepriekšējaisElementSsibling;
konst avokado = apelsīns.nextElementSsibling;

Ir arī līdzvērtīgi nākamais brālis un iepriekšējais brālis rekvizīti, kas arī atlasa no visiem mezglu veidiem, ne tikai no elementiem.

Padariet vairāk, saķēdējot DOM šķērsošanas īpašības un metodes

Visas iepriekš minētās metodes un rekvizīti ļauj atlasīt jebkuru DOM mezglu. Tomēr dažos gadījumos, iespējams, vēlēsities vispirms pārvietoties uz augšu, pēc tam uz leju vai uz sāniem. Tādā gadījumā noderēs dažādu īpašību savienošana kopā.