ออบเจ็กต์ Figure ใน HTML DOM

ออบเจ็กต์ Figure ใน HTML DOM ใช้แทนองค์ประกอบ HTML <figure> สามารถสร้างและเข้าถึง figure element แบบไดนามิกได้

ไวยากรณ์ (Syntax)

การสร้างออบเจ็กต์ Figure:

var figure = document.createElement("FIGURE");

ตัวอย่าง

ตัวอย่างการสร้าง figure พร้อมรูปภาพภายใน:

<!DOCTYPE html>
<html>
<head>
<script>
  function createFigure() {
    var fig = document.createElement("FIGURE");
    fig.setAttribute("id", "Figure1");
    document.body.appendChild(fig);
    
    var img = document.createElement("IMG");
    img.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
    img.setAttribute("width", "250");
    img.setAttribute("height", "200");
    img.setAttribute("alt", "Eiffel Tower");
    fig.appendChild(img);
  }
</script>
</head>
<body>
<h2>HTML DOM Figure Object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"

เมื่อคลิกปุ่ม "CREATE" จะแสดงรูปภาพ (logo Servlets) ขนาด 250x200 ภายใน figure element

คำอธิบายโค้ด

• สร้างปุ่ม "CREATE" เรียกใช้ createFigure() เมื่อคลิก
• ฟังก์ชัน createFigure() สร้าง <figure> ตั้ง id="Figure1" แล้วต่อท้าย <body>
• สร้าง <img> ตั้งค่า src, width, height, alt ด้วย setAttribute()
• ผูก img เข้า figure ด้วย appendChild()
• <figure> ใช้ห่อเนื้อหาแบบ self-contained เช่น รูปภาพ, แผนภาพ, โค้ด ตามด้วย <figcaption>