อ็อบเจ็กต์ Ol ของ HTML DOM

อ็อบเจ็กต์ Ol ใน HTML DOM แทนองค์ประกอบ <ol> (Ordered List / รายการลำดับ)

การสร้างองค์ประกอบ <ol>

var olObject = document.createElement("OL")

คุณสมบัติของ Ol Object

ตัวอย่างการใช้งาน

ตัวอย่างนี้แสดงการใช้คุณสมบัติ start (ซ้ำซ้อนกับบทความก่อนหน้า แต่แสดงในบริบทของ Ol Object)

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol start</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="button"] { border-radius: 10px; }
  ol{ width: 30%; margin: 0 auto; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-Ol-start</legend>
      <h3>Students</h3>
      <ol id="orderList" start='2'>
        <li>Zampa</li>
        <li>Rajesh</li>
        <li>Eden</li>
        <li>Bina</li>
        <li>Alex</li>
        <li>Adam</li>
      </ol>
      <input type="button" onclick="reverseNumbering()" value="Correct list">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var studentList = document.getElementById("orderList");
  function reverseNumbering() {
    studentList.start = '1';
    divDisplay.textContent = 'List Corrected';
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่ม "Correct List":

หลังกดปุ่ม "Correct List":