Document Object Model (DOM) este reprezentarea structurală a unui document HTML. DOM-ul este un arbore de noduri pe care browserul le creează pentru fiecare pagină web de pe internet.

DOM-ul este orientat pe obiecte. Fiecare element din DOM are propriul său set de atribute și metode pe care le puteți accesa folosind JavaScript.

În acest articol tutorial, veți învăța cum să utilizați funcțiile selectorului DOM pentru a accesa elementele unei pagini web.

Cum să accesați elementele DOM

Puteți accesa elementul DOM de nivel superior al unei pagini web prin intermediul obiectului document global. De exemplu, dacă aveți o pagină web ca următoarea:

Bine ati venit


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Despre


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Articole



Articolul Titlul Unu


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Citeste mai mult 





Articolul Titlul doi


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Citeste mai mult 





Articolul Titlul Trei


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Citeste mai mult 





Articolul Titlul patru


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Citeste mai mult 

Tastare document în consola browserului dvs. și apăsând enter va produce următoarea ieșire:

Ieșirea din consola dvs. este interactivă. Puteți face clic pe cap și corp elemente pentru a le extinde. Procedând astfel, se va produce următorul rezultat:

Fiecare element de secțiune din eticheta este, de asemenea, extensibilă. În funcție de structura unei pagini web, elementele se vor extinde în continuare pentru a dezvălui mai multe elemente. Acest lucru ar trebui să vă ofere o înțelegere mai clară a structurii DOM.

Legate de: Eroul ascuns al site-urilor web: înțelegerea DOM

Obiectul document are o proprietate specială, corp, reprezentând elementul corpului. Deci, pentru a accesa elementul body, puteți introduce următoarele în consolă:

document.corp

Aceasta va produce următorul rezultat:

Dar acest lucru este cât de departe poți merge folosind proprietățile obiectului. Fiecare pagină are un cap și un corp, dar de altfel este unică. Deci tastând document.corp.secţiune sau ceva similar pur și simplu nu va funcționa așa cum ați dori. În schimb, există metode pe care le puteți apela pe obiectul document pentru a accesa anumite elemente.

Ce sunt selectoarele de elemente DOM?

Selectorii de elemente DOM sunt un grup de metode JavaScript pe care le puteți utiliza pe obiectul document pentru a accesa elemente dintr-o pagină web. Selectoarele de elemente DOM au două categorii: selectoare unice și multiple.

Aceste funcții acționează într-un mod similar cu selectoarele CSS. Acestea vă permit să preluați elemente pe baza numelui etichetei sau a atributelor id-ului și clasei. Puteți chiar să preluați elemente folosind orice selector CSS.

Legate de: Cum să vizați o parte a unei pagini web folosind selectoare CSS

Selectorii cu un singur element sunt:

• getElementById()
• querySelector()

Selectorii de elemente multiple sunt:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Selectorul de elemente DOM pe care îl utilizați va depinde de elementul (ele) la care încercați să obțineți acces.

Utilizarea selectoarelor unice de elemente DOM

Veți vedea în mare parte selectori în aplicațiile JavaScript. Deci, să ne îndepărtăm de consolă. Creați un fișier JavaScript și conectați-l la fișierul dvs. HTML utilizând următoarea etichetă de script:

Unde valoarea src este numele fișierului JavaScript. Plasați această etichetă de script chiar înaintea etichetei body de închidere, .

The getElementById() metoda oferă acces la un singur element dintr-o pagină web folosind valoarea ID-ului acestuia. În documentul HTML de mai sus există mai multe elemente cu ID-uri. Pentru a viza div element cu ID-ul „articol-3”, puteți adăuga următorul cod la fișierul JavaScript:

valoare = document.getElementById('articol-3')

Acum elementul div cu articolul-3 ID și toate proprietățile sale corespunzătoare sunt accesibile din valoare variabil. Puteți imprima valoare variabilă la consolă folosind următoarea linie de cod:

console.log (valoare)

Veți vedea numele clasei care este atribuit elementului div, precum și alte atribute importante, cum ar fi HTML-ul interior.

Celălalt selector de un singur element este querySelector(). Această funcție este mai versatilă, deoarece îi puteți trece orice șir de selecție CSS. Cu toate acestea, îl puteți folosi doar pentru a selecta câte un element odată.

De exemplu, există o singură clasă în aspectul HTML de mai sus - articole. Patru elemente div folosesc această clasă, dar querySelector() funcția va returna doar primul element care are clasa „articole”.

Folosind querySelector() cu o clasă

Adăugați următorul cod la sfârșitul scriptului:

valoare = document.querySelector('.articles')
console.log (valoare)

Acesta va returna doar primul div element cu o clasă „articole”. Observați că specificați selectorul în același format ca un selector CSS. În CSS, un punct de început specifică un nume de clasă.

Folosind querySelector() cu un ID

valoare = document.querySelector('#articol-3')
console.log (valoare)

Acest cod va returna singurul element cu un ID „articol-3”, al treilea div element cu o clasă „articole”. Din nou, șirul selector folosește sintaxa CSS standard, cu a # simbol care specifică un ID.

Utilizarea selectoarelor de elemente DOM multiple

Funcțiile de selectare rămase preiau grupuri de elemente. Sunt getElementsByTagName(), getElementsByClassName(), și querySelectorAll().

Utilizarea getElementsByTagName()

The getElementsByTagName() selector preia un grup de elemente cu același nume de etichetă. De exemplu, dacă doriți să selectați toate h2 elemente dintr-o pagină web, puteți utiliza următorul cod:

valoare = document.getElementsByTagName('h2')
console.log (valoare)

Aceasta stochează toate elementele h2 într-o colecție HTML numită valoare.

Utilizarea getElementsByClassName()

The getElementsByClassName() selector returnează o colecție de elemente cu același nume de clasă.

valoare = document.getElementsByClassName('articole')
console.log (valoare)

Inserarea codului de mai sus în fișierul JavaScript va returna cele patru elemente div cu numele clasei „articole” în consola browserului.

Folosind querySelectorAll()

The querySelectorAll() metoda returnează o listă de noduri cu toate elementele care se potrivesc cu selectorul dat. Pentru a accesa toate elementele de paragraf din secțiunea blog, puteți folosi următorul cod:

valoare = document.querySelectorAll('#blog p')
console.log (valoare)

Puteți chiar include mai mulți selectori în șir, separând fiecare cu o virgulă, la fel ca în CSS:

valoare = document.querySelectorAll('h2, .articles')
console.log (valoare)

Utilizați selectoarele DOM pentru a crea pagini web dinamice

În acest moment, ar trebui să aveți o înțelegere clară a DOM-ului și a modului în care funcționează. De asemenea, ar trebui să cunoașteți diferitele selectoare simple și multiple, precum și cum să le utilizați.

Totuși, obținerea accesului la elementele HTML este doar primul pas în ceea ce puteți face cu selectoarele DOM. Selectorii DOM vă vor ajuta să dezvoltați aspectele funcționale ale site-ului dvs. web, cum ar fi gestionarea evenimentelor onclick și onscroll.

Cum să vă faceți site-ul web receptiv și interactiv cu CSS și JavaScript

V-ați configurat site-ul web cu HTML și CSS, dar acum trebuie să adăugați logică. Iată ce să faci.

Citiți în continuare

Despre autor