„The DOM” este un termen care se folosește mult în proiectarea și dezvoltarea front-end-ului web. Acesta reprezintă „Document Object Model” și este o parte fundamentală a site-urilor web.
Oricât de important este DOM, mulți oameni nu îl înțeleg. De fapt, puteți programa site-uri web de ani de zile fără a afla multe despre asta. Dar pe măsură ce tehnologia front-end avansează, înțelegerea DOM devine tot mai importantă.
Înțelegerea contractului DOM
În programarea orientată obiect, există un construct numit interfață. O interfață nu face nimic pe cont propriu. În schimb, creează un contract. Se spune că orice poate interacționa cu orice altceva, atâta timp cât respectă regulile contractului de interfață.
Având o interfață permite oricărei părți a unui program să interacționeze cu orice altă parte a programului într-un mod controlat și previzibil. Interfața face, de asemenea, posibil ca o parte a programului să funcționeze cu orice altă parte, chiar dacă nu știe nimic despre partea programului de pe cealaltă parte a interfeței.
O interfață este ca o priză electrică în perete. Dispozitivul dvs. nu trebuie să știe de unde provine puterea, atâta timp cât tensiunea este corectă. Transformatorul din colț nu trebuie să știe ce alimentează. Trebuie doar să trimită electricitate la tensiunea corectă către casa ta.
DOM este un strat de interfață între pagina web și codul care o creează și o modifică. Când vizitați un site web, vedeți cum browserul redă DOM-ul acelui site web. Când scrieți HTML, efectiv programați folosind API-ul DOM (interfața de programare).
Standardul DOM este menținut de o organizație numită World Wide Web Consortiumsau W3C. Au creat documentație foarte detaliată care definește DOM standard.
În acest moment, s-ar putea să vă gândiți că nu fac o treabă foarte bună. La urma urmei, există atât de multe probleme cauzate de probleme de compatibilitate între browser-uri.
Problema nu este legată de standard. Este cu browserele în sine. Multe browsere au adăugat funcționalitate la implementarea lor DOM care nu respectă standardele W3C. Uneori, această funcționalitate devine populară și este implementată în standardul DOM, forțând alte browsere să ajungă din urmă.
O altă problemă este că unii oameni folosesc în continuare versiuni mai vechi de browsere care nu au încorporat cel mai recent standard DOM. Și, uneori, browserele nu implementează standardul corect.
Cum este structurat DOM
Vă puteți gândi la DOM ca la un copac. elementul este trunchiul și toate elementele din interiorul acestuia sunt ramuri. Când cuibărești elemente HTML în interiorul unui element părinte, creezi de fapt ramuri din ramura respectivă. Termenul adecvat pentru fiecare ramură este „nod”.
Structura arborelui creează relații logice între noduri, ca un arbore genealogic. Fiecare nod poate avea un părinte și strămoși din care se ramifică. Pot avea frați. Și nodurile pot avea copii și descendenți. Gândirea în acești termeni ajută foarte mult atunci când utilizați JavaScript și CSS pentru a interacționa cu DOM.
Cum interacționează HTML cu DOM
DOM-ul este definit prin crearea unui obiect document cu interfața documentului. Codul dvs. HTML este cel mai direct mod de a crea un document. HTML vă oferă o modalitate simplă de a defini documentul fără a fi nevoie să faceți programare tradițională.
Dacă tocmai începeți cu HTML, iată-le cinci sfaturi pentru a vă familiariza cu ea.
HTML este coloana vertebrală a fiecărei pagini web. Dacă sunteți începător, permiteți-ne să vă prezentăm pașii de bază pentru a înțelege HTML.
HTML este mai simplu și mai iertător decât limbajele de programare tradiționale. Fac interacțiunea cu DOM ușoară pentru designerii de web începători.
Cum interacționează CSS cu DOM
Odată ce HTML-ul dvs. a structurat documentul DOM, CSS poate stiliza documentul respectiv. Pentru a face acest lucru, trebuie să poată găsi elementele pe care doriți să le stilizați. Face acest lucru în câteva moduri.
Puteți accesa nodurile documentelor făcând referire la elemente după nume, cum ar fi și. De asemenea, CSS poate accesa elementele direct prin referință clasă și id nume. Stilul de clasă se aplică mai multor elemente, astfel încât să le puteți stiliza pe toate în același timp. În schimb, stilul id aplică modificări doar unui singur element.
De asemenea, puteți accesa structura arborelui genealogic cu CSS și reglați fin accesul pentru mai mult control. Selectorele CSS vă permit să alegeți mai multe elemente și vă oferă o pungă de trucuri pentru a le găsi. Puteți căuta copii după strămoșii lor, combinațiile de clase și multe altele.
Cum interacționează JavaScript cu DOM
JavaScript are cel mai mare control asupra documentului, deoarece JavaScript este un limbaj de programare real cu obiecte, control al fluxului, variabile etc. DOM oferă mai multe interfețe care permit JavaScript posibilitatea de a manipula documentul, elementele și alte noduri.
Legate de: Ce este JavaScript?
JavaScript poate adăuga și elimina noduri, precum și schimba stilul lor. Și JavaScript poate urmări evenimentele din document, cum ar fi să plasați mouse-ul peste un element, să faceți clic și să apăsați tastele.
JavaScript poate căuta și naviga în arborele documentelor într-un mod foarte similar cu CSS. Este capabil să găsească elemente după id și clasă. Și poate prelua liste de elemente copil ca tablouri.
Viitorul dezvoltării web și DOM
Internetul s-a schimbat foarte mult încă din primele zile. În primele zile, JavaScript era folosit în principal pentru efecte speciale și afișări simple de date. Majoritatea site-urilor web nu erau mult mai mult decât broșuri digitale. Totuși, AJAX a schimbat toate acestea.
AJAX permite site-urilor web să actualizeze datele afișate de pe un server din mers fără a reîncărca pagina. Înainte de AJAX, fiecare modificare a datelor putea fi văzută numai atunci când pagina a fost reîncărcată sau utilizatorul a navigat către o altă pagină.
După AJAX, aplicațiile web au devenit din ce în ce mai populare. Internetul nu mai este o colecție de site-uri web statice simple și câteva aplicații cu funcționalitate ridicată, precum eBay. Acum internetul este aproape un al doilea sistem de operare, plin de aplicații extrem de funcționale.
Pe măsură ce așteptările utilizatorilor cresc, tehnologia trebuie să țină pasul. JavaScript nu este cel mai puternic sau cel mai rapid limbaj. De asemenea, suferă de o mână de probleme, cum ar fi erorile numerice în virgulă mobilă care îl fac mai puțin de dorit pentru dezvoltatori. Aici intervine WebAssembly.
WebAssembly aduce multe dintre avantajele codului nativ în browser, inclusiv viteză îmbunătățită și acces mai bun la hardware. Va permite programatorilor să folosească alte limbaje pentru a construi site-uri web precum C ++ și Rust.
Dar chiar și cu marile îmbunătățiri pe care le va aduce WebAssembly, DOM va fi în continuare acolo, oferind o interfață consistentă între cod și ceea ce este afișat în browser.
Reduceți oboseala ochilor și sporiți durata de viață a bateriei prin comutarea Microsoft Outlook în modul întunecat.
- Programare
- HTML
- CSS
- Model de obiect document
Lee este un nomad cu normă întreagă și un polimat cu multe pasiuni și interese. Unele dintre aceste pasiuni se învârt în jurul productivității, dezvoltării personale și a scrisului.
Aboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Încă un pas…!
Vă rugăm să confirmați adresa de e-mail în e-mailul pe care tocmai vi l-am trimis.
