HTML DOM Location pathname 속성 – URL 경로명 가져오기와 설정하기

HTML DOM의 Location pathname 속성은 현재 문서 URL에서 경로명(pathname)에 해당하는 문자열을 반환하거나 설정하는 데 사용됩니다. 예를 들어 https://www.example.com/aboutUs/CTO.htm이라는 URL이 있다면, pathname 속성은 도메인 뒤에 오는 /aboutUs/CTO.htm 부분을 나타냅니다.

구문

pathname 속성의 기본적인 사용 구문은 다음과 같습니다.

1. pathname 값 반환하기

location.pathname

2. pathname 값 설정하기

location.pathname = pathOfHost

예제

다음은 Location pathname 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 현재 페이지의 경로명이 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Location pathname</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-pathname</legend>
<label for="urlSelect">현재 URL:</label>
<input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm">
<input type="button" onclick="getpathname()" value="경로명 가져오기">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var urlSelect = document.getElementById("urlSelect");
    function getpathname(){
        divDisplay.textContent = 'URL 경로명: '+location.pathname;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'경로명 가져오기' 버튼을 클릭하기 전 화면 −

HTML DOM Location pathname 속성 – URL 경로명 가져오기와 설정하기

'경로명 가져오기' 버튼을 클릭한 후 화면 −

HTML DOM Location pathname 속성 – URL 경로명 가져오기와 설정하기

정리

pathname 속성은 프로토콜(http/https), 호스트명(도메인), 포트 번호를 제외한 순수한 경로 부분만 다룹니다. 웹 애플리케이션에서 현재 페이지의 위치를 파악하거나, SPA(싱글 페이지 애플리케이션)에서 라우팅 로직을 구현할 때 매우 유용하게 활용됩니다.