DOM supratimas yra labai svarbus jūsų žiniatinklio kūrimo karjeroje. Turėtumėte žinoti, kaip pasirinkti skirtingus DOM elementus, kad galėtumėte perskaityti jų turinį arba juos modifikuoti.

DOM traversavimas aprašo, kaip naršyti į medį panašią struktūrą, kurią sukuria HTML dokumentai. Čia yra išsamus vadovas, kaip pereiti DOM naudojant „JavaScript“.

Kas yra DOM judėjimas?

The Dokumento objekto modelis, arba trumpiau DOM, yra į medį panašus HTML dokumento vaizdas. Tai suteikia an API leidžia jums, kaip žiniatinklio kūrėjui, sąveikauti su svetaine naudojant „JavaScript“.

Kiekvienas DOM elementas yra žinomas kaip mazgas. Tik per DOM galite valdyti savo HTML dokumento struktūrą, turinį ir stilių.

DOM perkėlimas (taip pat vadinamas vaikščiojimu arba naršymu po DOM) yra DOM medžio mazgų atrinkimas iš kitų mazgų. Tikriausiai jau esate susipažinę su keliais būdais prieiga prie DOM medžio elementų pagal jų ID, klasę arba žymos pavadinimą. Galite naudoti tokius metodus kaip document.querySelector() ir document.getElementById() tai padaryti.

instagram viewer

Yra ir kitų metodų, kuriuos galite naudoti kartu, norėdami naršyti DOM efektyvesniais ir patikimesniais būdais. Kaip galite įsivaizduoti, geriau ieškoti iš jau žinomo taško žemėlapyje, nei atlikti visą paiešką.

Pavyzdžiui, pasirinkti antrinį elementą iš pirminio elemento yra lengviau ir efektyviau nei ieškoti jo visame medyje.

Dokumento pavyzdys, kurį reikia pereiti

Kai turėsite prieigą prie nurodyto mazgo DOM medyje, galite pasiekti su juo susijusius mazgus įvairiais būdais. DOM medyje nuo pasirinkto mazgo galite judėti žemyn, aukštyn arba į šoną.

Pirmasis metodas apima elemento paiešką, pradedant nuo aukščiausio mazgo (pvz., dokumento mazgo) ir judant žemyn.

Antrasis būdas yra priešingas: judate nuo vidinio elemento į viršų medžiu, ieškodami išorinio elemento. Paskutinis metodas yra tada, kai dokumentų medyje ieškote elemento iš kito elemento tame pačiame lygyje (tai reiškia, kad du elementai yra broliai ir seserys).

Norėdami parodyti, apsvarstykite šį HTML dokumento pavyzdį:

<!DOCTYPE html>
<html lang="lt">
<galva>
<meta simbolių rinkinys ="UTF-8" />
<meta http-equiv="Suderinamas su X-UA" turinys="IE = kraštas" />
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1,0" />
<titulą>Puslapio pavyzdys</title>
</head>
<kūnas>
<pagrindinis>
<h1>Mano puslapio pavadinimas</h1>
<p>Gražus užrašas čia</p>


<straipsnio klasė ="pirmasis__straipsnis">
<h2>Nuostabių vaisių sąrašas</h2>
<p>Reikia valgyti vaisius</p>


<div klasė ="įvyniojimas-1">
<ul klasė ="obuolių sąrašas">
<li klasė ="obuolys">Obuoliai</li>
<li klasė ="oranžinė">Apelsinai</li>
<li klasė ="avokadas">Avokadai</li>
<li klasė ="Vynuogė">
 Vynuogės


<ul>
<li klasė ="tipas-1">Mėnulio lašai</li>
<li>Sultona</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li klasė ="bananas">Bananai</li>
</ul>


<mygtuko klasė="btn-1">Skaityti visą sąrašą</button>
</div>
</article>


<straipsnio klasė ="antras__straipsnis">
<h2>Nuostabios vietos Kenijoje</h2>
<p>Būtina aplankyti vietas Kenijoje</p>


<div klasė ="įvyniojimas-2">
<ul klasė ="vietų sąrašas">
<li>Masai Mara</li>
<li>Diani paplūdimys</li>
<li>Watamu paplūdimys</li>
<li>Amboselio nacionalinis parkas</li>
<li>Nakuru ežeras</li>
</ul>


<mygtuko klasė="btn-2">Skaityti visą sąrašą</button>
</div>
</article>
</main>
</body>
</html>

DOM judėjimas žemyn

Galite perkelti DOM žemyn naudodami vieną iš dviejų būdų. Pirmasis yra įprastas atrankos metodas (element.querySelector arba element.querySelectorAll). Antra, galite naudoti vaikai arba vaikasMazgai nuosavybė. Taip pat yra dar dvi ypatingos savybės, būtent Paskutinis vaikas ir pirmas vaikas.

Atrankos metodų naudojimas

querySelector() metodai leidžia ieškoti vieno ar daugiau elementų, atitinkančių nurodytą parinkiklį. Pavyzdžiui, galite ieškoti pirmojo elemento naudodami „pirmojo straipsnio“ klasę document.querySelector('.first-article'). Ir viską atnešti h2 dokumento elementus, galite naudoti querySelectorAll metodas: document.querySelectorAll('h2'). The querySelectorAll metodas grąžina atitinkančių elementų mazgų sąrašą; kiekvieną elementą galite pasirinkti naudodami skliaustų žymėjimą:

konst antraštės = dokumentas.querySelectorAll('h2');
konst firstHeading = antraštės[0]; // pasirenkant pirmąjį h2 elementą
konst secondHeading = antraštės[1]; // pasirenkant antrąjį h2 elementą

Svarbiausia, kad naudojant parinkiklio metodus reikia naudoti atitinkamus simbolius, jei reikia, prieš parinkiklį, kaip tai darote CSS. Pavyzdžiui, „.classname“ – klasėms ir „#id“ – ID.

Atminkite, kad rezultatas bus HTML elementas, o ne tik vidinis pasirinkto elemento turinys. Norėdami pasiekti turinį, galite naudoti mazgą vidinis HTML nuosavybė:

dokumentas.querySelector('.orange').innerHTML

Vaikų arba vaikų mazgų ypatybių naudojimas

The vaikai ypatybė pasirenka visus antrinius elementus, kurie yra tiesiai po nurodytu elementu. Štai pavyzdys vaikai veikiantis turtas:

konst appleList = dokumentas.querySelector('.apple-list');
konst obuoliai = obuoliųSąrašas.vaikai; 
konsolė.rąstas (obuoliai);

Miško ruoša obuoliai konsolėje bus rodomas visų sąrašo elementų rinkinys tiesiai po elementu su "Apple-list" klase kaip HTML rinkinys. HTML rinkinys yra į masyvą panašus objektas, todėl elementams pasirinkti galite naudoti skliaustų žymėjimą, kaip ir querySelectorAll.

Skirtingai nuo vaikai nuosavybė, vaikasMazgai grąžina visus tiesioginius antrinius mazgus (ne tik antrinius elementus). Jei jus domina tik antriniai elementai, sakykite tik sąrašo elementus, naudokite vaikai nuosavybė.

Specialiųjų lastChild ir firstChild savybių naudojimas

Šie du metodai nėra tokie patikimi kaip pirmieji du. Kaip rodo jų pavadinimai, Paskutinis vaikas ir pirmas vaikas savybės grąžina elemento paskutinį ir pirmąjį antrinį mazgus.

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

DOM judėjimas aukštyn

Galite naršyti DOM aukštyn naudodami tėvoElementas (arba parentNode) ir artimiausias savybių.

Naudojant parentElement arba parentNode

Abu tėvoElementas arba parentNode ypatybės leidžia pasirinkti pasirinkto elemento pirminį mazgą vienu lygiu aukštyn. Esminis skirtumas yra tas tėvoElementas pasirenka tik pagrindinį mazgą, kuris yra elementas. Iš kitos pusės, parentNode gali pasirinkti pirminį elementą, neatsižvelgiant į tai, ar tai elementas, ar kitoks mazgo tipas.

Toliau pateiktame kodo pavyzdyje naudojame tėvoElementas norėdami pasirinkti div su "wrapper-1" klase iš "apple-list":

konst appleList = dokumentas.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
konsolė.log (parentDiv); // rodo elementą div su klasės įpakavimu-1

Naudojant artimiausią nuosavybę

The artimiausias ypatybė pasirenka pirmąjį pirminį elementą, atitinkantį nurodytą parinkiklį. Tai leidžia pasirinkti kelis lygius aukščiau, o ne vieną. Pavyzdžiui, jei jau turime mygtuką su pasirinkta klase "btn-1", galime pasirinkti pagrindinis elementą naudojant artimiausias turtas taip:

konst btn1 = dokumentas.querySelector('.btn-1');
const mainEl = btn1.closest('pagrindinis');
konsolė.log (mainEl); // rodomas pagrindinis elementas

Kaip querySelector ir querySelectorAll, naudokite atitinkamus parinkiklius artimiausias metodas.

DOM važiavimas į šoną

Yra du būdai, kaip vaikščioti DOM į šoną. Tu gali naudoti kitasElementasBrolis ir sesuo arba AnkstesnisElementasBrolis ir sesuo. Naudokite kitasElementasBrolis ir sesuo norėdami pasirinkti šį brolio elementą ir AnkstesnisElementasBrolis ir sesuo kad pasirinktumėte ankstesnį brolį.

konst oranžinė = dokumentas.querySelector('.oranžinė');
konst obuolys = oranžinė.ankstesnisElementas Sesuo;
konst avokadas = apelsinas.nextElementSibling;

Yra ir lygiaverčių kitas Sesuo ir ankstesnis brolis savybės, kurios taip pat pasirenkamos iš visų mazgų tipų, o ne tik iš elementų.

Nuveikite daugiau sujungdami DOM perėjimo savybes ir metodus

Visi aukščiau pateikti metodai ir savybės leidžia pasirinkti bet kurį DOM mazgą. Tačiau kai kuriais atvejais galbūt norėsite pirmiausia pajudėti aukštyn, tada žemyn arba į šoną. Tokiu atveju bus patogu sujungti skirtingas savybes.