Đối tượng HTML DOM Caption

Đối tượng HTML DOM Caption liên kết với phần tử HTML <caption>. Phần tử <caption> được dùng để đặt chú thích (tiêu đề) cho bảng và nên là con đầu tiên của bảng. Bạn có thể truy cập phần tử caption bằng đối tượng caption.

Thuộc tính

Lưu ý: Các thuộc tính dưới đây không được hỗ trợ trong HTML5.

Sau đây là thuộc tính của Đối tượng HTML DOM Caption:

Cú pháp

Cú pháp sau đây dùng cho:

Tạo đối tượng caption:

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

Ví dụ

Hãy xem một ví dụ cho đối tượng HTML DOM Caption:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px double black; margin-top: 14px; } </style> </head> <body> <p>Nhấn nút bên dưới để tạo caption cho bảng.</p> <button onclick="createCaption()">TẠO</button> <table id="SampleTable"> <tr> <td colspan="2" rowspan="2">BẢNG</td> </tr> <tr> <td>Giá trị 1</td> <td>Giá trị 2</td> </tr> </table> <script> function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("CHÚ THÍCH BẢNG"); x.appendChild(t); var table = document.getElementById("SampleTable"); table.insertBefore(x, table.childNodes[0]); } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút TẠO:

Trong ví dụ trên:

Chúng ta đã tạo nút TẠO để thực thi phương thức createCaption() khi nhấp:

<button onclick="createCaption()">TẠO</button>

Phương thức createCaption() tạo một phần tử caption bằng phương thức createElement() của đối tượng document và gán nó cho biến x. Sau đó nó tạo một nút văn bản với văn bản "CHÚ THÍCH BẢNG". Chúng ta sau đó nối nút văn bản vào phần tử.

Cuối cùng, chúng ta lấy phần tử <table> bằng id "SampleTable" và sử dụng phương thức insertBefore() chèn caption cùng với nút văn bản làm con đầu tiên của bảng. <caption> chỉ có thể là con đầu tiên của bảng:

function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("CHÚ THÍCH BẢNG"); x.appendChild(t); var table = document.getElementById("SampleTable"); table.insertBefore(x, table.childNodes[0]); }