HTML | DOM getElementsByName() Method - GeeksforGeeks

25 Jul, 2019
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:
<!DOCTYPE html><html>  <head>    <title>DOM getElementsByName()</title>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }    </style>    <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></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>
Output:
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.
<!DOCTYPE html><html>  <head>    <title>DOM getElementsByName()</title>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }    </style>    <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></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>                      
Output:
Supported Browsers: The browser supported by DOM getElementsByName() method are listed below:
Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?