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.

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
O introducere in JavaScript DOM
Model DOM 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

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

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’);
Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

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’)
Citește mai multCum să alegi validatorul de utilizat: o comparație între Joi și validatorul expres

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 g /> tags to test.jpg.

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.

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.