HTML DOM 앵커(Anchor) 객체 완벽 정리 – 개념부터 실전 예제까지

HTML에서 하이퍼링크를 생성할 때는 <a> 요소를 사용하며, 링크의 목적지 URL은 href 속성으로 지정합니다. 자바스크립트의 DOM(Document Object Model)에서는 이 <a> 요소를 앵커(Anchor) 객체로 표현합니다.

앵커 객체를 활용하면 문서 내의 링크에 동적으로 접근하여 href, target, id 등 다양한 속성 값을 읽거나 수정할 수 있습니다. 대표적인 속성은 다음과 같습니다.

href – 링크의 전체 URL 주소
target – 링크가 열리는 방식(_blank, _self 등)
hostname / pathname – URL의 호스트명과 경로
id – 앵커 요소의 고유 식별자

앵커 객체 접근 예제

아래 예제는 document.getElementById() 메서드로 특정 앵커 객체에 접근한 뒤, 버튼을 클릭하면 해당 링크의 href 속성 값을 화면에 출력하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<a href="https://google.com" id = "myid" >Google</a><br><br>
<button onclick="display()">Display the link</button>
<p id="demo">Link gets displayed here</p>
<script>
    function display() {
        var a = document.getElementById("myid").href;
        document.getElementById("demo").innerHTML = a;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하고 [Display the link] 버튼을 클릭하면, 아래 그림처럼 앵커 요소의 href 값인 https://google.com/이 화면에 출력됩니다.

HTML DOM 앵커(Anchor) 객체 완벽 정리 – 개념부터 실전 예제까지

정리

HTML DOM의 앵커 객체는 웹 페이지 내 모든 하이퍼링크를 프로그래밍 방식으로 제어할 수 있게 해주는 핵심 도구입니다. getElementById()나 document.links 컬렉션을 통해 앵커 객체에 접근하면, 링크 주소 조회·변경뿐 아니라 동적으로 새로운 링크를 생성하는 것도 가능합니다.