Moderní tvorba webových aplikací

O webu

Procházení značek v JavaScriptu

Jak cyklem procházet značky v JavaScriptu. Popis různých možností.

3 minuty

Elementy se společnými znaky (stejný název tagu, stejný název třídy) lze získat buď metodami getElement*, nebo od IE 8 metodou querySelectorAll. Oba postupy vrátí kolekci elementů.

Chceme-li se získanými značkami něco dělat (změnit jim třídu, přidat nějakou funkci do onclicku apod.), je potřeba je projít cyklem.

Cyklus for

Časté řešení je běžný cyklus for, kde se prochází jednotlivé elementy do té doby, než se dosáhne počtu všech vybraných značek (znacky.length). (Pozor na překlep, lenght je špatně.)

Indexy značek se číslují od nuly, proto var i = 0.

var znacky = document.getElementsByTagName("div");
for (var i = 0; i < znacky.length; i++) {
  // znacky[i]
}

V případě, že chceme položky procházet odzadu, bude for vypadat následovně (ukázka):

for (var i = znacky.length - 1; i >= 0; i--) {
  // znacky[i]
}

Tento postup zezadu by měl být rychlejší (nemusí se neustále procházet všechny značky a zjišťovat jejich počet — znacky.length).

Zrychlit první způsob cyklu for by šlo uložením délky do pomocné proměnné (ukázka).

for (var i = 0, delka = znacky.length; i < delka; i++) {
  // znacky[i]
}

Cyklus for … in

Při použití for/in cyklu by projití všech elementů mohlo vypadat následovně (ukázka):

for (var i in znacky) {
  // znacky[i]
}

Nebezpečí hrozí při používání for … in pro procházení polí. Druhá nevýhoda je, že směr procházení elementů nemusí být shodný napříč prohlížeči.

Cyklus while

Po for … in má asi nejstručnější zápis. Někdy může být nevýhoda, že prochází značky od konce a srozumitelnost zápisu nemusí být pro každého (ukázka).

var i = znacky.length; 
while (i--) {
  // znacky[i]
}

Odkazy jinam

Související články

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025