HTML DOM setNamedItem() Method - ตั้งค่า attribute node ด้วยชื่อ

เมธอด setNamedItem() ของ NamedNodeMap (คอลเลกชัน attributes ของ element) ใช้ **เพิ่มหรือแทนที่ attribute node** โดยใช้ชื่อของ attribute เป็น key

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

// attributeMap คือ element.attributes (NamedNodeMap)
const attrNode = document.createAttribute('attribute-name');
attrNode.value = 'attribute-value';

element.attributes.setNamedItem(attrNode);
// คืนค่า attribute 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 setNamedItem() Method Demo</h1>
  
  <p id="targetPara">ย่อหน้านี้จะได้รับ style attribute ใหม่เมื่อกดปุ่ม</p>
  
  <button class="btn" onclick="setStyleAttribute()">
    ตั้งค่า style attribute ด้วย setNamedItem()
  </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.attributes.setNamedItem(attr);
      `;
      
      // ใช้ setNamedItem
      const replaced = para.attributes.setNamedItem(styleAttr);
      
      if (replaced) {
        log('แทนที่ attribute เดิม: ' + replaced.name);
      } else {
        log('เพิ่ม attribute ใหม่');
      }
    }
    
    function log(msg) {
      console.log(msg);
    }
  </script>
</body>
</html>

setNamedItem vs setAttribute

เมื่อไหร่ควรใช้ setNamedItem

• ต้องการ **attribute node object** เพื่อนำไปใช้ต่อ (เช่น clone, move ระหว่าง elements)
• ทำงานกับ **XML namespaces** (ใช้ setNamedItemNS)
• ต้องการทราบ attribute เก่าที่ถูกแทนที่
• Generic DOM manipulation libraries

ตัวอย่างขั้นสูง: Clone attributes ระหว่าง elements

<script>
  function copyAttributes(source, target) {
    // คัดลอก attributes ทั้งหมด
    const attrs = source.attributes;
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      // cloneNode(true) เพื่อคัดลอก attribute node ทั้งหมด
      target.attributes.setNamedItem(attr.cloneNode(true));
    }
  }
  
  // ใช้งาน
  const source = document.getElementById('styled-element');
  const target = document.createElement('div');
  copyAttributes(source, target);
  // target มี attributes เหมือน source ทุกประการ
</script>

เมธอดที่เกี่ยวข้องของ NamedNodeMap

• getNamedItem(name) - หา attribute node ตามชื่อ
• removeNamedItem(name) - ลบ attribute node
• item(index) - เข้าถึงด้วย index
• length - จำนวน attributes