HTML DOM Anchor hash 속성이란?
HTML DOM의 Anchor hash 속성은 href 속성 값 중 앵커(anchor) 부분을 설정하거나 반환하는 데 사용됩니다. 여기서 말하는 앵커 부분이란 URL에서 # 기호 뒤에 오는 문자열을 의미합니다.
예를 들어 https://www.demo.com/abc/def.html#myteam이라는 URL이 있다면, #myteam이 바로 해당 링크의 앵커 부분입니다.
hash 속성 설정 문법
앵커 부분을 새로 지정하려면 다음과 같이 작성합니다.
anchorObject.hash = anchor_part
위 코드에서 anchor_part는 설정하려는 URL의 앵커 부분입니다.
hash 속성 반환 문법
현재 링크의 앵커 부분을 가져오려면 다음과 같이 작성합니다.
anchorObject.hash
예제
다음은 DOM Anchor hash 속성을 실제로 구현한 예제입니다. 버튼을 클릭하면 링크의 앵커 부분이 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" href="https://www.demo.com/abc/def.html#myteam">Our Team</a></p>
<p>Get the anchor part...</p>
<h2 id="myid"></h2>
<button onclick="display()">Display Anchor Part</button>
<script>
function display() {
var a = document.getElementById("mylink").hash;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
페이지가 처음 로드되면 아래와 같이 버튼과 링크가 표시됩니다.
이제 Display Anchor Part 버튼을 클릭해 보세요. 클릭하는 순간 display() 함수가 실행되어 링크의 앵커 부분인 #myteam이 화면에 나타납니다.
함께 알아두면 좋은 관련 속성
Anchor 객체에는 hash 외에도 URL의 각 구성 요소를 다룰 수 있는 유용한 속성들이 있습니다.
- host – 호스트명과 포트 번호를 반환합니다.
- hostname – 호스트명만 반환합니다.
- href – 전체 URL을 반환하거나 설정합니다.
- pathname – 경로(path) 부분을 반환합니다.
- port – 포트 번호를 반환합니다.
- protocol – 프로토콜(http:, https: 등)을 반환합니다.
- search – 쿼리 문자열(? 뒤의 부분)을 반환합니다.
이처럼 hash 속성을 활용하면 페이지 내 특정 위치로 이동하는 링크나 SPA(싱글 페이지 애플리케이션)의 해시 기반 라우팅 처리 등을 손쉽게 구현할 수 있습니다.