HTML - DOM Document scripts Property

Quiz

HTML DOM document scripts collection is a read-only property used for returning all the <script> elements present within HTML document as a collection.

Syntax

document.scripts;

Properties

Property	Description
length	It return the number of <script> element present in HTML document.

Methods

Below table shows a list of methods offered by DOM scripts collection.

Methods	Description
[index]	To return the <script> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of bound.
item(index)	To return the <script> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of range. It is similar to first method.
namedItem(id)	To return the <script> element from the collection with the given id. Null is returned if the id doesnt exist.

Return value

It returns an HTMLCollection which lists all the <script> elements present in the document.The elements present in the collection are sorted and are presented in the same order as they appear in the HTML document.

Examples of HTML DOM Document 'scripts' Property

The following examples illustrates use of scripts properties and methods.

Get Number of <script> Elements

In the following example, length property is used to return the number of <script> elements in document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <p>
        Click to get the number of <script> element.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="scripts"></p>
    <script></script>
    <script></script>
    <script></script>
    <script>
        function fun() {
            let x = document.scripts.length;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Get Content of First Script Element

In this example, we will get the content of first <script> using scripts [index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = 
                            "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = 
                            "This is second Script."
    </script>
    <script>
        document.getElementById("s3").innerHTML = 
                            "This is third Script."
    </script>
    <p>
        Click to get content of first script element.
    </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[0].text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Get Content of Second Script Element

In this example, we will get the content of second <script> using scripts item(index) method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = 
            "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = 
            "This is second Script."
    </script>
    <script>
        document.getElementById("s3").innerHTML = 
            "This is third Script."
    </script>
    <p>Click to get content of second script element.</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.item(1).text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Get Content of script Element with Specified id.

In the following example, we will get the content of <script> with specified id using scripts namedItem(id) method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document scripts Property</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>

Supported Browsers

Property
scripts	Yes 1	Yes 12	Yes 9	Yes 3	Yes 12.1

html_dom.htm

Print Page