Înțelegerea modelului de obiect document (DOM) în Detalii

Am auzit de toate DOM, sau Document Object Model, care este menționat din când în când, legate de JavaScript. DOM este un concept destul de important în dezvoltarea web. Fără ea, nu am fi putut modifica dinamic paginile HTML în browser.

Învățarea și înțelegerea rezultatelor DOM în moduri mai bune accesarea, schimbarea și monitorizarea diferite elemente ale unei pagini HTML. Modelul Obiectului Documentului ne poate ajuta, de asemenea a reduce creșterile inutile în timpul executării scriptului.

Structurarea arborilor de date

Înainte de a vorbi despre ceea ce este DOM, despre cum există, cum există și ce se întâmplă în interiorul lui, vreau să știți despre copaci. Nu coniferul și tipul de foioase, ci despre Structura structurii de date.

Este mult mai ușor să înțelegem conceptul de structuri de date dacă simplificăm definiția sa. Aș spune că este vorba despre o structură a datelor aranjarea datelor. Da, doar un aranjament vechi, așa cum ați aranja mobilierul din casa sau cărțile într-un raft sau toate grupurile de alimente pe care le aveți pentru o masă pe plăcuța dvs. pentru a faceți-o semnificativă pentru dvs..

Desigur, nu este vorba doar de o structură de date, dar asta este destul de mult unde începe totul. Acest “aranjament” este în centrul tuturor. Este destul de important și în DOM. Dar nu vorbim despre DOM încă, așa că lasă-mă să te îndrept spre a structura de date pe care ați putea să o cunoașteți: matrice.

Arrays & copaci

Arrays au indicii și lungime, ei pot fi multi-dimensionale, și au mult mai multe caracteristici. Atât de important este să cunoașteți aceste lucruri despre matrice, să nu ne deranjăm chiar acum. Pentru noi, o matrice este destul de simplă. Atunci când tu aranja lucruri diferite într-o linie.

În mod similar, atunci când gândim la copaci, să spunem, este vorba despre punând lucrurile sub un altul, începând cu un singur lucru în partea de sus.

Acum, s-ar putea să luați de la început rațele cu o singură linie, rotiți-l în poziție verticală, și spune-mi asta “acum, fiecare rață este sub o altă rață”. Este un copac atunci? Este.

În funcție de datele dvs. sau de modul în care o veți utiliza, cele mai importante date din arborele dvs. (numite rădăcină) ar putea fi ceva care este de mare importanta sau ceva care este doar acolo închideți alte elemente sub el.

Oricum, elementul cel mai de sus dintr-o structură de date de copac face ceva foarte important. Acesta oferă un loc pentru începeți căutarea oricăror informații pe care doriți să le extrageți din copac.

Semnificația DOM

DOM reprezintă Document Object Model. Documentul indică un document HTML (XML) care este reprezentat ca Obiect. (În JavaScript totul poate fi reprezentat doar ca obiect!)

Modelul este create de browser care ia un document HTML și creează un obiect care îl reprezintă. Putem accesa acest obiect cu JavaScript. Și deoarece folosim acest obiect pentru a manipula documentul HTML și a construi propriile noastre aplicații, DOM este practic un API-ul.

Arborele DOM

În codul JavaScript, documentul HTML este reprezentat ca obiect. Toate datele citite din acest document sunt de asemenea, salvate ca obiecte, imbricate unul sub altul (pentru că așa cum am spus înainte, în JavaScript totul poate fi reprezentat doar ca obiecte).

Deci, aceasta este în principiu aranjamentul fizic al datelor DOM în cod: totul este aranjate ca obiecte. În mod logic, totuși, este un copac.

DOM Parser

Fiecare software de navigare are un program numit DOM Parser pentru care este responsabil parsarea unui document HTML în DOM.

Browserele citesc o pagină HTML și transformă datele în obiecte care alcătuiesc DOM. Informațiile prezente în aceste obiecte DOM JavaScript sunt aranjate logic ca arbore de structuri de date cunoscut sub numele de arbore DOM.

Parsarea datelor din HTML în arborele DOM

Luați un fișier HTML simplu. Ea are element rădăcină . Este subelemente sunteți și , fiecare dintre ele are multe elemente de copil ale lor.

Deci, esențial, browserul citește datele din documentul HTML, ceva asemănător cu acesta:

Și, le aranjează într-un copac DOM asa:

Reprezentarea fiecărui element HTML (și a conținutului său de apartenență) în arborele DOM este cunoscut sub numele de a Nodul. rădăcină nod este nodul lui .

Interfața DOM în JavaScript este numit document (deoarece reprezintă reprezentarea documentului HTML). Astfel, accesăm structura DOM a unui document HTML prin document interfață în JavaScript.

Nu numai că putem accesa, dar și manipulați documentul HTML prin DOM. Putem adăuga elemente la o pagină web, elimină și actualizează-le. De fiecare dată când modificăm sau actualizăm orice noduri din arborele DOM, acesta este reflectă pe pagina web.

Cum sunt proiectate nodurile

Am menționat mai înainte că fiecare bucată de date dintr-un document HTML este salvat ca un obiect în JavaScript. Deci, modul în care datele salvate ca un obiect pot fi aranjate logic ca un copac?

Nodurile unui arbore DOM au anumite caracteristici sau proprietăți. Aproape fiecare nod dintr-un copac are un nod părinte (nodul de deasupra acestuia), noduri copii (nodurile de dedesubt) și fratii (alți noduri aparținând aceluiași părinte). Având asta familie deasupra, de dedesubt și în jurul unui nod este ceea ce se califică drept un parte a unui copac.

Această informație de familie a fiecărui nod este salvate ca proprietăți în obiectul reprezentând acel nod. De exemplu, copii este o proprietate a unui nod care poartă o listă a elementelor copil ale acelui nod, organizând logic elementele sale copil sub nod.

Evitați depășirea manipulării DOM

În măsura în care am putea găsi actualizarea DOM utilă (pentru a modifica o pagină web), există un astfel de lucru o suprasolicita.

Spuneți că doriți să actualizați culoarea a