Klikneš na „Přidat do košíku“ a číslo u košíku se zvýší, aniž by se stránka načetla znovu. JavaScript tu změnil kousek stránky. Aby to šlo, musí stránku „vidět“ v podobě, se kterou umí pracovat. Ta podoba se jmenuje DOM.
<p>, <li>…).<p>Ahoj</p> = element p a v něm textový uzel „Ahoj“.DOM vypadá jako rodokmen. Úplně nahoře je document, pod ním html a pod ním dvě větve head a body. Každá další značka je další větev nebo lístek stromu.
<ul><li>A</li><li>B</li></ul> je ul rodič a obě li jsou sourozenci.querySelectorAll najde všechny a vrátí jejich seznam.document.querySelector('#kosik'), document.querySelectorAll('.produkt')<span id="pocet">0</span>. Napiš kód, který po kliknutí na <button id="pridat"> zvýší číslo o 1.const pocet = document.querySelector('#pocet'); const btn = document.querySelector('#pridat'); btn.addEventListener('click', () => { pocet.textContent = Number(pocet.textContent) + 1; });. textContent je text elementu; protože je to string, převedeme ho na číslo.<ul id="ukoly"> nový úkol „Nakoupit“.const li = document.createElement('li'); vytvoří nový element (zatím mimo stránku). li.textContent = 'Nakoupit'; mu dá text. document.querySelector('#ukoly').append(li); ho připojí jako posledního potomka. Teprve teď se objeví na stránce.Doplň správnou metodu nebo vlastnost.
el.innerHTML = komentar;.el.textContent = komentar;.innerHTML text vyloží jako HTML. Útočník může napsat komentář s kódem a ten se spustí ostatním návštěvníkům. Tomu útoku se říká XSS. textContent vloží vždy jen obyčejný text.
querySelector), mění (textContent, classList), vytváří a připojuje (createElement, append) a prohlížeč změny hned vykreslí. Text od uživatele patří do textContent, ne do innerHTML.Práce s DOM se skládá ze stále stejných úkonů: najít element, změnit ho, reagovat na událost. Tady je máš jako krátké recepty, které budeš skládat dohromady.
document.title = 'Nový název' změní text v záložce.#id, .trida, p, nav a.'#formular input'addEventListener. Dostane objekt události s podrobnostmi.form.addEventListener('submit', (e) => { … })| Chci | Kód |
|---|---|
| najít jeden element | document.querySelector('.x') nebo document.getElementById('x') |
| najít všechny | document.querySelectorAll('.x') (vrátí seznam, projdeš for…of) |
| změnit text | el.textContent = 'text' |
| vložit HTML (jen důvěryhodné!) | el.innerHTML = '<b>tučně</b>' |
| přidat / odebrat / přepnout třídu | el.classList.add('x'), .remove('x'), .toggle('x') |
| změnit styl | el.style.color = 'red' |
| vytvořit a připojit | const p = document.createElement('p'); rodic.append(p); |
| odstranit | el.remove() |
| hodnota pole formuláře | input.value |
const form = document.querySelector('form'); const mail = document.querySelector('#mail');submit: form.addEventListener('submit', (e) => { … });if (!mail.value.includes('@')) { … }e.preventDefault(); a zobraz hlášku přes textContent.e.preventDefault();#tema má přepínat tmavý režim. CSS má hotovou třídu .tmavy pro body. Napiš JS.document.querySelector('#tema').addEventListener('click', () => { document.body.classList.toggle('tmavy'); });. toggle třídu přidá, když chybí, a odebere, když tam je. Vzhled zůstává v CSS, JS jen přepíná třídu.nav mají dostat třídu odkaz. Jak?for (const a of document.querySelectorAll('nav a')) { a.classList.add('odkaz'); }. querySelectorAll vrátí seznam a cyklus for…of ho projde. Volat classList přímo na seznamu nejde, je to metoda jednoho elementu.Roztřiď nástroje podle toho, k čemu slouží.
<head> bez defer zavolá document.querySelector('#menu') a dostane null.<body> nebo mu přidej atribut defer.Prohlížeč čte HTML shora. Skript v hlavičce běží dřív, než se #menu vůbec dostane do DOM.
querySelector, querySelectorAll), změň (textContent, classList, style, append, remove), reaguj (addEventListener, preventDefault). Skript spouštěj až po načtení HTML a vzhled nech v CSS.