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

ออบเจ็กต์ header ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML5 <header> ใช้สำหรับสร้างและเข้าถึงองค์ประกอบ header แบบไดนามิกด้วย createElement() และ getElementById() ตามลำดับ

ไวยากรณ์ (Syntax)

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

var header = document.createElement("HEADER");

ตัวอย่าง

ตัวอย่างการสร้าง header พร้อม h2 ภายใน:

<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่างออบเจ็กต์ header</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ header</p>
<button onclick="headerCreate()">CREATE</button>
<script>
  function headerCreate() {
    var header = document.createElement("HEADER");
    document.body.appendChild(header);
    
    var h2 = document.createElement("H2");
    var text = document.createTextNode("Header element containing a h2 element is now created");
    h2.appendChild(text);
    header.appendChild(h2);
  }
</script>
</body>
</html>

ผลลัพธ์

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

เมื่อคลิกปุ่ม "CREATE" จะสร้าง header พร้อม h2 ภายในที่มีข้อความ "Header element containing a h2 element is now created"

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

• สร้างปุ่ม "CREATE" เรียกใช้ headerCreate() เมื่อคลิก
• ฟังก์ชัน headerCreate() สร้าง <header> เก็บใน header แล้วต่อท้าย <body>
• สร้าง <h2> และโหนดข้อความ แล้วผูก h2 เข้า header
• header เป็น semantic element ของ HTML5 ใช้สำหรับหัวเรื่องของส่วนหรือหน้าเว็บ