HTML DOM (Document Object Model) este o reprezentare ierarhică a documentelor HTML. Acesta definește structura și proprietățile elementelor de pe o pagină web, permițând JavaScript să acceseze, să manipuleze și să actualizeze în mod dinamic conținutul, îmbunătățind interactivitatea și funcționalitatea.
Notă : Se numește structură logică deoarece DOM nu specifică nicio relație între obiecte.
Cuprins
- De ce este necesar DOM?
- Structura DOM
- Proprietățile DOM
- Metode ale modelului obiect document
- Ce nu este DOM?
- Niveluri de DOM:
Ce este DOM?
DOM , sau Model obiect document , este o interfață de programare care reprezintă documente structurate precum HTML și XML ca un arbore de obiecte. Acesta definește modul de accesare, manipulare și modificare a elementelor documentului folosind limbaje de scripting precum JavaScript.
Deci, practic, Document Object Model este un API care reprezintă și interacționează cu documente HTML sau XML.
DOM-ul este a W3C (Consorțiul World Wide Web) standard și definește un standard pentru accesarea documentelor.
Standardul W3C Dom este împărțit în trei părți diferite:
- Core DOM – model standard pentru toate tipurile de documente
- XML DOM – model standard pentru documente XML
- HTML DOM – model standard pentru documente HTML
HTML DOM
HTML DOM este un standard model de obiect si interfata de programare pt documente HTML. HTML DOM este o modalitate de a reprezenta pagina web într-un mod ierarhic structurat astfel încât programatorilor și utilizatorilor le va deveni mai ușor să gliseze prin document.
Cu HTML DOM, putem accesa și manipula cu ușurință etichete, ID-uri, clase, atribute sau elemente HTML folosind comenzi sau metode furnizate de obiectul document.
Folosind DOM JavaScript avem acces atât la HTML, cât și la CSS ale paginii web și, de asemenea, putem modifica comportamentul elementelor HTML.
De ce este necesar DOM?
HTML este folosit pentru structura paginile web și Javascript este folosit pentru a adăuga comportament către paginile noastre web. Când un fișier HTML este încărcat în browser, JavaScript nu poate înțelege direct documentul HTML. Deci interpretează și interacționează cu Document Object Model (DOM), care este creat de browser pe baza documentului HTML.
DOM este, practic, reprezentarea aceluiași document HTML, dar într-o structură arborescentă compusă din obiecte. JavaScript nu poate înțelege etichetele () din documentul HTML, dar poate înțelege obiectul h1 în DOM.
JavaScript interpretează DOM cu ușurință, folosindu-l ca o punte pentru a accesa și a manipula elementele. DOM Javascript permite accesul la fiecare dintre obiecte (h1, p, etc) prin utilizarea diferitelor funcții.
Document Object Model (DOM) este esențial în dezvoltarea web din mai multe motive:
- Pagini Web dinamice: Vă permite să creați pagini web dinamice. Permite JavaScript să acceseze și să manipuleze conținutul paginii, structura și stilul în mod dinamic, ceea ce oferă experiențe web interactive și receptive, cum ar fi actualizarea conținutului fără a reîncărca întreaga pagină sau a răspunde instantaneu la acțiunile utilizatorului.
- Interactivitate: Cu DOM, puteți răspunde la acțiunile utilizatorului (cum ar fi clicuri, intrări sau derulări) și puteți modifica pagina web în consecință.
- Actualizări de conținut: Când doriți să actualizați conținutul fără a reîmprospăta întreaga pagină, DOM permite modificări specifice, făcând aplicațiile web mai eficiente și mai ușor de utilizat.
- Compatibilitate între browsere: Diferitele browsere pot reda HTML și CSS în moduri diferite. DOM oferă o modalitate standardizată de a interacționa cu elementele paginii.
- Aplicații cu o singură pagină (SPA): Aplicațiile construite cu cadre precum React sau Angular se bazează în mare măsură pe DOM pentru randarea și actualizarea eficientă a conținutului într-o singură pagină HTML, fără a reîncărca întreaga pagină.
Structura DOM
DOM poate fi considerat un copac sau o pădure (mai mult de un copac). Termenul modelul structurii este uneori folosit pentru a descrie reprezentarea arborescentă a unui document.
Fiecare ramură a arborelui se termină într-un nod și fiecare nod conține obiecte. Ascultătorii de evenimente pot fi adăugați la noduri și declanșați la apariția unui anumit eveniment. O proprietate importantă a modelelor de structură DOM este izomorfism structural : dacă oricare două implementări DOM sunt folosite pentru a crea o reprezentare a aceluiași document, acestea vor crea același model de structură, cu exact aceleași obiecte și relații.
De ce DOM se numește un model de obiect?
Documentele sunt modelate folosind obiecte, iar modelul include nu numai structura unui document, ci și comportamentul unui document și obiectele din care este compus ca elemente de etichetă cu atribute în HTML.
Proprietățile DOM
Să vedem proprietățile obiectului document care pot fi accesate și modificate de obiectul document.
Reprezentarea DOM
- Obiect fereastră : Obiectul fereastră este obiectul browserului care se află întotdeauna în partea de sus a ierarhiei. Este ca un API care este folosit pentru a seta și accesa toate proprietățile și metodele browserului. Este creat automat de browser.
- Obiect document: Când un document HTML este încărcat într-o fereastră, acesta devine un obiect document. Obiectul „document” are diverse proprietăți care se referă la alte obiecte care permit accesul și modificarea conținutului paginii web. Dacă este nevoie să accesăm orice element dintr-o pagină HTML, începem întotdeauna cu accesarea obiectului „document”. Obiectul document este proprietatea obiectului fereastră.
- Obiect formular: Este reprezentat de formă Etichete.
- Link obiect : Este reprezentat de legătură Etichete.
- Obiect Ancoră : Este reprezentat de un href Etichete.
- Elemente de control al formularului: Formularul poate avea multe elemente de control, cum ar fi câmpuri de text, butoane, butoane radio, casete de selectare etc.
Metode ale obiectului document
DOM furnizează diverse metode care permit utilizatorilor să interacționeze și să manipuleze documentul. Unele metode DOM utilizate în mod obișnuit sunt:
comanda Linux Run
| Metodă | Descriere |
|---|---|
| scrie (şir) | Scrie șirul dat pe document. |
| getElementById() | Returnează elementul având valoarea dată de id. |
| getElementsByName() | Returnează toate elementele care au valoarea numelui dat. |
| getElementsByTagName() | Returnează toate elementele care au numele etichetei date. |
| getElementsByClassName() | Returnează toate elementele care au numele clasei date. |
Exemplu: În acest exemplu, folosim codul elementului HTML pentru a găsi elementul HTML DOM.
HTML techcodeview.comh2>
Un portal de informatică pentru tocilari. p>
Acest exemplu ilustrează metoda getElementByIdb>. p>
p>