Update all DOM Elements with a specific Class using JS

avatar

Borislav Hadzhiev

Sun Dec 26 20212 min read

Update all DOM Elements with a specific Class using JS #

To update all elements with a specific class:

  1. Select the elements using the getElementsByClassName() method.
  2. Use the for...of loop to iterate over the HTMLCollection.
  3. On each iteration, update the specific properties of the DOM element.

Here is the HTML for the example in the article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [div.box, div.box, div.box] for (const box of boxes) { box.classList.add('blue'); box.setAttribute('style', 'background-color: salmon;'); box.textContent = box.textContent + ' Updated.'; } // 👇️ [div.box.blue, div.box.blue, div.box.blue] console.log(boxes);

The first step is to use the document.getElementsByClassName method to get an HTMLCollection of all of the elements with a specific class.

Note that the method returns a live HTMLCollection and changes made to the DOM will update the HTMLCollection.

If for example you change the DOM element to not have a class of box, it would automatically get removed from the HTMLCollection.

If you want to work with a native JavaScript array instead, scroll down to the next code snippet.

The next step is to use the for...of loop to iterate over the HTMLCollection and update the properties of each DOM element.

In the example, we added a class to each element, updated the element's style attribute and its text content.

If you want to work with native JavaScript arrays and not an HTMLCollection, you can pass the result from calling getElementsByClassName to the Array.from() method.

index.js
const boxes = Array.from(document.getElementsByClassName('box')); console.log(boxes); // 👉️ [div.box, div.box, div.box] boxes.forEach(box => { box.classList.add('blue'); box.setAttribute('style', 'background-color: salmon;'); box.textContent = box.textContent + ' Updated.'; }); // 👇️ [div.box.blue, div.box.blue, div.box.blue] console.log(boxes);

We used the Array.from method to convert the HTMLCollection to an array.

Now that we have a native array, we are able to use any of the methods the data structure implements.

The function we passed to the Array.forEach method gets called for every element in the array.

If you need access to the index of the iteration, you can declare a second variable in the callback function.

index.js
const boxes = Array.from(document.getElementsByClassName('box')); boxes.forEach((box, index) => { console.log(index); // 👉️ 0, 1, 2 box.classList.add('blue'); box.setAttribute('style', 'background-color: salmon;'); box.textContent = box.textContent + ' Updated.'; });

Now that we have a native JavaScript array, things are a little more predictable.

For example, if the box class gets removed from any of the DOM elements, they won't automatically get removed from the boxes array.
Use the search field on my Home Page to filter through my more than 1,000 articles.