HTML DOM의 tHead 속성은 HTML 문서에서 테이블(table)의 <thead> 요소를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 테이블 헤더 영역에 동적으로 접근하고, 내용을 읽거나 수정할 수 있습니다.
구문(Syntax)
tHead 속성의 기본 사용 구문은 다음과 같습니다.
object.tHead
반환값은 해당 테이블의 <thead> 요소이며, 만약 테이블에 헤더 영역이 정의되어 있지 않다면 null을 반환합니다.
주요 특징
- 읽기 전용 속성으로, 테이블의 헤더 그룹 요소에 직접 접근합니다.
- tFoot(푸터), tBodies(바디 그룹), caption(캡션) 등 다른 테이블 관련 속성과 함께 사용하면 테이블 전체를 유연하게 제어할 수 있습니다.
- 모든 최신 브라우저(Chrome, Firefox, Safari, Edge, Opera)에서 지원됩니다.
예제(Example)
아래 예제는 버튼을 클릭하면 테이블의 <thead> 요소 내용을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
caption {
color: #db133a;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM Table tHead Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="get()" class="btn">Show tHead</button>
<div class="show"></div>
<script>
function get() {
var tableHeader = document.querySelector('table').tHead;
document.querySelector(".show").innerHTML = tableHeader.innerHTML;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 이름(Name)과 학번(Roll No.) 열로 구성된 테이블과 함께 “Show tHead” 버튼이 화면에 나타납니다.
버튼을 클릭하면 get() 함수가 실행되어 querySelector로 테이블을 선택한 뒤 tHead 속성으로 헤더 요소를 가져오고, 그 내부 HTML이 아래와 같이 화면에 출력됩니다.
정리
tHead 속성은 테이블의 헤더 구조를 자바스크립트로 손쉽게 다룰 수 있게 해주는 유용한 도구입니다. 동적으로 테이블 헤더를 변경하거나, 헤더 존재 여부를 검사하는 로직을 작성할 때 활용해 보세요.