HTML DOM (model objektu dokumentu) je hierarchická reprezentace HTML dokumentů. Definuje strukturu a vlastnosti prvků na webové stránce, umožňuje JavaScriptu dynamicky přistupovat, manipulovat s obsahem a aktualizovat jej, čímž se zvyšuje interaktivita a funkčnost.
Poznámka : Říká se tomu logická struktura, protože DOM neurčuje žádný vztah mezi objekty.
Obsah
- Proč je vyžadován DOM?
- Struktura DOM
- Vlastnosti DOM
- Metody objektového modelu dokumentu
- Co DOM není?
- Úrovně DOM:
Co je DOM?
DOM nebo Objektový model dokumentu , je programovací rozhraní, které představuje strukturované dokumenty jako HTML a XML jako strom předmětů. Definuje, jak přistupovat, manipulovat a upravovat prvky dokumentu pomocí skriptovacích jazyků, jako je JavaScript.
ls příkazy linux
Objektový model dokumentu je tedy v zásadě an API který reprezentuje a interaguje s HTML nebo XML dokumenty.
DOM je a W3C (World Wide Web Consortium) Standard a definuje standard pro přístup k dokumentům.
Standard W3C Dom je rozdělen do tří různých částí:
- Jádro DOM – standardní model pro všechny typy dokumentů
- XML DOM – standardní model pro XML dokumenty
- HTML DOM – standardní model pro HTML dokumenty
HTML DOM
HTML DOM je standard objektový model a programovací rozhraní pro HTML dokumenty. HTML DOM je způsob, jak reprezentovat webovou stránku v a strukturovaným hierarchickým způsobem takže pro programátory a uživatele bude snazší procházet dokumentem.
bash spánek
Pomocí HTML DOM můžeme snadno přistupovat ke značkám, ID, třídám, atributům nebo prvkům HTML a manipulovat s nimi pomocí příkazů nebo metod poskytovaných objektem dokumentu.
Pomocí DOM JavaScriptu získáme přístup k HTML i CSS webové stránky a můžeme také upravovat chování HTML prvků.
Proč je vyžadován DOM?
HTML se používá struktura webové stránky a Javascript se používá k přidání chování na naše webové stránky. Když je soubor HTML načten do prohlížeče, JavaScript nerozumí dokumentu HTML přímo. Interpretuje tedy a interaguje s objektovým modelem dokumentu (DOM), který je vytvořen prohlížečem na základě dokumentu HTML.
DOM je v podstatě reprezentace stejného dokumentu HTML, ale ve stromové struktuře složené z objektů. JavaScript nerozumí tagům () v HTML dokumentu, ale rozumí objektu h1 v DOM.
JavaScript snadno interpretuje DOM a používá jej jako most pro přístup k prvkům a manipulaci s nimi. DOM Javascript umožňuje přístup ke každému z objektů (h1, p atd.) pomocí různých funkcí.
Objektový model dokumentu (DOM) je nezbytný při vývoji webu z několika důvodů:
- Dynamické webové stránky: Umožňuje vytvářet dynamické webové stránky. Umožňuje JavaScriptu dynamicky přistupovat a manipulovat s obsahem, strukturou a stylem stránky, což poskytuje interaktivní a responzivní webové zážitky, jako je aktualizace obsahu bez opětovného načítání celé stránky nebo okamžitá reakce na akce uživatele.
- Interaktivita: Pomocí modelu DOM můžete reagovat na akce uživatele (jako jsou kliknutí, vstupy nebo posouvání) a odpovídajícím způsobem upravit webovou stránku.
- Aktualizace obsahu: Pokud chcete aktualizovat obsah bez obnovování celé stránky, DOM umožňuje cílené změny, díky nimž jsou webové aplikace efektivnější a uživatelsky přívětivější.
- Kompatibilita mezi prohlížeči: Různé prohlížeče mohou vykreslovat HTML a CSS různými způsoby. DOM poskytuje standardizovaný způsob interakce s prvky stránky.
- Jednostránkové aplikace (SPA): Aplikace vytvořené pomocí rámců, jako je React nebo Angular, silně spoléhají na DOM pro efektivní vykreslování a aktualizaci obsahu v rámci jediné stránky HTML bez opětovného načítání celé stránky.
Struktura DOM
DOM si lze představit jako strom nebo les (více než jeden strom). Termín model struktury se někdy používá k popisu stromové reprezentace dokumentu.
Každá větev stromu končí uzlem a každý uzel obsahuje objekty Posluchače událostí mohou být přidány do uzlů a spouštěny při výskytu dané události. Jednou z důležitých vlastností modelů struktury DOM je strukturální izomorfismus : pokud jsou k vytvoření reprezentace stejného dokumentu použity libovolné dvě implementace DOM, vytvoří stejný model struktury s přesně stejnými objekty a vztahy.
Proč se DOM nazývá objektový model?
Dokumenty se modelují pomocí objektů a model zahrnuje nejen strukturu dokumentu, ale také chování dokumentu a objektů, ze kterých se skládá, jako jsou prvky tagů s atributy v HTML.
kali linuxový terminál
Vlastnosti DOM
Podívejme se na vlastnosti objektu dokumentu, ke kterým lze přistupovat a upravovat je objektem dokumentu.

Zastoupení DOM
- Objekt okna : Window Object je objekt prohlížeče, který je vždy na vrcholu hierarchie. Je to jako API, které se používá k nastavení a přístupu ke všem vlastnostem a metodám prohlížeče. Je automaticky vytvořen prohlížečem.
- Objekt dokumentu: Když je dokument HTML načten do okna, stane se objektem dokumentu. Objekt „dokument“ má různé vlastnosti, které odkazují na jiné objekty, které umožňují přístup a úpravu obsahu webové stránky. Pokud je potřeba přistupovat k jakémukoli prvku na stránce HTML, vždy začínáme přístupem k objektu „dokument“. Objekt dokumentu je vlastnost objektu okna.
- Objekt formuláře: Je zastoupena formulář značky.
- Objekt odkazu : Je zastoupena odkaz značky.
- Ukotvení objektu : Je zastoupena a href značky.
- Ovládací prvky formuláře: Formulář může mít mnoho ovládacích prvků, jako jsou textová pole, tlačítka, přepínače, zaškrtávací políčka atd.
Metody objektu dokumentu
DOM poskytuje různé metody, které uživatelům umožňují pracovat s dokumentem a manipulovat s ním. Některé běžně používané metody DOM jsou:
Metoda | Popis |
---|---|
napsat (tětiva) | Zapíše daný řetězec do dokumentu. |
getElementById() | Vrátí prvek s danou hodnotou id. |
getElementsByName() | Vrátí všechny prvky, které mají hodnotu daného názvu. |
getElementsByTagName() | Vrátí všechny prvky s daným názvem značky. |
getElementsByClassName() | Vrátí všechny prvky s daným názvem třídy. |
Příklad: V tomto příkladu používáme ID prvku HTML k nalezení prvku HTML DOM.
HTML techcodeview.comh2>
Portál informatiky pro geeky. p>
Tento příklad ilustruje getElementByIdb> metoda. p>
p>