Jak iterovat prvky DOM z querySelectorAll

Při práci s vanilkovým JavaScriptem je často nutné najít seznam prvků v Document Object Model (DOM) a iterovat je. Například nalezení všech kotevních značek s konkrétní třídou CSS a připojení obsluhy události kliknutí.

Metoda querySelectorAll() je metoda, která se běžně používá pro výběr všech prvků určitého typu. Vrátí seznam prvků DOM, které odpovídají zadaným selektorům. Vrácený seznam není pole, ale spíše objekt NodeList obsahující kolekci uzlů:

// select all anchor tags
const anchors = document.querySelectorAll('a.open-article');

// TODO: iterate over `NodeList` elements and attach a click handler

Existuje mnoho způsobů, jak procházet NodeList objekt v JavaScriptu. Pojďme se na ně podívat.

forEach() Metoda

Nejjednodušší a nejsnadnější způsob opakování výsledků vrácených querySelectorAll() je pomocí metody forEach(). Tato funkce provede danou funkci jednou pro každý uzel v NodeList .

Zde je příklad:

anchors.forEach(anchor => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

forEach() metoda pro NodeList funguje pouze v moderních prohlížečích. Pokud chcete podporovat staré prohlížeče, jako je Internet Explorer, použijte místo toho následující malý hack:

[].forEach.call(anchors, function (anchor) {
    anchor.addEventListener('click', function () {
        console.log('Link is clicked!');
    });
});

K převodu NodeList můžete také použít operátor spread na Array objekt. To vám umožní přístup ke všem metodám pole včetně forEach() :

[...anchors].forEach(anchor => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

for...of Smyčka

Dalším způsobem procházení objektu NodeList je použití příkazu ES6 for...of. Má čistou a stručnou syntaxi a je podporován všemi moderními prohlížeči:

for (const anchor of anchors) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

Moderní prohlížeče také podporují entries() , keys() a values() metody na NodeList objekt. Tyto metody vracejí iterátor, který vám umožní procházet všechny páry klíč–hodnota. Hodnoty jsou vždy Node objekty:

// entries() can be replaced with keys() or values()
for (const anchor of anchors.entries()) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

Jednoduché for Smyčka

Pokud chcete podporovat maximální počet prohlížečů včetně Internet Exploreru (IE), starý dobrý for smyčka je cesta:

for (let i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

Výše uvedený příklad používá syntaxi funkcí šipky ES6. V IE a podobných starších prohlížečích to nebude fungovat. Musíme tedy použít syntaxi deklarace funkce ES5:

for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function () {
        console.log('Link is clicked!');
    });
}

Knihovny třetích stran

Pokud již jQuery používáte, není třeba používat žádnou z výše uvedených metod:

$('a.open-article').on('click', () => {
    console.log('Link is clicked!');
});

V rámci JavaScriptu, jako je Angular, React a Vue, byste neměli používat jQuery. Raději použijte Lodashův _.forEach metoda:

_.forEach(anchors, (anchor, key) => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});