ออบเจ็กต์ส่วนหัว HTML DOM เชื่อมโยงกับองค์ประกอบ HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุส่วนหัว -
var p = document.createElement("HEADER"); ตัวอย่าง
ให้เราดูตัวอย่างสำหรับวัตถุส่วนหัว HTML DOM -
<!DOCTYPE html>
<html>
<body>
<h1>Header object example</h1>
<p>Create a header element by clicking the below button</p>
<button onclick="headerCreate()">CREATE</button>
<script>
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
เราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createHeader() เมื่อผู้ใช้คลิก -
<button onclick="headerCreate()">CREATE</button>
เมธอด headerCreate() สร้างองค์ประกอบส่วนหัวโดยใช้เมธอด createElement() บนออบเจ็กต์เอกสารและกำหนดให้กับตัวแปร h จากนั้นเรียกใช้เมธอด appendChild() บนเนื้อหาเอกสารเพื่อผนวกส่วนหัวเป็นลูกไปยังเนื้อหาเอกสาร โดยใช้วิธีการเดียวกันข้างต้น เราสร้างองค์ประกอบ
และโหนดข้อความโดยใช้เมธอด createTextNode() ของอ็อบเจ็กต์เอกสาร
โหนดข้อความถูกผนวกเข้ากับองค์ประกอบ
โดยใช้วิธี appendChild() ในที่สุด องค์ประกอบพร้อมกับโหนดข้อความจะถูกผนวกเป็นลูกขององค์ประกอบส่วนหัวโดยใช้วิธีการ appendChild() - function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
} 