How to Iterate through `getElementsByClassName` Safely in JavaScript?

How to Iterate through getElementsByClassName Correctly

In JavaScript, getElementsByClassName returns a NodeList, not an array. This can lead to unexpected behavior for beginners, such as a rapidly changing NodeList during iteration.

Solution 1: Using item() Method

To iterate through a NodeList properly, you can use the item() method:

const slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

This method returns the ith element of the NodeList.

Solution 2: Cloning NodeList into an Array

Alternatively, you can clone the NodeList into an array and iterate through that:

const slides = document.getElementsByClassName("slide");
const slidesArray = Array.from(slides);
for (let slide of slidesArray) {
   Distribute(slide);
}

This solution is preferred when there may be nested slides, as it creates a static copy of the NodeList.

Important Note

It's essential to remember that when modifying the DOM tree within the Distribute function, the NodeList might change. Therefore, it's crucial to use the item() method or clone the NodeList before modifying the DOM.

The above is the detailed content of How to Iterate through `getElementsByClassName` Safely in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!