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

อ็อบเจ็กต์ Ul ใน HTML DOM แทนองค์ประกอบ <ul> (Unordered List / รายการไม่มีลำดับ)

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

var ulObject = document.createElement("UL")

คุณสมบัติของ Ul Object (ไม่รองรับใน HTML5)

หมายเหตุ: คุณสมบัติ compact และ type เป็น ล้าสมัย (deprecated) ใน HTML5 ควรใช้ CSS แทน (เช่น list-style-type, line-height)

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

ตัวอย่างนี้ใช้เมธอด item() ของ HTMLCollection เพื่อดึงรายการเมนูที่คลิก

<!DOCTYPE html>
<html>
<head>
<title>Ul item()</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="button"] { border-radius: 10px; }
  ul{ width: 30%; margin: 0 auto; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>item()</legend>
      <h2>Menu</h2>
      <ul>
        <li onclick="getOrder(0)">Mac & Cheese</li>
        <li onclick="getOrder(1)">Pizza</li>
        <li onclick="getOrder(2)">Burger</li>
      </ul>
      <div id="divDisplay">Click on menu item to order it</div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var menuSelect = document.getElementsByTagName("li");
  function getOrder(index) {
    divDisplay.textContent = 'Order: '+(menuSelect.item(index)).textContent;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิก <li>:

หลังคลิก <li>: