Hledání prvků

Aby JavaScript mohl na stránce něco změnit, musí nejdřív najít příslušný prvek. Celá stránka je v JavaScriptu dostupná jako document a jeho metoda document.querySelector() prvek najde. Vyzkoušíme si to na této stránce:

<h1>Moje kočka</h1>
<p id="jmeno-kocky">Micka</p>
<p class="poznamka">Ráda spí.</p>

Do závorek metody querySelector() napíšete v uvozovkách selektor, který říká, co hledat:

• "h1" najde prvek podle názvu tagu, tady hlavní nadpis,
• "#jmeno-kocky" najde prvek s atributem id="jmeno-kocky" (# znamená id),
• ".poznamka" najde prvek s atributem class="poznamka" (tečka znamená třídu, anglicky class).

id je jedinečné jméno: na stránce ho smí mít jen jeden prvek. Třída (class) je název skupiny: může ji mít více prvků, například aby vypadaly stejně. Pokud selektoru odpovídá více prvků, querySelector() vrátí ten první. Stejné selektory používá CSS, když určuje, na které prvky se má styl použít.

Nalezený prvek si uložte do proměnné, abyste s ním mohli dál pracovat. console.log() vypíše prvek jako jeho HTML:

const nadpis = document.querySelector("h1");
console.log(nadpis); // Vypíše: <h1>Moje kočka</h1>

Používáme const, protože proměnná bude obsahovat pořád tentýž prvek, i když změníme jeho text.

Text prvku je v jeho vlastnosti textContent. Můžete ho přečíst a můžete ho změnit přiřazením nové hodnoty, čímž se hned změní i stránka:

const jmenoKocky = document.querySelector("#jmeno-kocky");
console.log(jmenoKocky.textContent); // Vypíše: Micka

jmenoKocky.textContent = "Luna";
console.log(jmenoKocky.textContent); // Vypíše: Luna

Na stránce je teď místo Micky Luna. JavaScript mění jen stránku v prohlížeči, ne soubor index.html: když se stránka načte znovu, začne zase podle index.html a skript své změny udělá znovu.

Pozor: # a tečka patří jen do selektoru. V HTML napíšete id="jmeno-kocky", v JavaScriptu "#jmeno-kocky".