HTML DOM의 Anchor hostname 속성은 URL에서 호스트명(hostname)만 추출하여 반환합니다. 쉽게 말해 포트 번호가 제외된 순수한 도메인 이름을 반환하는 속성입니다.
hostname 속성 설정 문법
hostname 속성에 새로운 값을 설정할 때는 다음과 같은 문법을 사용합니다.
anchorObj.hostname = hostname
여기서 hostname은 설정하고자 하는 URL의 호스트명을 의미합니다.
hostname 속성 반환 문법
반대로 hostname 속성의 값을 읽어올 때는 아래와 같이 작성합니다.
anchorObj.hostname
예제
이제 DOM Anchor hostname 속성을 실제로 구현한 예제를 살펴보겠습니다. 이 예제에서는 hash, host, hostname 세 가지 속성의 차이를 버튼 클릭을 통해 비교해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" href="https://www.demo.com:6064/abc/def.html#myteam">Our Team</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display Anchor Part</button>
<button onclick="display2()">Display Host Part</button>
<button onclick="display3()">Display Hostname</button>
<script>
function display() {
var a = document.getElementById("mylink").hash;
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>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 "Display Hostname" 버튼을 클릭하면 해당 링크의 호스트명이 화면에 표시됩니다.
참고로 위 예제에서 각 속성의 반환 값은 다음과 같습니다. hash는 "#myteam", host는 "www.demo.com:6064"처럼 포트 번호까지 포함되며, hostname은 "www.demo.com"처럼 도메인 이름만 반환됩니다.