HTML - DOM HTMLCollection namedItem() Method

Quiz

HTML DOM HTMLCollection namedItem() method used to get the first element of collection whose id or name matches with the name mentioned in parameter of namedItem() method.

Syntax

HTMLCollection[name];
Or
HTMLCollection.namedItem(name);

Parameter

It accepts one required parameter which is mentioned below.

Parameter	Description
name	It represents the id or name attribute of the element which you want to return.

Return Value

It returns an element corresponding to id or name attribute mentioned in the parameter.

Examples of HTML DOM HTMLCollection 'namedItem()' Method

The following examples illustrates use of namedItem() method.

Get Content of script Element

The following example returns the content of script element with id="s3"

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTMLCollection namedItem() Method</title>
</head>
<body>
    <script>document.getElementById("s1").innerHTML = "This is first Script."</script>
    <script>document.getElementById("s2").innerHTML = "This is second Script."</script>
    <script id="last">document.getElementById("s3").innerHTML = "This is third Script."</script>
    <p>Click to get content of script element with id= 's3'.</p>
    <button onclick="fun()">Click me</button>
    <p id="s1"></p>
    <p id="s2"></p>
    <p id="s3"></p>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts.namedItem("last").text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Alternate way to get Content of Elements.

The following example illustrates alternate way to get the content of <h1> element with id="alt"

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTMLCollection namedItem() Method</title>
</head>
<body>
    <h1 id="alt">I am h1 with alt id</h1>
    <h2>I am random text</h2>
    <p>Click to get content of h1 element with id= 'alt'.</p>
    <button onclick="fun()">Click me</button>
    <p id="display"></p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("h1");
            let y = x["alt"];
            document.getElementById("display").innerHTML = y.innerHTML;
        }
    </script>
</body>
</html>

Get Content of button Element

The following example returns the content of button element with name="fun".

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTMLCollection namedItem() Method</title>
</head>
<body>
    <p>Click on "click me" to get content of button element with name= 'fun'.</p>
    <button onclick="fun()">Click me</button>
    <button name="fun">Button 1</button>
    <p id="display"></p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("button").namedItem("fun").innerHTML;
            //let y=x["alt"];
            document.getElementById("display").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Method
namedItem()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page