Procházení elementů v JS

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

JS querySelector

Výběr elementů querySelectorem

Metoda querySelector a querySelectorAll zjednodušuje výběr elementů v JavaScriptu.

Funkce getElementById a getElementsByTagName

Metody getElementByIdgetElementsByTagName

Vybírání elementů v JavaScriptu metodami getElementById, getElementsByTagName a getElementsByClassName.

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Úprava libovolného textu na stránce

Úprava textu stránky pomocí designMode

Jednoduchý bookmarklet pro okamžité přepsání libovolného textu na stránce.

Zablokování kláves

Zablokování některých kláves

Zablokování určitých kláves (šipek) pomocí JavaScriptu.

Komentáře