HTML DOM setAttributeNode() Method - ตั้งค่า attribute node ให้ element

เมธอด setAttributeNode() ของ Element ใช้ **เพิ่มหรือแทนที่ attribute node** ให้กับองค์ประกอบโดยตรง คล้าย setNamedItem() แต่เรียกผ่าน element แทน attributes collection

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

// สร้าง attribute node
const attr = document.createAttribute('attribute-name');
attr.value = 'attribute-value';

// ตั้งค่าให้ element
const replacedAttr = element.setAttributeNode(attr);
// คืนค่า Attr node เดิมที่ถูกแทนที่ (ถ้ามี) หรือ null

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; text-align: center; 
           background: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 100%); 
           min-height: 100vh; color: #333; }
    h1 { color: #23CE6B; }
    p { 
      background: #fff; 
      padding: 1.5rem; 
      border-radius: 12px; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      max-width: 600px;
      margin: 2rem auto;
      font-size: 1.1rem;
      transition: all 0.3s ease;
    }
    .btn { 
      background: #0197F6; 
      color: white; 
      border: none; 
      padding: 12px 24px; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      font-size: 1rem;
    }
    .btn:hover { background: #0077cc; transform: translateY(-2px); }
    .code { background: #f5f5f5; padding: 1rem; border-radius: 8px; text-align: left; font-family: monospace; font-size: 0.9rem; margin: 1rem auto; max-width: 600px; }
  </style>
</head>
<body>
  <h1>DOM setAttributeNode() Method Demo</h1>
  
  <p id="targetPara">ย่อหน้านี้จะได้รับ style attribute ใหม่เมื่อกดปุ่ม</p>
  
  <button class="btn" onclick="setStyleAttribute()">
    ตั้งค่า style attribute ด้วย setAttributeNode()
  </button>
  
  <div class="code" id="codeDisplay">คลิกปุ่มด้านบนเพื่อดูโค้ดที่รัน</div>
  
  <script>
    function setStyleAttribute() {
      const para = document.getElementById('targetPara');
      const codeDisplay = document.getElementById('codeDisplay');
      
      // สร้าง attribute node
      const styleAttr = document.createAttribute('style');
      styleAttr.value = 'color: #db133a; font-size: 1.5rem; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);';
      
      // แสดงโค้ด
      codeDisplay.innerHTML = `
        const attr = document.createAttribute('style');
        attr.value = '${styleAttr.value}';
        element.setAttributeNode(attr);
      `;
      
      // ใช้ setAttributeNode (บน element โดยตรง)
      const replaced = para.setAttributeNode(styleAttr);
      
      if (replaced) {
        log('แทนที่ attribute เดิม: ' + replaced.name);
      } else {
        log('เพิ่ม attribute ใหม่');
      }
    }
    
    function log(msg) {
      console.log(msg);
    }
  </script>
</body>
</html>

setAttributeNode vs setAttribute vs setNamedItem

ตัวอย่างขั้นสูง: จัดการ Attribute Nodes

<script>
  const el = document.createElement('div');
  
  // 1. สร้างและเพิ่ม attributes
  const idAttr = document.createAttribute('id');
  idAttr.value = 'my-element';
  el.setAttributeNode(idAttr);
  
  const classAttr = document.createAttribute('class');
  classAttr.value = 'container main';
  el.setAttributeNode(classAttr);
  
  // 2. อ่าน attribute node
  const retrievedId = el.attributes.getNamedItem('id');
  console.log('ID attribute node:', retrievedId); // Attr { name: "id", value: "my-element" }
  
  // 3. แทนที่ attribute
  const newClassAttr = document.createAttribute('class');
  newClassAttr.value = 'container updated';
  const oldClassAttr = el.setAttributeNode(newClassAttr);
  console.log('Old class value:', oldClassAttr.value); // "container main"
  
  // 4. ลบ attribute
  const removed = el.attributes.removeNamedItem('id');
  console.log('Removed:', removed.name, removed.value);
  
  // 5. ตรวจสอบผลลัพธ์
  console.log('Final element:', el.outerHTML);
  // 

</script>

Attr Node Object (คุณสมบัติ)

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