HTML DOM의 앵커(Anchor) pathname 속성은 <a> 태그의 href 속성에 포함된 경로(path) 부분을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 링크 URL에서 경로 정보를 손쉽게 읽어오거나 변경할 수 있습니다.
pathname 속성 설정 문법
pathname 속성에 새로운 경로를 지정하려면 다음과 같이 작성합니다.
anchorObj.pathname = path
여기서 path는 설정하고자 하는 URL의 경로명입니다.
pathname 속성 반환 문법
현재 설정되어 있는 경로명을 가져오려면 아래와 같이 작성합니다.
anchorObj.pathname
예를 들어 href가 https://abc.com/abc.html/#new인 경우, pathname 속성은 /abc.html/을 반환합니다. 즉, 도메인과 쿼리·해시를 제외한 순수 경로 부분만 추출됩니다.
예제
다음 예제는 DOM Anchor pathname 속성을 실제로 구현한 코드입니다. 버튼을 클릭하면 링크의 경로명과 hreflang 값이 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://abc.com/abc.html/#new">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display1()">Display pathname</button>
<button onclick="display2()">Display hreflang</button>
<script>
function display1() {
var a = document.getElementById("mylink").pathname;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>
실행 결과
위 화면에서 “Display pathname” 버튼을 클릭하면 링크 URL의 경로 부분이 아래와 같이 표시됩니다.
이처럼 pathname 속성을 사용하면 별도의 문자열 파싱 없이도 앵커 요소의 URL 경로를 간편하게 확인하고 조작할 수 있습니다. 참고로 같은 방식으로 hreflang 속성을 읽어오는 display2() 함수도 함께 동작하므로, 두 버튼을 번갈아 클릭하며 결과를 비교해 보시기 바랍니다.