HTML | DOM getElementsByName() Method

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
                      

chevron_right


Output:

Supported Browsers: The browser supported by DOM getElementsByName() method are listed below:

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

All powers are within you You can do anything and everything Believe in that

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.