In numerous conditions, programmers have to get the HTML factor by the identify attribute. Suppose the developer needs to entry a kind management, like a radio button or checkbox, with a purpose to learn or manipulate its worth. Extra particularly, the “identify” attribute is used to group associated kind controls and the identical identify might be supplied to many controls, permitting them to be accessed as a single group.
This publish will illustrate the strategies to retrieve an HTML factor by identify in JavaScript.
Find out how to Get Components by Title in JavaScript?
In JavaScript, you’ll be able to entry an HTML factor utilizing its identify attribute with the assistance of the next predefined JavaScript strategies:
-
- getElementsByName() Technique
- querySelectorAll() Technique
Technique 1: Get Factor by Title Utilizing the “getElementsByName()” Technique
To get the HTML factor by identify, use the “getElementsByName()” technique. This technique provides a set of components which have the required identify attribute.
Syntax
The next syntax is used for the getElementsByName() technique:
doc.getElementsByName(“identify”)
Instance
Firstly, create six buttons. 5 of them have a “identify” attribute that’s used to get the HTML factor “button”. Connect the onclick occasion with the sixth button that can name the “applyStyle()” operate to model the 5 buttons:
<button identify=“btn”>Button</button>
<button identify=“btn”>Button</button>
<button identify=“btn”>Button</button>
<button identify=“btn”>Button</button>
<button identify=“btn”>Button</button> <br><br>
<button onclick = “applyStyle()”>Click on Right here</button>
Outline a operate “applyStyle()” that can set off on the button click on and alter the background shade of all of the buttons. To do that, first, get all of the “button” components as a bunch by calling the “getElementsByName()” technique:
operate applyStyle(){
const btns = doc.getElementsByName(“btn”);
btns.forEach(btn => {
btn.model.background = “cadetblue”;
});
}
As you’ll be able to see within the output whereas clicking on the button the background shade of the 5 buttons shall be modified:
Technique 2: Get Factor by Title Utilizing “querySelectorAll()” Technique
You can even make the most of the “querySelectorAll()” technique for getting components by utilizing the “identify” attribute in JavaScript. This technique is used to retrieve all components in a doc that matches a specified selector/attribute akin to CSS class, id, or identify.
Syntax
The given syntax is utilized for getting the factor by identify utilizing the “querySelectorAll()” technique:
doc.querySelectorAll(‘[name=”n1″]’);
Instance
Within the following instance, we are going to change the colour of solely these buttons whose identify is “btn1”:
<div>
<button identify = “btn”>Button</button>
<button identify = “btn1”>Button</button>
<button identify = “btn”>Button</button>
<button identify = “btn1”>Button</button>
<button identify = “btn”>Button</button> <br><br>
<button onclick = “applyStyle()”>Click on Right here</button>
</div>
Within the outlined operate, we are going to name first entry all of the button components whose identify is “btn1” after which apply styling on it:
operate applyStyle(){
const btns = doc.querySelectorAll(‘[name=”btn1″]’);
btns.forEach(btn => {
btn.model.background = “cadetblue”;
});
}
The given output signifies that solely two buttons have modified their background shade whose identify is “btn1”:
Observe: If you wish to get a single factor, it’s beneficial to make use of doc.querySelector as an alternative of the doc.querySelectorAll.
Conclusion
For getting or retrieving a component by identify, use the “getElementsByName()” or the “querySelectorAll()” strategies. Essentially the most generally and effectively utilized technique for getting the factor by identify is the “getElementsByName()” technique. This publish illustrated the strategies to retrieve an HTML factor by identify in JavaScript.
