HTMLCollection for Loop

Using the for Loop

In JavaScript, we can work with several HTML elements by using a loop. This loop helps us go through a list of numbers or words. To do this, we can set up a "for" loop and begin by defining an index variable.

In each iteration of the loop, we can access an element from the collection using square brackets along with its corresponding index and the total number of elements in the HTML collection can be determined using the "length" attribute of the collection.

Syntax of Using the for Loop:

Let's see an example to better comprehend this concept:

Output of Using the for Loop:

In this example, the JavaScript code uses a "for" loop to iterate through HTML elements with the class "divElement." The content of each div is displayed in the 'output' div, showing the use of a loop to access and display elements from an HTML collection.

Using the for/of Loop

The for-of loop is a method to go through each item in a collection, like an array or a list. It works well with things we can go through one by one, such as arrays, strings, lists of HTML elements, and more. For each round of the loop, it gives us one element at a time, following the order in the collection.

Syntax of Using the for/of Loop:

Let's see an example to understand this:

Output of Using the for/of Loop:

In this example, the for-of loop is used to iterate through each element in the allColors HTMLCollection. During each iteration, the current color is appended to the colorOutput div.

It's important to note that the for/of loop works specifically with iterable objects. Iterable objects are objects that implement the iterable protocol, allowing them to define or customize their iteration behavior. The loop will execute as many times as there are elements in the iterable object.

Use the forEach() Method

The forEach() method similarly traverses each element within the collection. By referencing the collection, forEach() invokes the specified callback function for every element. To utilize the current collection element within the callback function, we provide the function as a parameter to forEach(), ensuring that it receives the element as its own parameter.

Syntax of Using forEach() Method:

Let's see an example to understand forEach() Method:

Output of Using forEach() Method:

In this example, the forEach() method is used to iterate over an array of numbers. The callback function calculates the squared value of each number and shows the result as an output.

Using the Array.from() Method

The Array.from() method transforms an array-like or iterable object, such as an HTMLCollection, into a new Array. This allows the use of forEach() method to iterate over its elements just like a regular array, enabling seamless display or manipulation.

Syntax of Using Array.from() Method:

Let's see an example for understanding this method:

Output of Using Array.from() Method:

In this example, the Array.from() method is used to convert an HTMLCollection of elements with the class "item" into a new array (itemsArray). The forEach() method is then employed to iterate over the array and log the text content of each element to the console.

HTMLCollections don't directly support array methods like forEach(). By converting it to an array using Array.from(), we enable the use of array methods, making it easy to iterate over and perform operations on the elements. This provides more flexibility and functionality compared to directly working with HTMLCollections.

The diagram below demonstrates the appropriate iteration method to use depending on various use cases: