Înțelegerea DOM-ului este esențială în cariera dvs. de dezvoltare web. Ar trebui să știți cum să selectați diferite elemente în DOM, astfel încât apoi să le puteți citi conținutul sau să le modificați.

Traversarea DOM descrie cum să navighezi în structura arborescentă pe care o generează documentele HTML. Iată un ghid complet despre cum să traversezi DOM cu JavaScript.

Ce este DOM Traversing?

The Model obiect document, sau DOM pe scurt, este o reprezentare arborescentă a unui document HTML. Oferă un API care vă permite, în calitate de dezvoltator web, să interacționați cu un site web utilizând JavaScript.

Fiecare element din DOM este cunoscut ca un nod. Numai prin intermediul DOM vă puteți manipula structura, conținutul și stilul documentului HTML.

Traversarea DOM (numită și mersul pe jos sau navigarea în DOM) este acțiunea de a selecta noduri din arborele DOM din alte noduri. Probabil că ești deja familiarizat cu mai multe metode pentru accesarea elementelor din arborele DOM după id-ul, clasa sau numele etichetei. Puteți folosi metode precum

instagram viewer
document.querySelector() și document.getElementById() să facă asta.

Există și alte metode pe care le puteți utiliza împreună, pentru a naviga în DOM în moduri mai eficiente și mai robuste. După cum vă puteți imagina, este mai bine să căutați dintr-un punct deja cunoscut de pe o hartă decât să faceți o căutare completă.

De exemplu, selectarea unui element copil din părintele său este mai ușoară și mai eficientă decât căutarea acestuia în întregul arbore.

Un exemplu de document de parcurs

Odată ce aveți acces la un anumit nod din arborele DOM, puteți accesa nodurile aferente acestuia în moduri diferite. Vă puteți deplasa în jos, în sus sau în lateral în arborele DOM de la nodul selectat.

Prima metodă implică căutarea unui element care începe cu un nod superior (cum ar fi nodul document) și se deplasează în jos.

A doua modalitate este inversă: treci de la un element interior în sus în copac, căutând un element exterior. Ultima metodă este atunci când căutați un element dintr-un alt element la același nivel (adică cele două elemente sunt frați) în arborele documentului.

Pentru a demonstra, luați în considerare acest exemplu de document HTML:

<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="UTF-8" />
<meta http-equiv="Compatibil X-UA" continut="IE=marginea" />
<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1,0" />
<titlu>Pagina Exemplu</title>
</head>
<corp>
<principal>
<h1>Titlul paginii mele</h1>
<p>Subtitrare frumoasă merge aici</p>


<clasa de articole="primul__articol">
<h2>Lista cu fructe uimitoare</h2>
<p>Trebuie să mănânce fructe</p>


<div class="înveliș-1">
<ul class="lista de mere">
<li class="măr">Merele</li>
<li class="portocale">Portocale</li>
<li class="avocado">Avocado</li>
<li class="struguri">
 Strugurii


<ul>
<li class="Tipul 1">Picături de lună</li>
<li>Sultana</li>
<li>Concordia</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li class="banană">Banane</li>
</ul>


<clasa de buton="btn-1">Citiți lista completă</button>
</div>
</article>


<clasa de articole="al doilea__articol">
<h2>Locuri uimitoare din Kenya</h2>
<p>Trebuie să vizitați locuri din Kenya</p>


<div class="înveliș-2">
<ul class="lista de locuri">
<li>Maasai Mara</li>
<li>Plaja Diani</li>
<li>Plaja Watamu</li>
<li>Parcul Național Amboseli</li>
<li>Lacul Nakuru</li>
</ul>


<clasa de buton="btn-2">Citiți lista completă</button>
</div>
</article>
</main>
</body>
</html>

Traversând DOM-ul în jos

Puteți traversa DOM în jos folosind una dintre cele două metode. Prima este metoda selectorului comun (element.querySelector sau element.querySelectorAll). În al doilea rând, puteți utiliza copii sau childNodes proprietate. Există, de asemenea, alte două proprietăți speciale, și anume, ultimul copil și primul copil.

Utilizarea metodelor de selecție

Metodele querySelector() vă permit să căutați unul sau mai multe elemente care se potrivesc unui anumit selector. De exemplu, puteți căuta primul element cu o clasă de „primul articol” folosind document.querySelector('.primul-articol'). Și să aducă totul h2 elementele din document, puteți utiliza querySelectorAll metodă: document.querySelectorAll('h2'). The querySelectorAll metoda returnează o listă de noduri cu elemente care se potrivesc; puteți selecta fiecare articol folosind notația paranteze:

const titluri = document.querySelectorAll('h2');
const firstHeading = titluri[0]; // selectând primul element h2
const secondHeading = titluri[1]; // selectând al doilea element h2

Problema majoră atunci când utilizați metodele de selectare este că trebuie să utilizați simbolurile corespunzătoare, acolo unde este cazul, înaintea selectorului, așa cum faceți în CSS. De exemplu, „.classname” pentru clase și „#id” pentru id-uri.

Amintiți-vă că rezultatul va fi un element HTML, nu doar conținutul interior al elementului selectat. Pentru a accesa conținutul, puteți folosi nodul innerHTML proprietate:

document.querySelector('.orange').innerHTML

Folosind proprietățile children sau childNodes

The copii proprietatea selectează toate elementele copil care sunt direct sub un anumit element. Iată un exemplu de copii proprietate în acțiune:

const appleList = document.querySelector('.apple-list');
const mere = appleList.children; 
consolă.bustean (mere);

Logare merele pe consolă va afișa un set de toate elementele din listă direct sub elementul cu o clasă „apple-list” ca o colecție HTML. O colecție HTML este un obiect asemănător unei matrice, așa că puteți utiliza notația paranteze pentru a selecta elemente, ca și în cazul querySelectorAll.

spre deosebire de copii proprietate, childNodes returnează toate nodurile copil directe (nu doar elementele copil). Dacă sunteți interesat doar de elementele secundare, spuneți numai elementele din listă, utilizați copii proprietate.

Utilizarea proprietăților speciale lastChild și firstChild

Aceste două metode nu sunt la fel de robuste ca primele două. După cum sugerează numele lor, ultimul copil și primul copil proprietățile returnează ultimul și primul nod copil al unui element.

const appleList = document.querySelector('.apple-list');
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;

Traversând DOM-ul în sus

Puteți naviga în sus DOM utilizând parentElement (sau parentNode) și cel mai apropiat proprietăți.

Folosind parentElement sau parentNode

Ambii parentElement sau parentNode proprietățile vă permit să selectați nodul părinte al elementului selectat cu un nivel mai sus. Diferența critică este că parentElement alege doar nodul părinte care este un element. Pe de altă parte, parentNode poate selecta un părinte indiferent dacă este un element sau un alt tip de nod.

În exemplul de cod de mai jos, folosim parentElement pentru a selecta div-ul cu clasa „wrapper-1” din „apple-list”:

const appleList = document.querySelector('.apple-list');
const parentDiv = appleList.parentElement; 
consolă.log (parentDiv); // afișează elementul div cu clasa wrapper-1

Folosind cea mai apropiată proprietate

The cel mai apropiat proprietatea selectează primul element părinte care se potrivește cu un selector specificat. Vă permite să selectați mai multe niveluri în sus în loc de unul singur. De exemplu, dacă avem deja selectat butonul cu clasa „btn-1”, putem selecta principal element folosind cel mai apropiat proprietate după cum urmează:

const btn1 = document.querySelector('.btn-1');
const mainEl = btn1.closest('principal');
consolă.log (mainEl); // afișează elementul principal

Ca querySelector și querySelectorAll, utilizați selectoare adecvate în cel mai apropiat metodă.

Traversând DOM-ul lateral

Există două metode disponibile pentru a parcurge DOM-ul lateral. Poți să folosești nextElementFrate sau previousElementFrate. Utilizare nextElementFrate pentru a selecta următorul element frate și previousElementFrate pentru a selecta fratele anterior.

const portocaliu = document.querySelector('.orange');
const apple = orange.previousElementSibling;
const avocado = orange.nextElementSibling;

Există și echivalente următorul Frate și precedentul frate proprietăți care selectează și din toate tipurile de noduri, nu doar elemente.

Faceți mai mult prin înlănțuirea proprietăților și metodelor DOM Traversal

Toate metodele și proprietățile de mai sus vă pot permite să selectați orice nod din DOM. Cu toate acestea, în unele cazuri, este posibil să doriți să vă deplasați mai întâi în sus, apoi în jos sau în lateral. În acest caz, înlănțuirea diferitelor proprietăți împreună se va dovedi utilă.