Postřehy ke kolekcím DOM elementů

Axel Rauschmayer sdílel na Twitteru postřeh o tom, že v JavaScriptu máme dvě třídy reprezentující pole elementů (NodeList a HTMLCollection) a dvě varianty provázání s DOMem (statický a samoaktualizující). Z tohoto plyne několik vlastností/důsledků…

Společné vlastnosti

Obě třídy jsou podobné polím, ale nedědí z Array. Primárně to tedy spíš znamená, že jsou iterovatelné. Dále pak podporují spread operátor ... a lze je převést na pole (Array.from). Z Array method ještě obě DOM kolekce mají getter length a item (metoda vrací prvek dle indexu, nebo null¹).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { forms }= document;
// Klasické procházení
for(let i=0, { lenght }= forms; i<length; i++){
    forms[i].className= "just-example";
}
// Novější
for(const form_el of forms){
   form_el.className= "just-example";
}
// forEach, map, …
Array.prototype.forEach.call(forms,
   form_el=> form_el.className= "just-example");
// … resp.
Array.from(forms).forEach(
   form_el=> form_el.className= "just-example");

Reflektování změn v DOMu

Rozdíl spočívá hlavně v tom, zda se pole aktualizuje dle změn DOMu (např přidání elementu), viz Live vs. Static NodeLists. Používá se názvosloví live/static (živý/statický), které je dostatečně popisné.

NodeList (živý/statický)

Podrobné informace viz NodeList - Web APIs | MDN.

Jedná se výstup z document.querySelectorAll (statiscký) resp. Node.childNodes (živý).

V podporovaných prohlížečích obsahuje metody forEach, values, entries, apod.

HTMLCollection (vždy živý)

Podrobné infomace viz HTMLCollection - Web APIs | MDN.

Vrací ji například Element.getElementsByClassName, Element.getElementsByTagName či document.forms.

K prvkům pole lze přistupovat i přes HTML vlastnosti id či name daného elementu a to pomocí metody namedItem resp. pomocí závorek pole["name_or_id"] či tečkového zápisu pole.name_or_id.

1
2
3
4

// pro <form name="login"><input name="login_email" type="email"/></form>
const login_form= document.forms.login;
const login_form_elements= login_form.elements;
const email_input= login_form_elements.login_email;