In various situations, programmers need to get the HTML element by the name attribute. Suppose the developer wants to access a form control, like a radio button or checkbox, in order to read or manipulate its value. More specifically, the “name” attribute is used to group related form controls and the same name can be provided to many controls, allowing them to be accessed as a single group.
This post will illustrate the methods to retrieve an HTML element by name in JavaScript.
How to Get Elements by Name in JavaScript?
In JavaScript, you can access an HTML element using its name attribute with the help of the following predefined JavaScript methods:
-
- getElementsByName() Method
- querySelectorAll() Method
Method 1: Get Element by Name Using the “getElementsByName()” Method
To get the HTML element by name, use the “getElementsByName()” method. This method gives a collection of elements that have the specified name attribute.
Syntax
The following syntax is used for the getElementsByName() method:
Example
Firstly, create six buttons. Five of them have a “name” attribute that is used to get the HTML element “button”. Attach the onclick event with the sixth button that will call the “applyStyle()” function to style the five buttons:
<button name="btn">Button</button>
<button name="btn">Button</button>
<button name="btn">Button</button>
<button name="btn">Button</button> <br><br>
<button onclick = "applyStyle()">Click Here</button>
Define a function “applyStyle()” that will trigger on the button click and change the background color of all the buttons. To do this, first, get all the “button” elements as a group by calling the “getElementsByName()” method:
const btns = document.getElementsByName("btn");
btns.forEach(btn => {
btn.style.background = "cadetblue";
});
}
As you can see in the output while clicking on the button the background color of the five buttons will be changed:
Method 2: Get Element by Name Using “querySelectorAll()” Method
You can also utilize the “querySelectorAll()” method for getting elements by using the “name” attribute in JavaScript. This method is used to retrieve all elements in a document that matches a specified selector/attribute such as CSS class, id, or name.
Syntax
The given syntax is utilized for getting the element by name using the “querySelectorAll()” method:
Example
In the following example, we will change the color of only those buttons whose name is “btn1”:
<button name = "btn">Button</button>
<button name = "btn1">Button</button>
<button name = "btn">Button</button>
<button name = "btn1">Button</button>
<button name = "btn">Button</button> <br><br>
<button onclick = "applyStyle()">Click Here</button>
</div>
In the defined function, we will call first access all the button elements whose name is “btn1” and then apply styling on it:
const btns = document.querySelectorAll('[name="btn1"]');
btns.forEach(btn => {
btn.style.background = "cadetblue";
});
}
The given output signifies that only two buttons have changed their background color whose name is “btn1”:
Note: If you want to get a single element, it’s recommended to use document.querySelector instead of the document.querySelectorAll.
Conclusion
For getting or retrieving an element by name, use the “getElementsByName()” or the “querySelectorAll()” methods. The most commonly and efficiently utilized method for getting the element by name is the “getElementsByName()” method. This post illustrated the methods to retrieve an HTML element by name in JavaScript.
