HTML - DOM Document getElementsByName() Method

Quiz

HTML DOM document getElementsByName() method is used to return collection of elements with the name attribute specified in the parameter.

Syntax

document.getElementsByName(name);

Parameter

This method accepts as single parameter as listed below.

Parameter	Description
name	It represents the element's name attribute.

Return Value

It returns nodelist object which is a collection of all the elements specified by name given in parameter.

Examples of HTML DOM Document 'getElementsByName()' Method

Given below are the examples illustrating uses of getElementsByName() method.

Count Number of Elements

In the following example this method is used to count the elements with name = "apps"

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document getElementsByName() Method
    </title>
</head>
<body>
    <button onclick="fun()">Click me</button><br>
    <input type="text" name="apps" value="Tutorial Point">
    <input type="text" name="apps" value="Tutorix">
    <input type="text" name="game" value="TOD">
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByName("apps").length;
            document.getElementById("type").innerHTML =
                "Elements with name 'apps' :" + x;
        }
    </script>
</body>
</html>

Get the Tag Name

In the following example this method is used to get the tag name of the element with name="forms".

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document getElementsByName() Method
    </title>
</head>
<body>
    <button onclick="fun()">Click me</button><br>
    <form name="form">
        <input type="text" name="apps" value="Tutorial Point">
        <input type="text" name="game" value="TOD">
    </form>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByName("form")[0].tagName;
            document.getElementById("type").innerHTML =
                "Elements with name 'forms' :" + x;
        }
    </script>
</body>
</html>

Get the content of Element

In the following example this method is used to get the content where name="form1".

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document getElementsByName() Method
    </title>
</head>
<body>
    <button onclick="fun()">Click me</button><br>
    <form name="form1">
        <input type="text" name="random" value="This is form 1">
        <input type="text" name="apps" value="Tutorial Point">
        <input type="text" name="game" value="TOD">
    </form>
    <br><br>
    <form name="form2">
        <input type="text" name="randoms" value="This is form 2">
        <input type="text" name="apps" value="Tutorix">
        <input type="text" name="game" value="RoadRash">
    </form>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByName("form1")[0].innerHTML;
            document.getElementById("type").innerHTML =
                "Content of the elements with name 'form1' :" + x;
        }
    </script>
</body>
</html>

Supported Browsers

Method
getElementsByName()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 5

html_dom.htm

Print Page