Co je HTML DOM?
HTML DOM je objektový model pro HTML . Definuje:
- HTML elementy jako objekty
- Vlastnosti pro všechny prvky HTML
- Metody pro všechny prvky HTML
- Události pro všechny prvky HTML
HTML DOM je API ( Programming Interface) pro JavaScript :
- JavaScript může přidávat/měnit/odebírat prvky HTML
- JavaScript může přidat/změnit/odebrat atributy HTML
- JavaScript může přidávat/měnit/odebírat styly CSS
- JavaScript může reagovat na události HTML
- JavaScript může přidávat/měnit/odebírat události HTML
HTML DOM (model objektu dokumentu)
Když se webová stránka načte , prohlížeč vytvoří model objektu dokumentu stránky .
Model HTML DOM je konstruován jako strom objektů :
Strom objektů HTML DOM
Hledání prvků HTML
Pokud chcete přistupovat k prvkům HTML pomocí JavaScriptu, musíte prvky nejprve najít.
Existuje několik způsobů, jak to provést:
- Hledání prvků HTML podle id
- Hledání prvků HTML podle názvu značky
- Hledání prvků HTML podle názvu třídy
- Hledání prvků HTML pomocí selektorů CSS
- Hledání prvků HTML pomocí kolekcí objektů HTML
Hledání prvku HTML podle ID
Nejjednodušší způsob, jak najít prvek HTML v DOM, je pomocí id prvku.
Tento příklad najde prvek s id="intro":
Příklad
var myElement = document.getElementById("intro");
Pokud je prvek nalezen, metoda vrátí prvek jako objekt (v myElement).
Pokud prvek není nalezen, bude myElement obsahovat null.
Hledání prvků HTML podle názvu značky
Tento příklad najde všechny prvky <p>:
Příklad
var x = document.getElementsByTagName("p");
Tento příklad najde prvek s id="main" a poté najde všechny prvky <p> uvnitř "main":
Příklad
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Hledání prvků HTML podle názvu třídy
Pokud chcete najít všechny prvky HTML se stejným názvem třídy, použijte getElementsByClassName().
Tento příklad vrátí seznam všech prvků s class="intro".
Příklad
var x = document.getElementsByClassName("intro");
Hledání prvků podle názvu třídy nefunguje v aplikaci Internet Explorer 8 a starších verzích.
Hledání prvků HTML pomocí selektorů CSS
Pokud chcete najít všechny prvky HTML, které odpovídají zadanému selektoru CSS (id, názvy tříd, typy, atributy, hodnoty atributů atd.), použijte metodu querySelectorAll().
Tento příklad vrátí seznam všech prvků <p> s class="intro".
Příklad
var x = document.querySelectorAll("p.intro");
Metoda querySelectorAll() nefunguje v aplikaci Internet Explorer 8 a starších verzích.
Hledání prvků HTML pomocí kolekcí objektů HTML
Kolekce objektů HTML jsou také přístupné:
Výukový program HTML DOM
Kompletní výukový program HTMLDOM
Toto byl krátký úvod do HTMLDOM.
Úplný výukový program HTMLDOM naleznete na W3Schools HTMLDOM Tutorial .