Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

ออบเจ็กต์ส่วนหัว HTML DOM


ออบเจ็กต์ส่วนหัว HTML DOM เชื่อมโยงกับองค์ประกอบส่วนหัว HTML ตั้งแต่

ถึง

การใช้วัตถุส่วนหัว เราสามารถสร้างและเข้าถึงองค์ประกอบส่วนหัวด้วยเมธอด createElement() และ getElementById() ตามลำดับ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การสร้างวัตถุหัวเรื่อง -

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

ตัวอย่าง

ให้เราดูตัวอย่างของวัตถุที่มุ่งหน้าไป -

<!DOCTYPE html>
<html>
<body>
<h1>Heading object example</h1>
<p>Create a h1 element by clicking the below button</p>
<button onclick="createH1()">CREATE</button>
<script>
   function createH1() {
      var h = document.createElement("H1");
      var txt = document.createTextNode("H1 element has been created");
      h.appendChild(txt);
      document.body.appendChild(h);
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ออบเจ็กต์ส่วนหัว HTML DOM

เมื่อคลิกปุ่มสร้าง -

ออบเจ็กต์ส่วนหัว HTML DOM

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด headerCreate() เมื่อผู้ใช้คลิก -

<button onclick="createH1()">CREATE</button>

CreateH1() วิธีการสร้าง

องค์ประกอบส่วนหัวโดยใช้เมธอด createElement() บนวัตถุเอกสารและกำหนดให้กับตัวแปร h จากนั้นเราสร้างโหนดข้อความโดยใช้เมธอด createTextNode() ของอ็อบเจ็กต์เอกสาร โหนดข้อความถูกผนวกเข้ากับองค์ประกอบ

โดยใช้วิธี appendChild() ในที่สุด

องค์ประกอบพร้อมกับโหนดข้อความจะถูกผนวกเป็นลูกของเนื้อหาของเอกสารโดยใช้วิธีการ appendChild() -

function createH1() {
   var h = document.createElement("H1");
   var txt = document.createTextNode("H1 element has been created");
   h.appendChild(txt);
   document.body.appendChild(h);
}