DOM, neboli Document Object Model, je programovací rozhraní, které umožňuje skriptům přistupovat k obsahu webových stránek a manipulovat s ním. V JavaScriptu se DOM používá k dynamickému změnění obsahu, struktury a stylu HTML dokumentů. Každý HTML dokument je převeden na DOM, který je reprezentován jako stromová struktura objektů, umožňující snadný přístup a manipulaci s jednotlivými uzly dokumentu.
Základy manipulace s DOM
Výběr elementů
Pro manipulaci s DOM je nezbytné nejprve vybrat elementy, se kterými chceme pracovat. JavaScript nabízí několik metod pro výběr elementů:
getElementById(id): Vybere element podle jeho ID.getElementsByClassName(className): Vrátí kolekci všech elementů s danou třídou.getElementsByTagName(tagName): Vrátí kolekci všech elementů daného tagu.querySelector(selector): Vybere první element, který odpovídá danému CSS selektoru.querySelectorAll(selector): Vrátí kolekci všech elementů, které odpovídají danému CSS selektoru.
Manipulace s elementy
Po vybrání elementů můžeme s nimi dále pracovat. Několik základních operací zahrnuje:
- Změnu textového obsahu pomocí
textContent nebo innerText.
- Změnu HTML obsahu pomocí
innerHTML.
- Přidání nebo odebrání CSS tříd pomocí
classList.add(), classList.remove() nebo classList.toggle().
- Změnu stylů přímo pomocí
element.style.property.
- Přidání, odebrání nebo změna atributů elementů pomocí metod
setAttribute(), removeAttribute() nebo přístupu k atributům přes element.attribute.
Práce s událostmi
Pro interaktivní webové aplikace je důležitá práce s událostmi. JavaScript umožňuje naslouchat a reagovat na události, jako jsou kliknutí myší, stisky kláves nebo změny formulářových polí. Pro přidání posluchače události použijeme metodu addEventListener(event, function), kde event je název události a function je funkce, která se má vykonat při aktivaci události.
Příklad: Přidání události kliknutí
document.getElementById("myButton").addEventListener("click", function() {
alert("Bylo kliknuto na tlačítko!");
});
Pokročilé techniky
Pro pokročilejší manipulaci s DOM existují techniky jako je:
- Dynamické vytváření a odstraňování elementů pomocí
createElement() a removeChild().
- Použití
DocumentFragment pro efektivní vkládání více elementů najednou.
- Manipulace s DOM bez negativního vlivu na výkon aplikace, například minimalizací přístupů k DOM a použitím efektivních selektorů.
Práce s DOM v JavaScriptu je základní dovedností pro vývojáře webových aplikací. Pochopení základů i pokročilých technik umožňuje vytvářet dynamické, interaktivní a uživatelsky přívětivé Webové stránky. Důležité je také mít na paměti výkon aplikace při manipulaci s DOM, aby uživatelská zkušenost zůstala plynulá a bez zbytečných zpoždění.
