HTML DOM Location hostname 속성 – URL의 호스트 이름 가져오기 및 설정하기

Location 객체의 hostname 속성은 현재 문서의 URL에서 호스트 이름(도메인명)을 반환하거나 새로운 값으로 설정할 수 있는 속성입니다. 이 속성은 포트 번호를 제외한 순수한 도메인 부분만 다룬다는 점이 특징입니다.

문법(Syntax)

다음은 hostname 속성의 기본적인 사용 문법입니다.

hostname 속성의 값 읽어오기

location.hostname

hostname 속성에 값 설정하기

location.hostname = hostname

예제(Example)

아래 예제는 Location hostname 속성을 활용하여 현재 URL의 호스트 이름을 화면에 출력하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Location hostname</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-hostname</legend>
<label for="urlSelect">현재 URL:</label>
<input type="url" size="27" id="urlSelect" value="https://www.example.com:2544">
<input type="button" onclick="getHostname()" value="호스트 이름 가져오기">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var urlSelect = document.getElementById("urlSelect");
    function getHostname(){
        divDisplay.textContent = 'Hostname: '+location.hostname;
    }
</script>
</body>
</html>

출력 결과(Output)

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

'호스트 이름 가져오기(Get Hostname)' 버튼을 클릭하기 전 −

HTML DOM Location hostname 속성 – URL의 호스트 이름 가져오기 및 설정하기

'호스트 이름 가져오기(Get Hostname)' 버튼을 클릭한 후 −

HTML DOM Location hostname 속성 – URL의 호스트 이름 가져오기 및 설정하기

참고 사항

hostname 속성과 유사하게 URL 정보를 다루는 속성들로는 포트 번호까지 포함하는 host 속성, 프로토콜을 반환하는 protocol 속성 등이 있습니다. 예를 들어 위 예제의 URL(https://www.example.com:2544) 기준으로 location.host는 www.example.com:2544를 반환하지만, location.hostname은 www.example.com만 반환합니다.