🚀 Web hosting ultra-rapid de la doar 1€/lună!
HostPedia

DOM

Dezvoltare Web
Definiție

DOM (Document Object Model) este o interfață de programare care reprezintă structura unui document HTML sau XML sub forma unui arbore ierarhic de noduri. Fiecare element, atribut și text din pagină devine un nod în acest arbore, permițând limbajelor de programare precum JavaScript să acceseze, modifice, adauge sau șteargă dinamic conținutul și structura paginii web.

Document Object Model, cunoscut sub acronimul DOM, este o reprezentare structurată a documentelor HTML și XML care permite programelor și scripturilor să acceseze și să manipuleze conținutul, structura și stilul paginilor web. DOM-ul transformă un document static într-un obiect programabil.

Când un browser încarcă o pagină HTML, acesta parsează codul și construiește un arbore DOM. Rădăcina arborelui este obiectul document, urmat de elementul <html>, care se ramifică în <head> și <body>, și așa mai departe. Fiecare element, atribut și fragment de text devine un nod în acest arbore, cu relații clare de tip părinte-copil-frate.

JavaScript interacționează cu DOM-ul prin API-uri standardizate. Metode precum document.getElementById(), document.querySelector() și document.querySelectorAll() permit selectarea elementelor. Odată selectat un element, proprietățile sale pot fi modificate: textContent pentru text, innerHTML pentru conținut HTML, style pentru stiluri inline, și classList pentru gestionarea claselor CSS.

Manipularea DOM-ului este fundamentul interactivității web. Prin addEventListener(), dezvoltatorii pot atașa funcții care răspund la evenimente precum click, submit, keypress sau scroll. Crearea de elemente noi (createElement), adăugarea lor în pagină (appendChild) și eliminarea celor existente (removeChild) permit actualizarea dinamică a interfeței fără reîncărcarea paginii.

Performanța manipulării DOM-ului este o preocupare importantă. Fiecare modificare a DOM-ului poate declanșa recalcularea layout-ului și re-randarea elementelor (reflow și repaint), operații costisitoare. De aceea, frameworkurile moderne precum React folosesc un Virtual DOM — o copie în memorie a DOM-ului real — pentru a minimiza manipulările directe și a optimiza performanța aplicațiilor web complexe.