HTML DOM Address Object - สร้างและจัดการ address element

วัตถุ (Object) HTMLAddressElement ใช้แทนแท็ก <address> ใน DOM สามารถสร้าง เข้าถึง และจัดการได้ผ่าน JavaScript

การสร้าง address element ด้วย JavaScript

// สร้าง element
const address = document.createElement('address');

// เพิ่มเนื้อหา
address.textContent = 'ABC Inc, P 120, Ontario, Canada';

// หรือใช้ createTextNode (เก่า)
const textNode = document.createTextNode('ABC Inc, P 120, Ontario, Canada');
address.appendChild(textNode);

// เพิ่มลงในหน้าเว็บ
document.body.appendChild(address);

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    address { 
      font-style: normal; 
      background: #f5f5f5; 
      border-left: 4px solid #317EFB; 
      padding: 1rem; 
      margin: 1rem 0; 
      border-radius: 4px;
    }
    button { 
      background: #317EFB; 
      color: white; 
      border: none; 
      padding: 0.75rem 1.5rem; 
      border-radius: 6px; 
      cursor: pointer; 
      margin-right: 0.5rem;
    }
  </style>
</head>
<body>
  <h2>HTML DOM Address Object Demo</h2>
  <p>คลิกปุ่มเพื่อสร้าง <address> element แบบไดนามิก</p>
  
  <button onclick="createAddress()">สร้าง Address</button>
  <button onclick="clearAddresses()">ล้างทั้งหมด</button>
  
  <div id="addressContainer"></div>
  
  <script>
    let addressCount = 0;
    
    function createAddress() {
      addressCount++;
      
      const address = document.createElement('address');
      address.innerHTML = `
        ที่อยู่ #${addressCount}

        บริษัท เอบีซี จำกัด (ABC Inc.)

        123 ถนนสุขุมวิท แขวงคลองเตย

        เขตคลองเตย กรุงเทพมหานคร 10110

        โทร: 02-123-4567 | อีเมล: info@abc.co.th
      `;
      
      // เพิ่ม event listener
      address.addEventListener('click', () => {
        alert('คุณคลิกที่อยู่ #' + addressCount);
      });
      
      document.getElementById('addressContainer').appendChild(address);
    }
    
    function clearAddresses() {
      document.getElementById('addressContainer').innerHTML = '';
      addressCount = 0;
    }
  </script>
</body>
</html>

ความหมายทาง Semantic ของ <address>

<address> ใช้สำหรับ **ข้อมูลติดต่อของผู้เขียน/เจ้าของเอกสาร/บทความ** ไม่ใช่ที่อยู่ทั่วไป

• ✅ ใช้สำหรับ: ข้อมูลติดต่อผู้เขียนบทความ, บริษัท, องค์กร
• ❌ ไม่ใช้สำหรับ: ที่อยู่จัดส่งสินค้า, ที่อยู่ลูกค้า, พิกัดภูมิศาสตร์

คุณสมบัติและเมธอดสำคัญ

HTMLAddressElement สืบทอดมาจาก HTMLElement จึงมีคุณสมบัติทั้งหมดของ HTMLElement รวมถึง:

• innerHTML, textContent, outerHTML
• style, classList, dataset
• addEventListener(), removeEventListener()
• appendChild(), remove(), cloneNode()

การเข้าถึง (Accessibility)

• Screen readers จะประกาศว่าเป็น "address" หรือ "contact information"
ใช้ร่วมกับ <footer> สำหรับข้อมูลติดต่อเว็บไซต์
• ควรใส่ข้อมูลที่สมบูรณ์: ชื่อ, ที่อยู่, โทร, อีเมล, เว็บไซต์