Dokumenta objekta modeļa (DOM) izpratne detaļās

Mēs visi esam dzirdējuši par DOM, vai Dokumentu objekta modelis, kas laiku pa laikam tiek pieminēts saistībā ar JavaScript. DOM ir diezgan svarīgs web izstrādes jēdziens. Bez tā mēs nevarētu dinamiski modificēt HTML lapas pārlūkprogrammā.

DOM mācīšanās un izpratne rada labākus veidus piekļūt, mainīt un uzraudzīt dažādus HTML lapas elementus. Dokumentu objekta modelis var arī palīdzēt mums samazināt nevajadzīgu skripta izpildes laika palielinājumu.

Datu struktūras koki

Pirms runāt par to, kas ir DOM, kā tas notiek, kā tas pastāv, un kas notiek tā iekšpusē, es vēlos, lai jūs uzzinātu par kokiem. Ne skujkoku un lapu koku, bet gan par datu struktūras koks.

Datu struktūru jēdziens ir daudz vieglāk saprotams, ja mēs vienkāršojam tās definīciju. Es teiktu, ka ir datu struktūra datu sakārtošana. Jā, tikai vienkārša vecā vienošanās, jo jūs varētu organizēt savas mājas mēbeles vai grāmatas grāmatplauktā vai visās dažādās pārtikas grupās, kur jums ir jābūt maltītei uz plāksnes, lai padarīt to jēgpilnu.

Protams, tas nav viss, kas ir datu struktūrai, bet tas ir diezgan daudz, kur tas viss sākas. Tas “vienošanās” ir visu to pamatā. Tas ir diezgan svarīgi arī DOM. Bet mēs vēl nerunājam par DOM, tāpēc ļaujiet man virzīt jūs uz a datu struktūra, kas jums varētu būt pazīstama: masīvi.

Koki un koki

Array ir indeksi un garums, tie var būt daudzdimensiju, un ir daudzas citas īpašības. Cik svarīgi ir zināt šīs lietas par masīviem, neuztraucieties ar to tieši tagad. Mums masīvs ir diezgan vienkāršs. Tas ir tad, kad jūs sakārtot dažādas lietas rindā.

Tāpat, domājot par kokiem, teiksim, tas ir par nodot lietas zem viena otras, sākot ar vienu lietu augšā.

Tagad jūs varat noņemt vienu rindu pīles, pagrieziet to vertikāli, un pastāstiet man to “tagad, katrs pīle ir zem cita pīle”. Vai tas ir koks? Tas ir.

Atkarībā no jūsu datiem vai to, kā jūs to izmantosiet, augšējie dati jūsu kokā (ko sauc par sakne) varētu būt kaut kas ļoti svarīgi vai kaut kas, kas ir tikai tur zem tā pievienojiet citus elementus.

Katrā ziņā koka datu struktūras augšējais elements ir kaut kas ļoti svarīgs. Tā nodrošina vietu sākt meklēt informāciju, ko mēs vēlamies iegūt no koka.

DOM nozīme

DOM nozīmē Dokumentu objekta modelis. Dokuments norāda uz HTML (XML) dokumentu kurš ir tiek attēlots kā objekts. (JavaScript viss var tikt attēlots tikai kā objekts!)

Modelis ir izveido pārlūks kas ņem HTML dokumentu un izveido to attēlojošu objektu. Šim objektam var piekļūt, izmantojot JavaScript. Un tā kā mēs izmantojam šo objektu, lai manipulētu ar HTML dokumentu un veidotu mūsu pašu lietojumprogrammas, DOM pamatā ir API.

DOM koks

JavaScript kodā HTML dokuments ir pārstāvēts kā objekts. Visi no šī dokumenta nolasītie dati ir arī saglabāti kā objekti, iegremdēti viens pret otru (jo, tāpat kā es iepriekš teicu, JavaScript viss var tikt attēlots tikai kā objekti).

Tātad, tas būtībā ir DOM datu fiziskais izvietojums kodā: viss ir sakārtoti kā objekti. Loģiski, tomēr, tas ir koks.

DOM Parser

Katrai pārlūkprogrammas programmatūrai ir izveidota programma DOM Parser kas ir atbildīgs HTML dokumenta analizēšana DOM.

Pārlūkprogrammas lasa HTML lapu un pārvērš tās datus par objektiem, kas veido DOM. Šajos JavaScript DOM objektos esošā informācija ir loģiski sakārtota kā datu struktūras koks, kas pazīstams kā DOM koks.

Analizējot datus no HTML uz DOM koku

Veikt vienkāršu HTML failu. Tai ir saknes elements . Tā ir apakšelementi ir un , katram no tiem ir daudz bērnu elementu.

Tātad būtībā pārlūks nolasa HTML dokumenta datus, kaut kas līdzīgs šim:

Un, tos sakārto DOM kokā kā šis:

Katra HTML elementa (un tā satura) attēlojums DOM kokā ir pazīstams kā a Mezgls. The saknes mezgls ir mezgls .

The DOM interfeiss JavaScript tiek saukts dokumentu (tā kā tas ir HTML dokumenta attēls). Tādējādi mēs piekļūstam HTML dokumenta DOM kokam caur dokumentu saskarne JavaScript.

Mēs nevaram tikai piekļūt, bet arī manipulēt ar HTML dokumentu izmantojot DOM. Web lapā varam pievienot elementus, tos noņemt un atjaunināt. Katru reizi, kad mēs mainām vai atjauninām jebkurus mezglus DOM kokā atspoguļo tīmekļa lapā.

Kā izveidoti mezgli

Es jau iepriekš minēju, ka visi HTML dokumenta dati ir saglabāts kā objekts JavaScript. Tātad, kā datus, kas saglabāti kā objekts, var loģiski sakārtot kā koku?

DOM koka mezgliem ir noteiktas īpašības vai īpašības. Gandrīz katrs koka mezgls ir vecāks mezgls (mezgls tieši virs tā), bērnu mezgli (mezgli zem tā) un brāļi un māsas (citi mezgli, kas pieder vienam un tam pašam vecākam). Ņemot to ģimeni virs, zemāk un ap mezglu ir tas, kas to kvalificē kā a daļa no koka.

Šī ģimenes mezgla informācija par katru mezglu ir saglabāti kā rekvizīti objektā, kas pārstāv šo mezglu. Piemēram, bērniem ir mezgla īpašums, kas satur šī mezgla bērnu elementu sarakstu, tādējādi loģiski sakārtojot tā bērnu elementus zem mezgla.

Izvairieties no pārmērīgas DOM manipulācijas

Ciktāl mēs varam atrast DOM atjaunināšanu noderīgu (lai pārveidotu tīmekļa lapu), ir tādas lietas kā pārspīlējot to.

Sakiet, ka vēlaties atjaunināt a. Krāsu