HTML DOM 앵커 href 속성이란?
HTML DOM의 앵커(Anchor) href 속성은 링크 요소의 href 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 읽으면 해당 링크가 가리키는 URL을 문자열 형태로 얻을 수 있습니다.
href 속성 설정 문법
앵커 요소의 href 속성에 새로운 URL을 설정하는 기본 문법은 다음과 같습니다.
anchorObj.href = URL
여기서 URL은 링크가 연결될 주소를 의미하며, 다음 세 가지 형태를 사용할 수 있습니다.
- 절대 경로(Absolute URL): https:// 또는 https://로 시작하는 전체 주소
- 상대 경로(Relative URL): 현재 페이지를 기준으로 한 상대적 주소
- 앵커 링크: 해시(#)를 포함하여 페이지 내 특정 위치를 가리키는 주소
href 속성 반환 문법
현재 설정된 href 값을 가져오려면 아래와 같이 작성합니다.
anchorObj.href
실습 예제: href, host, hostname 속성 비교
다음 예제는 DOM 앵커 href 속성을 실제로 구현한 코드입니다. 버튼을 클릭하면 각각 전체 URL(href), 호스트(host), 호스트명(hostname)이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" href="https://www.abc.com:6064/abc/def.html#myteam">Our Team</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display href Part</button>
<button onclick="display2()">Display Host Part</button>
<button onclick="display3()">Display Hostname</button>
<script>
function display() {
var a = document.getElementById("mylink").href;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").host;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hostname;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
페이지를 실행하면 'Our Team'이라는 링크와 세 개의 버튼이 표시됩니다.
여기서 'Display href Part' 버튼을 클릭하면 아래 화면과 같이 링크의 전체 URL이 출력됩니다.
속성별 차이점 정리
- href: 프로토콜, 포트, 경로, 해시를 포함한 전체 URL을 반환합니다. 예: https://www.abc.com:6064/abc/def.html#myteam
- host: 포트 번호를 포함한 호스트 정보를 반환합니다. 예: www.abc.com:6064
- hostname: 포트 번호를 제외한 도메인 이름만 반환합니다. 예: www.abc.com
이처럼 href 속성은 자바스크립트에서 링크의 URL을 동적으로 확인하거나 변경해야 할 때 매우 유용하게 활용됩니다.