HTML DOM의 activeElement 속성은 읽기 전용(read-only) 속성으로, 현재 문서에서 포커스(focus)가 있는 요소를 반환합니다. 사용자가 입력 필드를 클릭하거나 Tab 키로 이동했을 때, 어떤 요소가 활성 상태인지 쉽게 파악할 수 있어 폼 검증이나 키보드 접근성 구현에 유용하게 활용됩니다.
문법(Syntax)
document.activeElement
별도의 매개변수 없이 호출하며, 반환값은 현재 포커스된 HTML 요소 객체입니다. 만약 아무 요소도 포커스되어 있지 않다면 <body> 요소가 기본적으로 반환됩니다.
예제 코드
아래 예제는 페이지를 클릭할 때마다 현재 활성화된(active) 요소의 태그 이름을 화면에 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body onclick="display()">
<h2>Heading Two</h2>
<p>요소를 클릭하면 현재 활성화된 요소를 확인할 수 있습니다.</p>
<input type="text" value="Enter text...">
<p id="myid"></p>
<script>
function display() {
var a = document.activeElement.tagName;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
페이지를 처음 열었을 때는 별도로 포커스된 요소가 없으므로, 클릭 시 BODY 태그가 출력됩니다.
이제 입력 필드(input)를 클릭해 보세요. 포커스가 입력 요소로 이동하면서 다음과 같이 INPUT 태그 이름이 표시되는 것을 확인할 수 있습니다.
활용 팁
activeElement 속성은 다음과 같은 상황에서 특히 유용합니다.
- 폼 유효성 검사: 사용자가 어느 입력 필드에 머물러 있는지 확인하여 실시간 피드백 제공
- 키보드 내비게이션: Tab 키 이동 시 현재 위치한 요소 추적 및 스타일 강조
- 접근성 향상: 스크린 리더 사용자를 위해 현재 포커스 위치 안내
또한 특정 요소에 프로그래밍 방식으로 포커스를 주고 싶다면 element.focus() 메서드를 함께 사용하면 됩니다.