HTML DOM Location hash 속성 – URL 앵커(#) 부분 읽고 설정하는 방법

JavaScript의 Location hash 속성은 현재 URL에서 앵커(anchor) 부분, 즉 '#' 뒤에 붙는 문자열을 반환하거나 새로 설정할 수 있습니다. 값을 설정하면 '#' 기호가 자동으로 접두사로 붙어 URL 끝에 추가되며, 페이지 전체를 다시 불러오지 않고도 해당 앵커 위치로 이동할 수 있습니다.

문법(Syntax)

다음은 hash 속성의 기본 문법입니다.

hash 속성 값 반환하기

location.hash

hash 속성 값 설정하기

location.hash = '문자열'

예제(Example)

Location hash 속성이 실제로 어떻게 동작하는지 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Location hash</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-hash</legend>
<label for="urlSelect">Current URL:</label>
<input type="url" size="27" id="urlSelect" value="https://www.example.com/">
<input type="text" id="textSelect" placeholder="hash value...">
<input type="button" onclick="setHashValue()" value="Go To URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var urlSelect = document.getElementById("urlSelect");
   var textSelect = document.getElementById("textSelect");
   function setHashValue() {
      if(textSelect.value !== ''){
         location.hash = textSelect.value;
         urlSelect.value += location.hash;
         divDisplay.textContent = 'Page loaded. Current URL active';
      } else {
         divDisplay.textContent = 'Please provide a hash value';
      }
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

'Go To URL' 버튼을 클릭하기 전 −

HTML DOM Location hash 속성 – URL 앵커(#) 부분 읽고 설정하는 방법

해시 값을 입력한 상태에서 'Go To URL' 버튼을 클릭한 후 −

HTML DOM Location hash 속성 – URL 앵커(#) 부분 읽고 설정하는 방법

참고 사항

location.hash 값을 변경하면 페이지가 완전히 새로 로드되는 것이 아니라 해당 앵커 지점으로만 이동합니다. 이러한 특성 때문에 SPA(싱글 페이지 애플리케이션)에서 해시 기반 라우팅을 구현할 때도 활용됩니다. 또한 해시 값이 없는 URL에서 이 속성을 읽으면 빈 문자열('')이 반환됩니다.