HTML DOM (Document Object Model) je hierarhična predstavitev dokumentov HTML. Določa strukturo in lastnosti elementov na spletni strani, kar JavaScriptu omogoča dinamičen dostop, upravljanje in posodabljanje vsebine, kar izboljšuje interaktivnost in funkcionalnost.

Opomba : Imenuje se logična struktura, ker DOM ne določa nobenega odnosa med objekti.

Kazalo

• Zakaj je potreben DOM?
• Struktura DOM
• Lastnosti DOM
• Metode dokumentnega objektnega modela
• Kaj DOM ni?
• Ravni DOM:

Kaj je DOM?

DOM , oz Objektni model dokumenta , je programski vmesnik, ki predstavlja strukturirane dokumente, kot je HTML in XML kot drevo predmetov. Določa, kako dostopati, manipulirati in spreminjati elemente dokumenta z uporabo skriptnih jezikov, kot je JavaScript.

Torej je v bistvu dokumentni objektni model API ki predstavlja in komunicira z dokumenti HTML ali XML.

mylivecricket.

DOM je a W3C (Konzorcij svetovnega spleta) standard in določa standard za dostop do dokumentov.

Standard W3C Dom je razdeljen na tri različne dele:

• Jedro DOM – standardni model za vse vrste dokumentov
• XML DOM – standardni model za dokumente XML
• HTML DOM – standardni model za dokumente HTML

HTML DOM

HTML DOM je standard objektni model in programski vmesnik za dokumenti HTML. HTML DOM je način za predstavitev spletne strani v a strukturiran hierarhični način tako da bodo programerji in uporabniki lažje drseli po dokumentu.

Z HTML DOM lahko enostavno dostopamo in manipuliramo z oznakami, ID-ji, razredi, atributi ali elementi HTML z uporabo ukazov ali metod, ki jih ponuja predmet dokumenta.

Z uporabo DOM JavaScript pridobimo dostop do HTML in CSS spletne strani in lahko tudi spreminjamo obnašanje elementov HTML.

Zakaj je potreben DOM?

HTML se uporablja za struktura spletne strani in Javascript se uporablja za dodajanje obnašanje na naše spletne strani. Ko se datoteka HTML naloži v brskalnik, JavaScript ne more neposredno razumeti dokumenta HTML. Tako interpretira in sodeluje z modelom dokumentov (DOM), ki ga ustvari brskalnik na podlagi dokumenta HTML.

DOM je v bistvu predstavitev istega dokumenta HTML, vendar v drevesni strukturi, sestavljeni iz predmetov. JavaScript ne more razumeti tags() v dokumentu HTML, lahko pa razume objekt h1 v DOM.

JavaScript preprosto razlaga DOM in ga uporablja kot most za dostop do elementov in njihovo upravljanje. DOM Javascript omogoča dostop do vsakega od objektov (h1, p itd.) z uporabo različnih funkcij.

programiranje v nizih c

Objektni model dokumenta (DOM) je bistvenega pomena pri spletnem razvoju iz več razlogov:

• Dinamične spletne strani: Omogoča ustvarjanje dinamičnih spletnih strani. Omogoča JavaScriptu, da dinamično dostopa do vsebine, strukture in sloga strani ter jih manipulira, kar zagotavlja interaktivne in odzivne spletne izkušnje, kot je posodabljanje vsebine brez ponovnega nalaganja celotne strani ali takojšnji odziv na dejanja uporabnika.
• Interaktivnost: Z DOM se lahko odzovete na dejanja uporabnikov (kot so kliki, vnosi ali drsenja) in ustrezno spremenite spletno stran.
• Posodobitve vsebine: Ko želite posodobiti vsebino, ne da bi osvežili celotno stran, DOM omogoča ciljno usmerjene spremembe, zaradi česar so spletne aplikacije učinkovitejše in uporabniku prijaznejše.
• Združljivost med brskalniki: Različni brskalniki lahko upodabljajo HTML in CSS na različne načine. DOM zagotavlja standardiziran način interakcije z elementi strani.
• Enostranske aplikacije (SPA): Aplikacije, zgrajene z okviri, kot sta React ali Angular, se močno zanašajo na DOM za učinkovito upodabljanje in posodabljanje vsebine znotraj ene strani HTML brez ponovnega nalaganja celotne strani.

Struktura DOM

DOM si lahko predstavljamo kot drevo ali gozd (več kot eno drevo). Izraz strukturni model se včasih uporablja za opis drevesne predstavitve dokumenta.

Vsaka veja drevesa se konča z vozliščem in vsako vozlišče vsebuje objekte. Poslušalnike dogodkov je mogoče dodati vozliščem in jih sprožiti ob pojavu danega dogodka. Ena pomembna lastnost strukturnih modelov DOM je strukturni izomorfizem : če se katerikoli dve implementaciji DOM uporabita za ustvarjanje predstavitve istega dokumenta, bosta ustvarili isti model strukture s popolnoma enakimi objekti in odnosi.

Zakaj se DOM imenuje objektni model?

Dokumenti so modelirani z uporabo objektov, model pa ne vključuje samo strukture dokumenta, ampak tudi obnašanje dokumenta in objektov, iz katerih je sestavljen, kot so elementi oznak z atributi v HTML.

Lastnosti DOM

Oglejmo si lastnosti predmeta dokumenta, do katerega je mogoče dostopati in ga spreminjati objekt dokumenta.

Zastopstvo DOM

• Okenski objekt : Window Object je objekt brskalnika, ki je vedno na vrhu hierarhije. Je kot API, ki se uporablja za nastavitev in dostop do vseh lastnosti in metod brskalnika. Samodejno ga ustvari brskalnik.
• Predmet dokumenta: Ko se dokument HTML naloži v okno, postane predmet dokumenta. Objekt 'dokument' ima različne lastnosti, ki se nanašajo na druge objekte, ki omogočajo dostop do vsebine spletne strani in njeno spreminjanje. Če je treba dostopati do katerega koli elementa na strani HTML, vedno začnemo z dostopom do predmeta 'dokument'. Objekt dokumenta je lastnost predmeta okna.
• Predmet obrazca: Predstavlja ga oblika oznake.
• Objekt povezave : Predstavlja ga povezava oznake.
• Sidrni objekt : Predstavlja ga a href oznake.
• Kontrolni elementi obrazca: Obrazec ima lahko veliko kontrolnih elementov, kot so besedilna polja, gumbi, radijski gumbi, potrditvena polja itd.

Metode predmeta dokumenta

DOM ponuja različne metode, ki uporabnikom omogočajo interakcijo z dokumentom in upravljanje z njim. Nekatere pogosto uporabljene metode DOM so:

primer: V tem primeru uporabljamo ID elementa HTML za iskanje elementa HTML DOM.

    
techcodeview.comh2>
Računalniški portal za geeke. p>
Ta primer ponazarja metoda getElementByIdb>. p>
p>