Domača » Kodiranje » Razumevanje objektnega modela dokumenta (DOM) v podrobnostih

    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

    na spletni strani z uporabo JavaScripta. Kar morate storiti je dostop do ustreznega objekta vozlišča DOM in posodobi lastnost barv. To ne sme vplivati ​​na preostanek drevesa (druga vozlišča v drevesu).

    Ampak, kaj če hočeš odstranite vozlišče iz drevesa ali dodajte eno? Celo drevo morda treba preurediti, če je vozlišče odstranjeno ali dodano drevesu. To je drago delo. Za to delo je potreben čas in brskalnik.

    Na primer, recimo, želite dodajte pet dodatnih vrstic v tabelo. Za vsako vrstico, ko so njena nova vozlišča ustvarjena in dodana v DOM, bo drevo se vsakič posodobi, skupaj dodamo do pet posodobitev.

    Temu se lahko izognemo z uporabo Fragment dokumenta vmesnik. Razmislite o tem kot o škatli, ki bi lahko držite vseh pet vrstic in se doda drevesu. Tako je pet vrstic dodan kot en kos podatkov in ne enega za drugim, kar vodi v samo eno posodobitev v drevesu.

    To se ne zgodi samo, če odstranimo ali dodamo elemente, ampak spreminjanje velikosti elementa lahko vpliva tudi na druga vozlišča, saj lahko spremeni element potrebuje druge elemente prilagodite njihovo velikost. Torej bodo ustrezna vozlišča vseh drugih elementov treba posodobiti in elementi HTML bodo ponovno upodobljeni v skladu z novimi pravili..

    Podobno, če je prizadeta postavitev spletne strani kot celote, del spletne strani ali celotna spletna stran se lahko ponovno predloži. Ta postopek je znan kot Reflow. Da bi izogibati se pretiranemu reflowu Prepričajte se, da DOM ne spreminjate preveč. Spremembe DOM-a niso edina stvar, ki lahko povzroči Reflow na spletni strani. K temu lahko prispevajo tudi drugi dejavniki, odvisno od brskalnika.

    Zavijanje

    Zavijam stvari, DOM je vizualizirano kot drevo sestavljeni iz vseh elementov v dokumentu HTML. Fizično (kot fizično, kar lahko digitalno dobimo) je niz ugnezdenih objektov JavaScript katere lastnosti in metode vsebujejo informacije, ki omogočajo logično jih razvrstite v drevo.