HTML DOM Caption 객체 – 테이블 캡션 동적으로 생성하고 조작하는 방법

HTML DOM Caption 객체는 HTML <caption> 요소와 연결된 객체입니다. <caption> 요소는 표(table)의 제목(캡션)을 지정할 때 사용하며, 반드시 <table> 요소의 첫 번째 자식으로 위치해야 한다는 점이 중요합니다. 자바스크립트에서는 Caption 객체를 통해 이 요소에 접근하고 동적으로 생성·조작할 수 있습니다.

Caption 객체의 속성

참고: 아래 속성은 HTML5에서 더 이상 지원되지 않습니다.

속성	설명
align	캡션의 정렬 방식을 설정하거나 반환합니다.

문법(Syntax)

Caption 객체를 새로 생성하는 기본 문법은 다음과 같습니다.

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

예제(Example)

버튼을 클릭하면 표에 캡션이 동적으로 추가되는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
       border: 1px double black;
       margin-top: 14px;
    }
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 표에 캡션이 생성됩니다.</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>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Caption 객체 – 테이블 캡션 동적으로 생성하고 조작하는 방법

CREATE 버튼을 클릭한 후의 결과입니다.

HTML DOM Caption 객체 – 테이블 캡션 동적으로 생성하고 조작하는 방법

예제 코드 상세 설명

먼저 클릭 시 createCaption() 함수를 실행하는 CREATE 버튼을 만들었습니다.

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

createCaption() 함수 내부에서는 다음 순서로 작업이 진행됩니다.

1. 문서 객체(document)의 createElement() 메서드를 사용해 CAPTION 요소를 생성하고 변수 x에 할당합니다.
2. createTextNode() 메서드로 "TABLE CAPTION"이라는 텍스트 노드를 생성합니다.
3. appendChild() 메서드를 사용해 텍스트 노드를 캡션 요소에 추가합니다.

마지막으로 id가 "SampleTable"인 <table> 요소를 가져온 뒤, insertBefore() 메서드를 이용해 캡션 요소를 표의 첫 번째 자식으로 삽입합니다. 앞서 언급했듯이 <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]);
}

이처럼 HTML DOM Caption 객체를 활용하면 자바스크립트만으로 표의 제목을 동적으로 추가하거나 수정할 수 있어, 데이터가 실시간으로 변경되는 웹 페이지에서 특히 유용하게 활용됩니다.