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
Please Login to comment...