HTML DOM scripts Collection

Last Updated : 09 Jun, 2023

The DOM scripts Collection in HTML is used to return the collection of all <script> elements in an HTML document. The script elements are sorted as appear in the sourcecode.

Syntax:

document.scripts

Property Value: It returns the single value length which is the collection of all script elements.

Method:

[index]: It is used to return the <script> element of the selected index. The index value starts with 0. It returns NULL if the index value is out of range.
item(index): It is used to return the <script> element of selected index. The index value starts with 0. It returns NULL if the index value is out of range.
namedItem(id): It is used to return the <script> element from the collection with the given id attribute. It returns NULL if the id is not valid.

Example 1: In this example, we will use DOM scripts Collection.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM scripts collection</title>
    <style>
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
        body {
            text-align: center;
            font-family: Times;
        }
    </style>
</head>
<body>
    <a name="" class="gfg">GeeksforGeeks</a>
    <h2>DOM scripts Collection</h2>
    <!-- script content -->
    <script>
        document.write("GeeksForGeeks");
    </script><br><br>
    <button onclick="Geeks()">Submit</button>
    <p id="sudo"></p>
    <!-- script content -->
    <script>
        function Geeks() {
            let x = document.scripts.length;
            document.getElementById("sudo").innerHTML =
                "Number of scripts elements: " + x;
        }
    </script>
</body>
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
<head>
    <title>DOM scripts collection</title>
    <style>
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
        body {
            text-align: center;
            font-family: Times;
        }
    </style>
</head>
<body>
    <a name="" class="gfg">GeeksforGeeks</a>
    <h2>DOM scripts Collection</h2>
    <!-- script content -->
    <script>
        document.write("GeeksForGeeks");
    </script><br><br>
    <button onclick="Geeks()">Submit</button>
    <p id="sudo"></p>
    <!-- script content -->
    <script>
        function Geeks() {
            let x = document.scripts[0].text;;
            document.getElementById("sudo").innerHTML =
                "First script Element: " + x;
        }
    </script>
</body>
</html>