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.
Syntax:
document.querySelectorAll(Selectors)
Parameters:
- Selectors: one or more selectors, for example, class, id, attributes, …
Returns: a nodeList object with elements or returns an empty object.
Example:
Here is file code example learn.html
<!DOCTYPE html>
<html>
<style>
.example {
border: 1px solid black;
margin: 5px;
}
</style>
<body>
<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>
<div class="learnshare">
A div with class="learnshare"
</div>
<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>
</body>
</html>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";
}Output:
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)Parameters:
- 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)Parameters:
- 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" >
<head>
<meta charset = "UTF-8" />
</head>
<body>
<div class = "learn"> Learn 1 </div>
<div class = "learn"> Learn 2 </div>
<div class = "learn"> Learn 3 </div>
<script src = "learnshare.js"> </script>
</body>
</html>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
});Output:
Summary
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:
- TypeError: getElementById is not a function in JavaScript
- Select elements by Multiple IDs using JS
- Update all dom elements with a specific class using js
Hi, guys! My name’s Scott Miller. My current job is a software developer and I have shared a lot of quality articles about Javascript, C, C++, C#, Python, PHP, R, Java programming languages. I’m hoping they can assist you.
Name of the university: HCMUS
Major: IT
Programming Languages: C, C++, Python, R, Java, JavaScript
