HTML DOM의 tagName 속성은 HTML 문서 내에서 특정 HTML 요소의 태그 이름(tag name)을 문자열로 반환합니다. 이 속성은 읽기 전용(read-only)이며, JavaScript에서 현재 다루고 있는 요소가 어떤 종류의 태그인지 확인할 때 매우 유용하게 사용됩니다.
구문
tagName 속성의 기본 구문은 다음과 같습니다.
element.tagName
참고로 HTML 문서에서는 반환되는 태그 이름이 항상 대문자로 표시됩니다(예: DIV, BUTTON). 반면 XML 문서에서는 원본 문서에 작성된 그대로의 대소문자가 유지된다는 점을 기억해 두세요.
예제
버튼을 클릭하면 해당 버튼의 태그 이름을 화면에 출력하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML DOM tagName 속성 데모</h1>
<button class="btn" onclick="display()">클릭하여 태그 이름 확인하기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '태그 이름: ' + document.querySelector('button').tagName;
}
</script>
</body>
</html>
실행 결과
위 화면에서 “클릭하여 태그 이름 확인하기” 버튼을 클릭해 보세요.
버튼을 클릭하면 빨간색 버튼의 태그 이름인 BUTTON이 화면에 표시됩니다. 이처럼 tagName 속성을 활용하면 스크립트 실행 중에도 요소의 종류를 손쉽게 파악할 수 있어, 조건 분기나 동적 처리 로직을 작성할 때 큰 도움이 됩니다.