HTML DOM id Property - อ่าน/ตั้งค่า ID ขององค์ประกอบ

คุณสมบัติ id ของ HTMLElement ใช้ **อ่านหรือตั้งค่า** ค่า ID ขององค์ประกอบ HTML ID ต้องเป็นค่าเฉพาะ (unique) ในหน้าเว็บเดียวกัน

รูปแบบการใช้งาน

// อ่านค่า
const elementId = element.id;

// ตั้งค่า
element.id = "newUniqueId";

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; text-align: center; }
    p { 
      background: #347924; 
      color: #fff; 
      padding: 1rem; 
      border-radius: 8px;
      max-width: 500px;
      margin: 1rem auto;
    }
    .show { 
      margin: 1rem; 
      color: #347924; 
      font-size: 1.2rem; 
      font-weight: bold; 
    }
    button { 
      margin: 0.5rem; 
      padding: 0.75rem 1.5rem; 
      border: none; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      background: #317EFB;
      color: white;
    }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>id Property Demo</h1>
  
  <p id="awesome-para">
    ย่อหน้านี้มี ID เป็น "awesome-para" ลองกดปุ่มดูด้านล่าง
  </p>
  
  <button onclick="showId()">แสดง ID</button>
  <button onclick="changeId()">เปลี่ยน ID</button>
  <button onclick="resetId()">คืนค่าเดิม</button>
  
  <div class="show" id="display"></div>
  
  <script>
    const para = document.querySelector('p');
    const display = document.getElementById('display');
    const originalId = 'awesome-para';
    
    function showId() {
      display.textContent = 'ID ปัจจุบัน: "' + para.id + '"';
    }
    
    function changeId() {
      const newId = 'ID-Changed-' + Date.now();
      para.id = newId;
      display.textContent = 'เปลี่ยน ID เป็น: "' + newId + '"';
    }
    
    function resetId() {
      para.id = originalId;
      display.textContent = 'คืนค่า ID เป็น: "' + originalId + '"';
    }
  </script>
</body>
</html>

กฎของ ID ใน HTML

• **ต้องไม่ซ้ำ** (unique) ในหน้าเว็บเดียวกัน
• **ต้องมีอย่างน้อย 1 ตัวอักษร** (ไม่ใช่ empty string)
• **ไม่มีช่องว่าง** (space, tab, newline)
• **Case-sensitive** (myId ≠ myid)
• เริ่มต้นด้วยตัวอักษร (A-Z, a-z) แนะนำ (HTML5 อนุญาตให้เริ่มต้นด้วยตัวเลขได้ แต่ไม่แนะนำ)
• ใช้ได้: ตัวอักษร, ตัวเลข, -, _, :, . (แต่หลีกเลี่ยง : และ . เพื่อ CSS selector)

การเข้าถึง element ด้วย ID

การใช้งาน ID ใน CSS และ JavaScript

<style>
  /* CSS ID selector - specificity สูง */
  #unique-id { color: red; }
</style>

<script>
// JavaScript
const el = document.getElementById('unique-id');

// CSS-in-JS / Dynamic styles
el.style.color = 'blue';

// Anchor links
// Jump to element
</script>

ข้อควรระวัง

• การเปลี่ยน ID ไดนามิกอาจทำให้ CSS selectors, anchor links, และ JavaScript references หยุดทำงาน
• หากเปลี่ยน ID ให้อัปเดตรีเฟอเรนซ์ทั้งหมด (event listeners, variables, ARIA attributes)
• aria-labelledby, aria-describedby, for (label) อ้างอิง ID - ต้องอัปเดตด้วย

แนวทางปฏิบัติที่ดีที่สุด

• ใช้ ID แบบ semantic: main-nav, user-profile, submit-btn
• หลีกเลี่ยง ID ที่ generate แบบสุ่ม ยกเว้นจำเป็น (ใช้ class/data-attribute แทน)
• สำหรับรายการหลายรายการ ใช้ class + data-* attributes แทน ID