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í.