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

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

ไวยากรณ์ (Syntax)

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

var heading = document.createElement("H1");

ตัวอย่าง

ตัวอย่างการสร้างหัวข้อ H1 แบบไดนามิก:

<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่างออบเจ็กต์ Heading</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ h1</p>
<button onclick="createH1()">CREATE</button>
<script>
  function createH1() {
    var h1 = document.createElement("H1");
    var text = document.createTextNode("H1 element has been created");
    h1.appendChild(text);
    document.body.appendChild(h1);
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงหัวข้อ "ตัวอย่างออบเจ็กต์ Heading" และปุ่ม "CREATE"

เมื่อคลิกปุ่ม "CREATE" จะเพิ่มหัวข้อ H1 ใหม่ที่มีข้อความ "H1 element has been created"

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

• สร้างปุ่ม "CREATE" เรียกใช้ createH1() เมื่อคลิก
• ฟังก์ชัน createH1() สร้าง <h1> ด้วย createElement("H1") เก็บใน h1
• สร้างโหนดข้อความ "H1 element has been created" ด้วย createTextNode()
• ผูกโหนดข้อความเข้ากับ h1 ด้วย appendChild()
• ต่อท้าย h1 เข้า <body>