Nalezení prvku

Jakmile skript podle nějaké události zjistí, že se má vykonat, je potřeba najít prvek, s nímž se bude manipulovat.

Je mnoho způsobů, jak prvek v dokumentu najít. Pokusím se vás naučit jeden jediný způsob, který je snadný a univerzální. Je to metoda getElementById().

Příklady

Mám div s upoutávkou a chci u něj po načtení dokumentu nastavit červené písmo (pomiňme nyní možnost, že je jednodušší udělat to rovnou bez javascriptu). Načtení dokumentu je událost onload na prvku <body>. Jakmile tuto událost zaznamenám, změním barvu písma. Abych mohl div s upoutávkou najít, dám do jeho zápisu atribut id:

<div id="upoutavka">
Text upoutávky bla bla bla
</div>

A předtím v tagu <body> zapíšu událost a co se má stát:

<body onload="document.getElementById('upoutavka').style.color = 'red'">

Nebojte se toho dlouhého zápisu. Jakmile ho pochopíte, půjde všechno snáze. Podívejte se na příklad. Takže vysvětluji:

onload=" ... "

událost načtení (v tomto případě dokumentu) spouští skript. Je uveden v tagu body a říká "ve chvíli, kdy se nahraje stránka". To už znáte z minulého výkladu.

document.getElementById('upoutavka')

document.getElelmentById() je ta hlavní věc, kterou chci v tomto textu vysvětlit. Tento zápis najde v dokumentu prvek, který má id rovno 'upoutavka'. Takže najde ten div  s id="upoutavka" (samozřejmě se nesmí stejné id dávat více prvkům). Zápis getElementById znamená doslova "dostaň prvek podle Id".

Všimněte si zápisu malých a velkých písmen. Nesmí se to pomíchat.

Všimněte si, že za getElementById jsou závorky, v závorce je v uvozovkách nebo apostrofech jméno toho ídéčka.

Proč jsou tam v příkladu apostrofy a ne uvozovky? Protože se to celé zauvozovkované už z toho onload, takže se tam v tomto případě nemohou uvozovky použít. Musejí se použít apostrofy.

Jinak řečeno, zápis

document.getElementById("upoutavka")

mi reprezentuje ten div s upoutávkou, který má nastaveno id="upoutavka"

.style.color = 'red'

Toto je způsob, jak nastavit červenou barvu písma (používá se css styl color). O tom bude pojednávat až jedna z dalších kapitol.

Jinak řečeno document.getElementById("upoutavka") je objekt a co se za něj připojí s tečkou, to se s tím objektem stane.