วัตถุ HTML DOM Caption

วัตถุ HTML DOM Caption เกี่ยวข้องกับองค์ประกอบ HTML <caption> องค์ประกอบ <caption> ใช้สำหรับตั้งคำบรรยาย (หัวข้อ) ของตาราง และควรเป็นลูกแรกของตาราง คุณสามารถเข้าถึงองค์ประกอบ caption ได้โดยใช้วัตถุ caption

คุณสมบัติ

หมายเหตุ: คุณสมบัติด้านล่างไม่ได้รับการรองรับใน HTML5

คุณสมบัติของวัตถุ HTML DOM Caption ดังนี้ -

ไวยากรณ์

ไวยากรณ์สำหรับการสร้างวัตถุ caption ดังนี้ -

var x = document.createElement("CAPTION");

ตัวอย่าง

ลองดูตัวอย่างสำหรับวัตถุ HTML DOM Caption -

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px double black; margin-top: 14px; } </style> </head> <body> <p>คลิกปุ่มด้านล่างเพื่อสร้าง caption สำหรับตาราง</p> <button onclick="createCaption()">CREATE</button> <table id="SampleTable"> <tr> <td colspan="2" rowpan="2">TABLE</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> </tr> </table> <script> function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("TABLE CAPTION"); x.appendChild(t); var table = document.getElementById("SampleTable"); table.insertBefore(x, table.childNodes[0]); } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิกปุ่ม CREATE -

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

เราสร้างปุ่ม CREATE เพื่อเรียกใช้เมธอด createCaption() เมื่อคลิก -

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

เมธอด createCaption() สร้างองค์ประกอบ caption โดยใช้เมธอด createElement() ของอ็อบเจกต์เอกสารและกำหนดให้ตัวแปร x จากนั้นสร้างโหนดข้อความด้วยข้อความ "TABLE CAPTION" เราจึงผนวกโหนดข้อความกับองค์ประกอบ

สุดท้าย เราดึงองค์ประกอบ <table> โดยใช้ id "SampleTable" และใช้เมธอด insertBefore() แทรก caption พร้อมโหนดข้อความเป็นลูกแรกของตาราง <caption> สามารถเป็นลูกแรกของตารางได้เท่านั้น -

function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("TABLE CAPTION"); x.appendChild(t); var table = document.getElementById("SampleTable"); table.insertBefore(x, table.childNodes[0]); }