How To Add Attribute To Multiple Elements In JavaScript

Add attribute to multiple Elements in JavaScript

In this article I will share with you the simplest and easiest ways to add attribute to multiple elements in JavaScript. You will know the way to use the “document.querySelectorAll()” method to do it. Let’s check it out!

Add attribute to multiple elements in JavaScript

Using “document.querySelectorAll()” method

Suppose you want to add attributes to multiple elements in JavaScript. In that case, first, you must choose a gathering of components from DOM with comparative properties like a similar component or the same class. In such cases, there could be no preferable decision over the querySelectorAll method. It can choose a ton of components from the DOM having similar properties.




  • Selectors: one or more selectors, for example, class, id, attributes, …

Returns: a nodeList object with elements or returns an empty object.


Here is file code example learn.html

<!DOCTYPE html>
.example {
  border: 1px solid black;
  margin: 5px;

<h1>The Document Object</h1>
<h2>The querySelectorAll() Method</h2>

<p>Change the background color of all elements with class="example":</p>

<div class="learnshare">
A div with class="learnshare"

<div class="learnshare">
A div with class="learnshare"

<p class="learnshare">This is a p element with class="learnshare".</p>

<p>This is a <span class="learnshare">span</span> element with class="example" inside another p element.</p>

<script src="learn.js"></script>


And here is code JavaScript

// Use document.querySelectorAll to get class = <learnshare>
const node_list = document.querySelectorAll(".learnshare");

// Set the background color of all elements with class = <learnshare>
for (let i = 0; i < node_list.length; i++) {
  node_list[i].style.backgroundColor = "red";


Using “setAttribute” method

The second method, we will use the “forEach” method to iterate over all elements and the “setAttribute” method to add the attribute to multiple elements.

Follow its syntax and usage for better understanding:

Syntax: of forEach

array.forEach(function(current_value, idx, arr), value)


  • function: is used to run elements.
  • current_value: the current value.
  • idx: the current index.
  • arr: the array contain elements.
  • value: a value is passed as its function.

Return: None.

Syntax: of setAttribute

elements.setAttribute(names, values)


  • names: the name of the attributed.
  • values: the value of the attributed.

Return: None.

For a better understanding, please see the example below.

Code example:

Below, this is the HTML code:

<!DOCTYPE html>
<html lang = "en" >
    <meta charset = "UTF-8" />

    <div class = "learn"> Learn 1 </div>
    <div class = "learn"> Learn 2 </div>
    <div class = "learn"> Learn 3 </div>
    <script src = "learnshare.js"> </script>

And this is related JavaScript code.

// Select all elements with a class = learn
const learns = document.querySelectorAll('.learn');

// Iterate over all elements
learns.forEach((learn, idx) => {  
  learn.setAttribute('ID', 'learn-${idx}'); // set the attribute to elements



So thank you all for reading the article above. Hope you will find the best method to add attribute to multiple elements in JavaScript. If you have any questions, do not hesitate to comment below and I will answer your questions.

Good luck and see you again!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *