Práce s DOM

Co je DOM?

DOM (Document Object Model) je reprezentace HTML dokumentu jako stromová struktura objektů. Každý HTML tag je uzel v tomto stromě. JavaScript může k uzlům přistupovat, číst je, měnit je nebo mazat.

Celý strom je dostupný přes globální objekt document. Například document.title vrátí název stránky z tagu <title>.

Výběr prvků ze stránky

Aby JavaScript mohl s prvkem pracovat, musí ho nejdříve najít.

getElementById()

Najde prvek podle atributu id. Vrátí právě jeden prvek (ID musí být unikátní):

const rok = document.getElementById('current-year');
console.log(rok.textContent);   // Vypíše aktuální rok

querySelector()

Najde první prvek, který odpovídá CSS selektoru:

const prvniOdstavec = document.querySelector('p');
const tlacitko = document.querySelector('.btn-gold');
const toggle = document.querySelector('#theme-toggle');

querySelectorAll()

Vrátí všechny prvky odpovídající selektoru jako seznam (NodeList):

const odstavce = document.querySelectorAll('p');
odstavce.forEach(p => console.log(p.textContent));

Změny obsahu a atributů

textContent – změna textu

const rok = document.getElementById('current-year');
rok.textContent = new Date().getFullYear();   // Nastaví aktuální rok

innerHTML – změna HTML obsahu

const container = document.querySelector('.kontejner');
container.innerHTML = '<p>Nový odstavec</p>';

Pozor: innerHTML s nedůvěryhodným obsahem může být bezpečnostní riziko (XSS). Pro čistý text vždy preferuj textContent.

Atributy – setAttribute() a getAttribute()

const tlacitko = document.querySelector('#theme-toggle');
tlacitko.setAttribute('aria-label', 'Přepnout světlý režim');
console.log(tlacitko.getAttribute('aria-label'));

Práce s CSS třídami

Vlastnost classList umožňuje přidávat, odebírat nebo přepínat CSS třídy:

const body = document.body;

body.classList.add('dark');       // Přidá třídu
body.classList.remove('dark');    // Odebere třídu
body.classList.toggle('dark');    // Přidá, pokud chybí; odebere, pokud je
body.classList.contains('dark');  // Vrátí true/false

Kombinace s CSS proměnnými a přepínáním tříd je základ tmavého režimu:

// JavaScript
document.querySelector('#theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

DOM a přístupnost

Při dynamickém přidávání nebo měnění obsahu pomocí JavaScriptu je důležité aktualizovat i ARIA atributy, aby odečítač obrazovky zaregistroval změny:

// Po otevření menu
menu.setAttribute('aria-expanded', 'true');

// Po přidání statusové zprávy do aria-live oblasti
statusEl.textContent = 'Zpráva byla odeslána.';

Tip od Zdeňka

Zdeněk radí: Přepínač tmavého režimu na tomto webu funguje přes classList.toggle() na elementu body. CSS pak obsahuje pravidla pro třídu .dark-mode a přepíše hodnoty CSS proměnných. Celý mechanismus jsou tři řádky JavaScriptu a pár CSS pravidel. Nezapomínej při každé JavaScriptové změně aktualizovat i ARIA atributy – co neoznámíš odečítači, jako by neexistovalo.