현재 열려 있는 웹 문서의 제목(Title)을 확인하고 싶다면 JavaScript에서 기본으로 제공하는 title 속성을 사용하면 됩니다. document.title은 HTML 문서의 <head> 영역에 있는 <title> 태그에 설정된 텍스트를 문자열 그대로 반환해 주기 때문에, 별도의 복잡한 처리 없이 한 줄의 코드로 제목을 읽어올 수 있습니다.
예제 코드
아래 예제를 실행하면 문서의 제목을 가져와서 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
var str = document.title;
document.write("Title: "+str);
</script>
</body>
</html>코드 설명
document.title: 현재 문서의<title>태그 내용을 문자열로 반환하는 속성입니다. 위 예제에서는 "JavaScript Example"이라는 값이 반환됩니다.document.write(): 가져온 제목을Title:이라는 접두사와 함께 화면에 출력하는 메서드입니다.
참고: 문서 제목을 동적으로 변경하기
title 속성은 단순히 값을 읽어오는 것뿐만 아니라, 새로운 문자열을 할당하여 문서 제목을 실시간으로 변경할 수도 있습니다.
document.title = "변경된 새로운 제목";
이렇게 하면 브라우저 탭과 즐겨찾기에 표시되는 제목이 즉시 업데이트됩니다. 이 기능을 활용하면 알림 표시나 사용자 행동에 따라 탭 제목을 바꾸는 등 다양한 인터랙션을 구현할 수 있습니다.