The getElementsByName() method returns collection of all elements of particular document by name. This collection is called node list and each element of the node list can be visited with the help of the index.
Syntax
document.getElementsByName(name)Parameter : This function accepts name of document.
Return Type : This function returns collection of elements. By using the build in method length we can find the total number of elements presents inside that particular element. Below example illustrates it clearly.
Note : There is no getElementByName() method exists, it is getElementsByName(), with a ‘s’.
Example 1:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByName()</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<!--Driver Code Ends-->
<script>
// creating geeks function to display
// number of elements at particular name
function geeks() {
// taking list of elements under name ga
var x = document.getElementsByName("ga");
// printing number of elements inside alert tag
alert("Total element with name ga are: " + x.length);
}
</script>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementsByName() Method</h2>
<!-- creating tag with name ga -->
<h4 name="ga">Geeks</h4>
<h4 name="ga">for</h4>
<h4 name="ga">Geeks</h4>
<input type="button" onclick="geeks()"
value="Click here" />
</body>
</html>
<!--Driver Code Ends-->
Since document.getElementsByName() method returns an array containing of objects if we want to get value of any object then we should use document.getElementsByName("element_name")[index].value. Otherwise we will get result undefined. Below program explains it clearly.
Example 2:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByName()</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<!--Driver Code Ends-->
<script>
// creating geeks function to display
// elements at particular name
function geeks() {
// This line will print entered result
alert(document.getElementsByName("ga")[0].value);
}
</script>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementsByName() Method</h2>
<!-- This will create an input tag-->
<input type="text" name="ga" />
<br>
<br>
<!-- function will be called when we
click on this button-->
<input type="button" onclick="geeks()"
value="Click here" />
<p></p>
</body>
</html>
<!--Driver Code Ends-->
- Searches by the name attribute only : Unlike getElementById() or getElementsByClassName(), it specifically looks for the name attribute (commonly used on form controls like <input>, <select>, radio buttons, etc.).
- Returns a live NodeList : The collection automatically updates if elements with the matching name are added or removed from the document.
