In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > getElementsByName (document, XMLDocument)

getElementsByName method (document, XMLDocument)

Browser support:

Returns a NodeList collection that contains all elements in the current document with the specified name attribute.

The getElementsByName method works differently in different browsers.

In Internet Explorer and Opera, it searches and returns the elements matched by id and name attributes.
In Firefox, Google Chrome and Safari, only elements with matching name attributes are returned.

Another difference is case-sensitivity.

In Firefox, Opera, Google Chrome and Safari, the getElementsByName method is case-sensitive for the value of the name (and the id in Opera) attribute.
In Internet Explorer, it is not case-sensitive for the value of the id and name attributes.

Note: the getElementsByName method is not case-sensitive for the name of the name (and id) attributes in browsers. 'name', 'Name, 'NAME', etc. all designate name attributes.

In XML documents, only Google Chrome and Safari support the getElementsByName method.

Syntax:

object.getElementsByName (name);

You can find the related objects in the Supported by objects section below.

Parameters:

name

Required. String that specifies the name attribute value to look for.

Return value:

Returns a NodeList collection filled with the matching elements. The elements in the returned collection are in source order.

Example HTML code 1:

This example illustrates the use of the getElementsByName method:

<head>
    <script type="text/javascript">
        function GetCheckedFruits () {
            var elements = document.getElementsByName ("fruit");
            for (var i=0; i < elements.length; i++) {
                if (elements[i].checked) {
                    alert ("The " + (i + 1) + ". radio button is checked");
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="GetCheckedFruits ()">Get the checked fruit!</button>
    apple <input type="radio" name="fruit" checked="checked" />
    peach <input type="radio" name="fruit" />
    cherry <input type="radio" name="fruit" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how the getElementsByName method works in browsers:

<head>
    <script type="text/javascript">
        function TestGetElementsByName () {
            var elem = document.getElementsByName ("myAnchor");
            if (elem.length > 0) {      // Internet Explorer, Firefox, Opera, Google Chrome and Safari
                alert ("An element exists with myAnchor name (or ID).");
            }
            else {
                alert ("No element exists with myAnchor name (or ID).");
            }

                // case-sensitivity test
            var elem = document.getElementsByName ("myanchor");
            if (elem.length > 0) {      // Internet Explorer
                alert ("An element exists with myanchor name (or ID).");
            }
            else {      // Firefox, Opera, Google Chrome and Safari
                alert ("No element exists with myanchor name (or ID).");
            }
            
                // test of the id attribute
            var elem = document.getElementsByName ("myDivision");
            if (elem.length > 0) {      // Internet Explorer, Opera
                alert ("An element exists with myDivision name (or ID).");
            }
            else {          // Firefox, Google Chrome, Safari
                alert ("No element exists with myDivision name (or ID).");
            }
        }
    </script>
</head>
<body>
    <a name="myAnchor">An element with name="myAnchor"</a>
    <div id="myDivision">An element with id="myDivision"</div>
    <br /><br /><br />
    <button onclick="TestGetElementsByName ()">Test the getElementsByName method!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the meaning of live collections with the getElementsByName method:

<head>
    <script type="text/javascript">
        function GetFruits () {
            var fruits = document.getElementsByName ("fruit");

            alert ("There are " + fruits.length + " fruit elements in the document.");

                // remove a fruit from the document
            var fruit = fruits[0];
            var fruitParent = fruit.parentNode;
            fruitParent.removeChild (fruit);
            alert ("A fruit element has been removed from the document.");

            alert ("There are " + fruits.length + " fruit elements in the document.");

                // add a fruit to the document
            fruitParent.appendChild (fruit);
            alert ("A new fruit element has been added to the document.");

            alert ("There are " + fruits.length + " fruit elements in the document.");
        }
    </script>
</head>
<body>
    <button onclick="GetFruits ()">Get the number of fruits!</button>
    <br /><br />
    apple <input type="radio" name="fruit" checked="checked" />
    peach <input type="radio" name="fruit" />
    cherry <input type="radio" name="fruit" />
</body>