HTML | DOM Ol Object

The DOM Ol Object is used to represent the HTML <ol> element . The ol element is accessed by getElementById(). To read more about lists check HTML | Lists.

Properties:

compact: It is used to set or return whether the size of the list would be displayed normal or not.
reversed: It is used to set or return whether the list item is displayed in descending order or ascending order.
start: It is used to set or return the value of the start attribute in an <ol> element.
type: It is used to set or return the value of the type attribute in an <ol> element.

Syntax:

document.getElementById("ID");

Where “id” is the ID assigned to the “ol” tag. Example-1:

html

<!DOCTYPE>

<html>
 
<head>

    <style>

        h1 {

            color: green;

        }

    </style>

</head>
 
<body>

    <h1> 

        GEEKSFORGEEKS 

    </h1>

    <h2> 

         DOM Ol Object

    </h2>

    <p>

        Ordered Lists

    </p>

    <!--  Assigning id to 'ol' tag.  -->

    <ol id="GFG">

        <li>one</li>

        <li>two</li>

        <li>three</li>

    </ol>

    <button onclick="Geeks()">Submit</button>

    <script>

        function Geeks() {

            //  Accessing ol tag 

            //  and  starts with 101.

            var g = document.getElementById("GFG");

            g.start = "100";

        }

    </script>

</body>
 
</html>

Output: Before Clicking On button:

After Clicking On Button:

Example-2 : Ol Object can be created by using the document.createElement method.

html

<!DOCTYPE>

<html>
 
<head>

    <style>

        h1 {

            color: green;

        }

    </style>

</head>
 
<body>

    <h1> 

        GEEKSFORGEEKS 

    </h1>

    <h2> 

         DOM Ol Object

    </h2>

    <button onclick="Geeks()">Submit</button>

    <script>

        function Geeks() {

            //  Creating 'ol' object

            var g = document.createElement("OL");

            g.setAttribute("id", "GFG");

            document.body.appendChild(g);
 
            var x = document.createElement("LI");

            var y = document.createTextNode("geeks");

            x.appendChild(y);

            document.getElementById("GFG").appendChild(x);
 
            var w = document.createElement("LI");

            var f = document.createTextNode("sudo");

            w.appendChild(f);

            document.getElementById("GFG").appendChild(w);

        }

    </script>

</body>
 
</html>

Output : Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by DOM Ol Object are listed below:

Google Chrome
Edge version 12 and above
Firefox version 1 and above
Internet Explorer
Opera
Safari

Article Tags :

HTML

Web Technologies

HTML-DOM