HTML DOM getElementsByName() Method

Last Updated : 13 Jun, 2023

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:

html

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

html

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