Model DOM
Objektový model dokumentu
DOM (Documetn Object Model) poskytuje způsob jak přistupovat a upravovat obsah HTML dokumentů. Jedná se o standard definovaný konsorciem W3C a v různých formách a v určité míe ho implementuje většina webových prohlížečů. Stejně jako většina standardů spojených zejména s webovým programováním se i DOM vyvíjel v průběhu let.Existují jeho tři specifikace, v oblasti DOM jsou označovany jako úrovně (level) a čtvrtá úroveň je nyní na cestě. DOM je natolik rozsáhlý, že si zde nevysvětlíme všechny využití, ale pouze ta co pokládám za důležité ve spojení s JavaScriptem. Více informací o DOM naleznete na stránkách konsorcia W3C: zde
DOM úrovně 0
DOM úrovně 0 představuje úplného prapůvodce DOM, který vznikl ještě před jakoukoli formální specifikací DOM konsorciem W3C. Poté co vznikl DOM úrovně 1 došlo ke sjednocení dříve používaných technologií pro práci s dokumenty pod označením DOM úrovně 0. Dneska všechny prohlížeče podporují DOM úrovně 0 a to kvůli zachování zpětné kompatibility DOM úrovně 0 se zaměřoval především na umožnění přístupu k prvkům formuláře, ale umožnil také přístup k odkazům a obrázkům. Nebudeme ztrácet čas ukázkami příkladů DOM provně 0 a zaměříme se na DOM úrovně 1 a 2, které budete pravděpodobně ve svých programech v JavaScriptu využívat.
DOM úrovně 1 a 2
DOM úrovně 1 vznikl jako specifikace v roce 1998 a stejně jako DOM úrovně 0 ho všechny formální prohlížeče podporují. DOM úrovně 2 bylo představeno v roce 2000 a jeho podpora se mezi prohlížeči liší. Popravdě se podpora všech úrovní DOM mezi prohlížeči liší a to i mezi jednotlivými verzemi. Microsoft o svém prohlížeči Internet Exploreru tvrdí , že podporuje DOM, ale tato podpora se oproti jiným prohlížečům značně liší. To nám napovídá žebychom měli dávat pozor na to, že programový kód, který je plně kompatibilní s Internetem explorerem, tak nemusí být kompatibilní s jinými prohlížeči či naopak!!! Místa, kde se jejich kompatibilika nejvíce liší jsou události a práce s nimi.
Přístup k elementům
Přistupování k elementům dokumentu je základem používání DOM společně s JavaScriptem.
Přístup k elementům pomocí jeho identifikátoru
Metoda getElementById je základní metodou DOM. Získává určený element dokumentu HTML a vrací odkaz na něj. Příklad:
<body>
<script type="text/javascript">
var element = document.getElementById("tretiOdkaz");
element.style.color = "blue";
</script>
<a id="prvniOdkaz">Zde je nějaký text</a>
<p id="druhyOdkaz"> </p>
<p id="tretiOdkaz">Zde je nějaký odkaz</p>
</body>
innerHTML: je jednou z možností jak upravít obsah dokumentu. Atribut innerHTML funguje tak dobře a jednoduše, že by byla chyba ho na těchto
stránkách nezmínit. Ukázka, která navazuje na výše uvedený příklad:
<script type="text/javascript">
var element = document.getElementById("druhyOdkaz");
element.innerHTML = "Tento text se zapíše do
elementu s identifikátorem druhy text";
</script>
Přístup k elementům pomocí názvu značky
Metoda getElemenetById funguje dobře, ale jen když chceme přistoupit k jednomu elementu. Pro přístup k více jak jednomu elementu je vhodnější
metoda getElementsByTagName. Ukázka:
var obrazky = document.getElementesByTagName("img");
Tento příklad nám získá všechny obrázky ze souboru a uloží je do proměnné obrazky. Poté můžeme prostřednictvím proměnné obrazky sněmi pracovat a upravovat.
Práce s parametry
K parametrům elementů a jejich hodnotám můžeme pomocí JavaScriptu nejen přistupovat, ale je i upravovat.
Určení parametrů
Pokud programuje v JavaScriptu poprvé a nevíte nebo si nejste jistí jaké parametry daný element má, tak je můžete zjistit pomocí metody getAttribute. Ukázka:
<script type="text/javascript">
var element = document.getElementById("prvniOdkaz");
var seznamAtributu = "";
for (var atribut in element) {
var hodnota = element.getAttribute(atribut);
seznamAtributu = seznamAtributu + atribut + ": " + hodnota + "\n";
}
alert(seznamAtributu);
</script>
Nastavování hodnot parametrů
Předchozí příklad kázal jak lze pomocí JavaScriptu a metody getAttribute atributy elementu získat. Hodnoty parametu lze také nastavovat a to pomocí
metody setAttribute. Ukázka:
<script type="text/javascript">
var element = document.getElementById("prvniOdkaz");
element.setAttribute("href","www.kdo-vi-jaky-web.cz");
alert(element);
</script>
Vytváření elementů
Elementy je možné pomocí metod DOM do dokumentu také přidávat.
Metoda createElement představuje nejzákladnější metodu, kterou lze elementy v dokumentu přidávat.
var novyElement = document.createElement("p");
Odkaz na nově vytvořený element se uložil do proměnné novyElement. Tento nový element je třeba následně připojit k jinému elementu v dokumentu a to se
realizuje pomocí metody appendChild.
document.body.appendChild(novyElement);
K čemu je nám, ale element p, který neobsahuje žádný text? Tohoto docílíme metodou createTextNode.
novyElement.appendChild(document.createTextNode("Zde je nový text elementu p"));
document.body.appendChild(novyElement);
Odstraňování elementů
Existující elementu může být někdy potřeba odstranit a toho docílíme metodou removeChild. Ukázka:
<body>
<script type="text/javascript">
var element = document.getElementById("tretiOdkaz");
document.body.removeChild(element);
</script>
<a id="prvniOdkaz">Zde je nějaký text</a>
<p id="druhyOdkaz"> </p>
<p id="tretiOdkaz">Zde je nějaký odkaz</p>
</body>