HTML DOM Parameter Object - จัดการ param element สำหรับ object/plugin

วัตถุ HTMLParamElement แทนแท็ก <param> ซึ่งใช้กำหนด **พารามิเตอร์สำหรับ plugins/embedded content** ภายใน <object> (เช่น Flash, Java Applets, PDF viewers)

การสร้าง param element

// สร้าง param element
const param = document.createElement('PARAM'); // หรือ 'param'

// ตั้งค่า attributes
param.name = "parameterName";
param.value = "parameterValue";

// เพิ่มเข้า object element
objectElement.appendChild(param);

คุณสมบัติของ param object

ตัวอย่างการใช้งาน (เพื่อการศึกษา/legacy)

<!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; }
    .btn { 
      background: #0197F6; 
      color: white; 
      border: none; 
      padding: 12px 24px; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      width: 60%; max-width: 300px;
      display: block;
      margin: 2rem auto;
    }
  </style>
</head>
<body>
  <h1>DOM Parameter Object Demo (Legacy)</h1>
  <p>ตัวอย่างสร้าง <param> สำหรับ <object> (Flash/Java - ล้าสมัย)</p>
  
  <button class="btn" onclick="createParam()">สร้าง Param Element</button>
  
  <div id="output" style="margin-top: 2rem; font-family: monospace; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; background: #f5f5f5; padding: 1rem; border-radius: 8px;"></div>
  
  <script>
    function createParam() {
      // สร้าง object element
      const objectEl = document.createElement('object');
      objectEl.setAttribute('data', 'https://example.com/legacy-content.swf');
      objectEl.setAttribute('type', 'application/x-shockwave-flash');
      objectEl.setAttribute('width', '400');
      objectEl.setAttribute('height', '300');
      objectEl.setAttribute('class', 'legacy-object');
      objectEl.style.border = '2px dashed #999';
      objectEl.style.margin = '1rem auto';
      objectEl.style.display = 'block';
      
      // สร้าง param elements
      const params = [
        { name: 'movie', value: 'https://example.com/legacy-content.swf' },
        { name: 'quality', value: 'high' },
        { name: 'bgcolor', value: '#ffffff' },
        { name: 'allowScriptAccess', value: 'sameDomain' },
        { name: 'autoplay', value: 'true' }
      ];
      
      params.forEach(p => {
        const param = document.createElement('param');
        param.name = p.name;
        param.value = p.value;
        objectEl.appendChild(param);
      });
      
      // เพิ่ม fallback
      const fallback = document.createElement('p');
      fallback.textContent = 'Plugin not supported. This is legacy content.';
      objectEl.appendChild(fallback);
      
      document.body.appendChild(objectEl);
      
      // แสดงโค้ดที่สร้าง
      document.getElementById('output').textContent = 
        objectEl.outerHTML.replace(//g, '>');
    }
  </script>
</body>
</html>

การใช้งานสมัยใหม่ (Modern Alternatives)

แทน <object> + <param> ควรใช้:

สรุป

• HTMLParamElement มีคุณสมบัติหลัก 2 ตัว: name และ value
• ใช้ร่วมกับ <object> สำหรับ plugins แบบเก่า
• ในปัจจุบัน ควรใช้แท็ก semantic เฉพาะเจาะจงแทน
• หากต้องรองรับระบบเก่า อาจยังพบโค้ดนี้ได้