javascript - hvordan iterere over HTMLCollection?

Jeg har noen elementer i HTML-en min med klassen node-item, jeg får tilgang til dem i komponenten min ved å bruke:

let nodeItems = document.getElementsByClassName('node-item');

og når jeg logger nodeItems får jeg en HTMLCollection[] med lengde 4.

Jeg prøvde mange måter, men kan fortsatt ikke iterere over nodeItems:

1- første forsøk:

let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
}

2. forsøk:

for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}

Og jeg prøvde array-iterasjon og objekt-iterasjon, men fortsatt undefined eller error. prøvde også:

let nodeItems = document.querySelector(selectors);

Men de samme problemene.

Svar #1

nodeItems er HTMLCollection, som er et array-lignende objekt.

Det er itererbart i moderne nettlesere. Iteratorer støttes med downlevelIteration kompilatoralternativ aktivert, i dette tilfellet vil det være:

const nodeItems = document.getElementsByClassName('node-item');

for (const c of nodeItems) {
  // ...
}

Iterables kan polyfylles i eldre nettlesere. core-js tilbyr polyfyller for DOM-iterables.

Ellers kan nodeItems konverteres til en array og itereres som vanlig:

const nodeItems = Array.from(document.getElementsByClassName('node-item'));

for (const c of nodeItems) {
  // ...
}

Svar #2

Bare bruk Array.from(document.getElementsByClassName('node-item')) eller spread-operatoren [...document.getElementsByClassName('node-item')] og bruk det du ellers ville brukt på et array.

Bortsett fra det, kan du også bruke en vanlig for-løkke

let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
    // access current element with nodeItems[i]
}

Relaterte artikler