HTML DOM (model objektu dokumentu) je hierarchická reprezentácia HTML dokumentov. Definuje štruktúru a vlastnosti prvkov na webovej stránke a umožňuje JavaScriptu dynamicky pristupovať k obsahu, manipulovať s ním a aktualizovať ho, čím sa zvyšuje interaktivita a funkčnosť.

Poznámka : Nazýva sa to logická štruktúra, pretože DOM nešpecifikuje žiadny vzťah medzi objektmi.

Obsah

• Prečo sa vyžaduje DOM?
• Štruktúra DOM
• Vlastnosti DOM
• Metódy objektového modelu dokumentu
• Čo DOM nie je?
• Úrovne DOM:

čo je DOM?

DOM , alebo Objektový model dokumentu , je programovacie rozhranie, ktoré predstavuje štruktúrované dokumenty ako napr HTML a XML ako strom predmetov. Definuje, ako pristupovať, manipulovať a upravovať prvky dokumentu pomocou skriptovacích jazykov, ako je JavaScript.

Takže v podstate Document Object Model je API ktorý reprezentuje a interaguje s HTML alebo XML dokumentmi.

DOM je a W3C (World Wide Web Consortium) štandardná a definuje štandard pre prístup k dokumentom.

Štandard W3C Dom je rozdelený do troch rôznych častí:

• Jadro DOM – štandardný model pre všetky typy dokumentov
• XML DOM – štandardný model pre XML dokumenty
• HTML DOM – štandardný model pre HTML dokumenty

HTML DOM

HTML DOM je štandard objektový model a programovacie rozhranie pre HTML dokumenty. HTML DOM je spôsob, ako reprezentovať webovú stránku v a štruktúrovaným hierarchickým spôsobom takže pre programátorov a používateľov bude jednoduchšie listovať v dokumente.

Pomocou HTML DOM môžeme ľahko pristupovať a manipulovať so značkami, ID, triedami, atribútmi alebo prvkami HTML pomocou príkazov alebo metód poskytovaných objektom dokumentu.

Pomocou DOM JavaScript získame prístup k HTML ako aj CSS webovej stránky a môžeme tiež upravovať správanie HTML prvkov.

Prečo sa vyžaduje DOM?

HTML je zvyknutý štruktúru webové stránky a Javascript sa používa na pridanie správanie na naše webové stránky. Keď sa do prehliadača načíta súbor HTML, JavaScript nedokáže priamo porozumieť dokumentu HTML. Interpretuje teda a interaguje s objektovým modelom dokumentu (DOM), ktorý vytvára prehliadač na základe dokumentu HTML.

DOM je v podstate reprezentácia rovnakého dokumentu HTML, ale v stromovej štruktúre zloženej z objektov. JavaScript nerozumie značkám () v dokumente HTML, ale dokáže pochopiť objekt h1 v DOM.

JavaScript ľahko interpretuje DOM a používa ho ako most na prístup a manipuláciu s prvkami. DOM Javascript umožňuje prístup ku každému z objektov (h1, p, atď.) pomocou rôznych funkcií.

Objektový model dokumentu (DOM) je nevyhnutný pri vývoji webu z niekoľkých dôvodov:

• Dynamické webové stránky: Umožňuje vám vytvárať dynamické webové stránky. Umožňuje JavaScriptu dynamicky pristupovať a manipulovať s obsahom, štruktúrou a štýlom stránky, čo poskytuje interaktívne a pohotové webové zážitky, ako je aktualizácia obsahu bez opätovného načítania celej stránky alebo okamžitá reakcia na akcie používateľa.
• Interaktivita: Pomocou modelu DOM môžete reagovať na akcie používateľov (ako sú kliknutia, vstupy alebo posúvanie) a podľa toho upravovať webovú stránku.
• Aktualizácie obsahu: Ak chcete aktualizovať obsah bez obnovovania celej stránky, DOM umožňuje cielené zmeny, vďaka ktorým sú webové aplikácie efektívnejšie a užívateľsky prívetivejšie.
• Kompatibilita medzi prehliadačmi: Rôzne prehliadače môžu vykresľovať HTML a CSS rôznymi spôsobmi. DOM poskytuje štandardizovaný spôsob interakcie s prvkami stránky.
• Jednostránkové aplikácie (SPA): Aplikácie postavené s rámcami, ako sú React alebo Angular, sa vo veľkej miere spoliehajú na DOM pri efektívnom vykresľovaní a aktualizácii obsahu v rámci jedinej stránky HTML bez opätovného načítania celej stránky.

Štruktúra DOM

DOM si možno predstaviť ako strom alebo les (viac ako jeden strom). Termín model štruktúry sa niekedy používa na opis stromovej reprezentácie dokumentu.

Každá vetva stromu končí uzlom a každý uzol obsahuje objekty Poslucháčov udalostí možno pridať do uzlov a spustiť ich pri výskyte danej udalosti. Jednou z dôležitých vlastností modelov štruktúry DOM je štruktúrny izomorfizmus : ak sa na vytvorenie reprezentácie toho istého dokumentu použijú akékoľvek dve implementácie DOM, vytvoria rovnaký model štruktúry s presne rovnakými objektmi a vzťahmi.

Prečo sa DOM nazýva objektový model?

Dokumenty sa modelujú pomocou objektov a model zahŕňa nielen štruktúru dokumentu, ale aj správanie dokumentu a objektov, z ktorých sa skladá, ako sú prvky tagov s atribútmi v HTML.

Vlastnosti DOM

Pozrime sa na vlastnosti objektu dokumentu, ku ktorým môže objekt dokumentu pristupovať a upravovať ich.

Zastúpenie DOM

• Objekt okna : Window Object je objekt prehliadača, ktorý je vždy na vrchole hierarchie. Je to ako API, ktoré sa používa na nastavenie a prístup ku všetkým vlastnostiam a metódam prehliadača. Automaticky ho vytvára prehliadač.
• Objekt dokumentu: Keď sa dokument HTML načíta do okna, stane sa objektom dokumentu. Objekt „dokument“ má rôzne vlastnosti, ktoré odkazujú na iné objekty, ktoré umožňujú prístup a úpravu obsahu webovej stránky. Ak existuje potreba prístupu k akémukoľvek prvku na stránke HTML, vždy začíname prístupom k objektu „dokument“. Objekt dokumentu je vlastnosťou objektu okna.
• Objekt formulára: Zastupuje ho formulár značky.
• Objekt odkazu : Zastupuje ho odkaz značky.
• Kotvový objekt : Zastupuje ho a href značky.
• Prvky ovládacieho prvku formulára: Formulár môže mať mnoho ovládacích prvkov, ako sú textové polia, tlačidlá, prepínače, začiarkavacie políčka atď.

Metódy objektu dokumentu

DOM poskytuje rôzne metódy, ktoré používateľom umožňujú interakciu s dokumentom a manipuláciu s ním. Niektoré bežne používané metódy DOM sú:

Príklad: V tomto príklade používame ID prvku HTML na nájdenie prvku HTML DOM.

    
techcodeview.comh2>
Portál informatiky pre geekov. p>
Tento príklad ilustruje getElementByIdb> metóda. p>
p>