Razumevanje objektnega modela dokumenta (DOM) v podrobnostih

Vsi smo slišali za DOM, ali Objektni model dokumenta, ki se občasno omenja, v povezavi s JavaScriptom. DOM je zelo pomemben koncept pri razvoju spletnih strani. Brez tega ne bi mogli dinamično spreminjanje strani HTML v brskalniku.

Učenje in razumevanje DOM daje boljše načine dostop, spreminjanje in spremljanje različnih elementov strani HTML. Objektivni model dokumenta nam lahko pomaga zmanjša nepotrebno povečanje časa izvajanja skripta.

Podatkovne strukture dreves

Preden govorimo o tem, kaj je DOM, kako nastane, kako obstaja in kaj se dogaja v njem, želim, da veste o drevesih. Ne iglavcev in listavcev, ampak o podatkovna struktura drevesa.

Lažje je razumeti koncept podatkovnih struktur, če ga poenostavimo. Rekel bi, da gre za podatkovno strukturo urejanje podatkov. Da, samo stara ureditev, saj bi uredili pohištvo v vaši hiši ali knjige v knjižni polici ali v vseh različnih skupinah hrane, ki jih potrebujete za obrok na krožniku, da bi naredite ga smiselno.

Seveda, to ni vse, kar je v strukturi podatkov, vendar je to precej veliko, kjer se vse začne. To “dogovoru” je v središču vsega. To je precej pomembno tudi v DOM-u. Vendar še ne govorimo o DOM-u, zato naj vas usmerim proti a podatkovna struktura, ki jo morda poznate: nizi.

Polja in drevesa

Nizi imajo indeksov in dolžino, lahko so večdimenzionalni, in imajo veliko več značilnosti. Kolikor je pomembno, da poznamo te stvari o nizih, se zdaj ne ukvarjamo s tem. Za nas je matrika precej preprosta. Ko si ti uredite različne stvari v vrstici.

Podobno, ko razmišljamo o drevesih, recimo, gre za postavljati stvari pod drugo, začenši z eno samo stvarjo na vrhu.

Zdaj lahko vzamete enojne linije iz prej, obrnite ga pokončno, in to mi povej “zdaj, vsaka raca je pod drugo raco”. Je potem drevo? je.

Glede na to, kaj so vaši podatki ali kako ga boste uporabljali, so najvišji podatki v drevesu (imenovani root) je morda nekaj, kar je velikega pomena ali nekaj, kar je tam druge elemente pod njim.

Kakorkoli, najvišji element v drevesni strukturi podatkov naredi nekaj zelo pomembnega. Zagotavlja prostor za začnite iskati vse informacije, ki jih želimo izpisati iz drevesa.

Pomen DOM

DOM pomeni Objektni model dokumenta. Dokument kaže na dokument HTML (XML) kateri je predstavljen kot objekt. (V JavaScriptu je vse mogoče predstaviti le kot objekt!)

Model je ustvaril brskalnik , ki sprejme dokument HTML in ustvari objekt, ki ga predstavlja. Do tega objekta lahko dostopamo s JavaScriptom. In ker uporabljamo ta objekt za manipulacijo dokumenta HTML in za izdelavo lastnih aplikacij, DOM je v bistvu API.

DOM drevo

V kodi JavaScript je dokument HTML predstavljen kot objekt. Vsi podatki, ki se berejo iz tega dokumenta, so tudi shranjene kot predmeti, ugnezdeni drug ob drugem (ker sem, kot sem že prej povedal, v JavaScriptu vse mogoče predstaviti le kot objekte).

Torej, to je v bistvu fizična ureditev podatkov DOM v kodi: vse je urejeni kot predmeti. Logično pa je, to je drevo.

DOM Parser

Vsaka programska oprema brskalnika ima program DOM Parser odgovorna razčlenjevanje dokumenta HTML v DOM.

Brskalniki berejo stran HTML in spreminjajo njene podatke v objekte, ki sestavljajo DOM. Informacije, ki so prisotne v teh objektih JavaScript DOM, so logično urejene kot drevo podatkovne strukture, znano kot drevo DOM.

Razčlenjevanje podatkov iz HTML-ja v drevo DOM

Vzemite preprosto datoteko HTML. Ima korenski element . Njegova podelementov so in , vsak ima veliko otroških elementov.

V bistvu, brskalnik bere podatke v dokumentu HTML, nekaj podobnega temu:

In, jih razporedi v drevo DOM Všečkaj to:

Predstavitev vsakega elementa HTML (in njegove pripadajoče vsebine) v drevesu DOM je znana kot a Vozlišče. The korensko vozlišče je vozlišče .

The Vmesnik DOM v JavaScriptu se kliče dokument (ker je predstavitev dokumenta HTML). Tako dostopamo do drevesa DOM dokumenta HTML skozi dokument vmesnik v JavaScriptu.

Ne moremo le dostopati, ampak tudi manipulirajte dokument HTML prek DOM-a. Na spletno stran lahko dodajamo elemente, jih odstranimo in jih posodobimo. Vsakič, ko spremenimo ali posodobimo katero koli vozlišče v drevesu DOM, ga odraža na spletni strani.

Kako so zasnovana vozlišča

Omenil sem že, da je vsak kos podatkov iz dokumenta HTML shranjeno kot objekt v JavaScriptu. Torej, kako lahko podatke, shranjene kot objekt, logično uredimo kot drevo?

Vozlišča drevesa DOM imajo določene lastnosti ali lastnosti. Skoraj vsako vozlišče v drevesu ima nadrejeno vozlišče (vozlišče nad njim), otroška vozlišča (vozlišča pod njo) in bratje in sestre (druga vozlišča, ki pripadajo istemu nadrejenemu). Ob tem družino zgoraj, spodaj in okrog vozlišča je tisto, kar ga kvalificira kot a del drevesa.

Ta družinska informacija za vsako vozlišče je shranjene kot lastnosti v objektu, ki predstavlja to vozlišče. Na primer, otrok je lastnost vozlišča, ki nosi seznam podrejenih elementov tega vozlišča, kar logično ureja podrejene elemente pod vozliščem.

Izogibajte se pretiravanju z manipulacijo DOM-a

Kolikor je mogoče, da je posodabljanje DOM-a uporabno (za spreminjanje spletne strani), obstaja nekaj takega kot pretiravam.

Recite, da želite posodobiti barvo a