ออบเจ็กต์อ้างอิง HTML DOM เชื่อมโยงกับองค์ประกอบ HTML องค์ประกอบ ใช้เพื่ออ้างอิงถึงงานสร้างสรรค์ที่อ้างถึงและต้องรวมชื่อไว้ด้วย ไม่ว่าจะเป็นภาพวาด หนังสือ รายการทีวี ภาพยนตร์ เป็นต้น
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุอ้างอิง -
var x = document.createElement("CITE");
ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุอ้างอิง HTML DOM -
<!DOCTYPE html> <html> <body> <p>Click the below button to create a CITE element.</p> <button onclick="createCite()">CREATE</button><br><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_- _Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_- _Google_Art_Project.jpg" width="220" height="277" alt="The Starry night"> <script> function createCite() { var x = document.createElement("CITE"); var t = document.createTextNode("The Starry night."); x.appendChild(t); document.body.appendChild(x); } </script> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิก “สร้าง” –
ในตัวอย่างข้างต้น เราได้แทรกรูปภาพโดยใช้แท็ก -
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">
เราได้สร้างปุ่ม CREATE เพื่อรันเมธอด createCite() -
<button onclick="createCite()">CREATE</button>
createCite() วิธีการสร้าง องค์ประกอบและกำหนดให้กับตัวแปร x โหนดข้อความที่มีข้อความบางส่วนถูกสร้างขึ้นและกำหนดให้กับตัวแปร t จากนั้นโหนดข้อความจะถูกผนวกเข้ากับองค์ประกอบ โดยใช้วิธี appendChild() บนตัวแปร x จากนั้นองค์ประกอบ พร้อมกับโหนดข้อความจะถูกผนวกเข้ากับเนื้อหาเอกสารโดยใช้เมธอด appendChild() บนเนื้อหาของเอกสาร