JavaScript HTML DOM은 HTML 데이터에 접근하고 조작할 수 있는 다양한 기본 메서드를 제공합니다. 그중에서도 현재 문서의 제목(title)과 URL 정보가 필요할 때는 각각 document.title과 document.URL 속성을 사용하면 됩니다.
이 두 속성은 별도의 매개변수나 복잡한 설정 없이 즉시 값을 반환하기 때문에, 디버깅이나 동적 UI 구성 시 매우 유용하게 활용됩니다. 아래에서 하나씩 자세히 살펴보겠습니다.
문서의 제목 가져오기 – document.title
현재 HTML 문서의 제목(<title> 태그에 정의된 텍스트)을 가져오려면 document.title 속성을 사용합니다. 이 속성은 브라우저 탭에 표시되는 제목 문자열을 그대로 반환합니다.
다음 예제에서는 문서의 제목을 읽어와 화면에 출력합니다.
예제 코드
<html>
<head>
<title>Tutorix</title>
</head>
<body>
<script>
document.write("문서의 제목은 " + " " + document.title + " 입니다.");
</script>
</body>
</html>
실행 결과
문서의 제목은 Tutorix 입니다.
<head> 영역의 <title> 태그에 설정된 값이 그대로 출력되는 것을 확인할 수 있습니다. 참고로 document.title은 읽기뿐만 아니라 값을 할당하여 제목을 동적으로 변경하는 것도 가능합니다.
문서의 URL 가져오기 – document.URL
현재 문서의 전체 URL 주소를 얻으려면 document.URL 속성을 사용합니다. 이 속성은 프로토콜(https://)부터 경로까지 페이지의 전체 주소를 문자열 형태로 반환합니다.
다음 예제에서는 현재 문서의 URL을 읽어와 화면에 출력합니다.
예제 코드
<html>
<body>
<script>
document.write("문서의 URL은: " + " " + document.URL)
</script>
</body>
</html>
실행 결과
문서의 URL은: https://www.tutorialspoint.com/cg/assets/ovPEzF.php
이처럼 document.URL을 활용하면 현재 페이지가 어떤 주소에서 실행되고 있는지 쉽게 파악할 수 있어, 조건 분기나 로깅 처리 등에 폭넓게 사용됩니다.