Javascript DOM (Document Object Model) este o interfață care permite dezvoltatorilor să manipuleze conținutul, structura și stilul unui site web. În acest articol, vom afla ce este DOM și cum îl puteți manipula folosind Javascript. Acest articol poate fi, de asemenea, utilizat ca referință pentru operațiunile de bază DOM.
Table of Contents
Ce este DOM?
La nivelul cel mai de bază, un site web este format dintr-un document HTML și CSS. Browserul creează o reprezentare a documentului cunoscut sub numele de Document Object Model (DOM). Acest document permite Javascript să acceseze și să manipuleze elementele și stilurile unui site web. Modelul este încorporat într-o structură de copac a obiectelor și definește:
- Elemente HTML ca obiecte
- Proprietăți și evenimente ale elementelor HTML
- Metode de accesare a elementelor HTML

Locurile elementelor sunt denumite noduri. Nu numai elementele obțin noduri, ci și atributele elementelor și ale textului primesc propriul nod (atribute-noduri și text-noduri).
Document DOM
Documentul DOM este proprietarul tuturor celorlalte obiecte din pagina dvs. web. Asta înseamnă că, dacă doriți să accesați orice obiect de pe pagina dvs. web, trebuie să începeți întotdeauna cu documentul. De asemenea, conține multe proprietăți și metode importante care ne permit să accesăm și să modificăm site-ul nostru web.
Găsirea elementelor HTML
Acum, că înțelegem ce este documentul DOM, putem începe să obținem primele noastre elemente HTML. Există mai multe moduri diferite de a face acest lucru folosind Javascript DOM aici sunt cele mai frecvente:
Obțineți elementul după ID
getElementById () metoda este utilizată pentru a obține un singur element prin id-ul său. Să vedem un exemplu:
var title = document.getElementById(‘header-title’);
Aici obținem elementul cu id-ul header-title și îl salvăm într-o variabilă.
Obțineți elemente după numele clasei
De asemenea, putem obține mai multe obiecte folosind getElementsByClassName () metoda care returnează o serie de elemente.
var items = document.getElementsByClassName(‘list-items’);
Aici primim toate articolele cu clasa list-items și salvați-le într-o variabilă.
Obțineți elementul după numele etichetei
De asemenea, putem obține elementele noastre după numele etichetei folosind getElementsByTagName () metodă.
var listItems = document.getElementsByTagName(‘li’);
Aici avem toate li elemente ale documentului nostru HTML și le salvăm într-o variabilă.
Queryselector
querySelector () metoda returnează primul element care se potrivește cu un anumit Selector CSS. Asta înseamnă că puteți obține elemente după ID, clasă, etichetă și toți ceilalți selectori CSS valabili. Aici doar enumer câteva dintre cele mai populare opțiuni.
Obțineți după id:
var header = document.querySelector(‘#header’)
Obțineți după clasă:
var items = document.querySelector(‘.list-items’)
Obțineți după etichetă:
var headings = document.querySelector(‘h1’);
Obțineți elemente mai specifice:
De asemenea, putem obține elemente mai specifice folosind Selectoare CSS.
document.querySelector(“h1.heading”);
În acest exemplu, căutăm o etichetă și o clasă în același timp și returnăm primul element care trece Selectorul CSS.
Queryselectorall
querySelectorAll () metoda este complet la fel ca querySelector () cu excepția faptului că returnează toate elementele care se potrivesc Selectorului CSS.
var heading = document.querySelectorAll(‘h1.heading’);
În acest exemplu, obținem toate h1 etichete care au o clasă de îndreptare și păstrați-le într-o matrice.
Schimbarea elementelor HTML
DOM-ul HTML ne permite să schimbăm conținutul și stilul unui element HTML modificându-i proprietățile.
Schimbarea codului HTML
Proprietatea HTML interioară poate fi utilizată pentru a schimba conținutul unui element HTML.
document.getElementById(“#header”).innerHTML = “Hello World!”;
În acest exemplu, obținem elementul cu un id de antet și setăm conținutul interior la „Hello World!”.
InnerHTML poate fi, de asemenea, utilizat pentru a pune etichete într-o altă etichetă.
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"
Aici punem o etichetă h1 în toate div-urile deja existente.
Modificarea valorii unui atribut
De asemenea, puteți modifica valoarea unui atribut folosind DOM.
document.getElementsByTag(“img”).src = “test.jpg”;
În acest exemplu schimbăm src-ul tuturor
Schimbarea stilului
Pentru a schimba stilul unui element HTML, trebuie să schimbăm proprietatea stilului elementelor noastre. Iată un exemplu de sintaxă pentru schimbarea stilurilor:
document.getElementById(id).style.property = new style
Acum, să vedem un exemplu în care obținem un element și schimbăm marginea de jos într-o linie neagră continuă:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
Proprietățile CSS trebuie scrise în camelcase în locul numelui normal al proprietății CSS. În acest exemplu, am folosit borderBottom în loc de border-bottom.
Adăugarea și ștergerea elementelor
Acum vom arunca o privire asupra modului în care putem adăuga elemente noi și șterge altele existente.
Adăugarea de elemente
var div = document.createElement(‘div’);
Aici doar creăm un element div folosind createElement () metoda care ia un tagname ca parametru și îl salvează într-o variabilă. După aceea, trebuie doar să îi oferim un conținut și apoi să îl inserăm în documentul DOM.
var newContent = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);
Aici creăm conținut utilizând metoda createTextNode () care ia un șir ca parametru și apoi introducem noul nostru element div înainte de un div care există deja în documentul nostru.
Ștergerea elementelor
var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);
Aici obținem un element și îl ștergem folosind metoda removeChild ().
Înlocuiți elementele
Acum să aruncăm o privire asupra modului în care putem înlocui articolele.
var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);
Aici înlocuim un element folosind replaceChild () metodă. Primul argument este noul element, iar al doilea argument este elementul pe care dorim să îl înlocuim.
Scrierea directă în fluxul de ieșire HTML
De asemenea, putem scrie expresii HTML și JavaScript direct în fluxul de ieșire HTML folosind metoda write ().
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);
De asemenea, putem transmite expresii JavaScript precum un obiect de dată.
document.write(Date());
Metoda write () poate lua, de asemenea, mai multe argumente care vor fi anexate la document în ordinea apariției lor.
Manipulatori de evenimente
DOM-ul HTML permite, de asemenea, Javascript să reacționeze la evenimentele HTML. Aici tocmai am enumerat unele dintre cele mai importante:
- faceți clic pe mouse
- încărcarea paginii
- mișcarea mouse-ului
- schimbarea câmpului de intrare
Atribuiți evenimente
Puteți defini evenimente direct în codul dvs. HTML folosind atribute pe etichete. Iată un exemplu de onclick eveniment:
<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>
În acest exemplu, textul
se va schimba în „Bună ziua!” când faceți clic pe buton.De asemenea, puteți apela funcții atunci când este declanșat un eveniment, după cum puteți vedea în exemplul următor.
<h1 onclick=”changeText(this)”>Click me!</h1>
Aici îl numim changeText () metoda când butonul este făcut clic și treceți elementul ca atribut.
De asemenea, putem atribui aceleași evenimente în codul nostru Javascript.
document.getElementById(“btn”).onclick = changeText();
Atribuiți ascultători de evenimente
Acum să vedem cum puteți atribui ascultători de evenimente elementelor dvs. HTML.
document.getElementById(“btn”)addEventListener('click', runEvent);
Aici tocmai am atribuit un clickevent care apelează metoda runEvent când se face clic pe elementul nostru btn.
De asemenea, puteți atribui mai multe evenimente unui singur element:
document.getElementById(“btn”)addEventListener('mouseover', runEvent);
Relațiile nodului
Nodurile din documentul DOM au o relație ierarhică între ele. Aceasta înseamnă că nodurile sunt structurate ca un copac. Folosim termenii părinte, frate și copil pentru a descrie relația dintre noduri.
Nodul de sus se numește rădăcină și este singurul nod care nu are părinte. Rădăcina într-un document HTML normal este eticheta
deoarece nu are părinte și este eticheta de sus a documentului.Navigarea între noduri
Putem naviga între noduri folosind aceste proprietăți:
- parentNode
- childNodes
- primul copil
- ultimul copil
- următorul frate
Iată un exemplu cum puteți obține elementul părinte al unui h1.
var parent = document.getElementById(“heading”).parentNode
Concluzie
Ai reușit până la capăt! Sper că acest articol te-a ajutat să înțelegi Javascript DOM și cum să îl folosești pentru a manipula elemente de pe site-ul tău web.
Dacă doriți să citiți mai multe articole ca acesta, puteți să le vizitați site-ul web sau începeți să-l urmați pe al meu buletin informativ.
Dacă aveți întrebări sau feedback, anunțați-mă în comentariile de mai jos.