HTML DOM의 Anchor origin 속성은 <a> 태그의 href 속성 값에서 프로토콜(protocol), 호스트명(hostname), 포트 번호(port number)를 문자열로 반환합니다. 예를 들어 href 값이 “https://www.demo.com:6064/page.html”이라면, origin 속성은 https://www.demo.com:6064를 반환합니다.
이 속성은 읽기 전용(read-only)이며, URL 전체가 아닌 출처(origin) 정보만 필요할 때 유용하게 활용됩니다.
문법
anchorObj.origin
이제 DOM Anchor origin 속성을 실제로 구현한 예제를 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://www.abc.com:6064/abc/products.html">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display href Part</button>
<button onclick="display2()">Display origin</button>
<button onclick="display3()">Display hreflang</button>
<script>
function display() {
var a = document.getElementById("mylink").href;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").origin;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 하이퍼링크와 세 개의 버튼이 화면에 표시됩니다. 각 버튼은 링크의 서로 다른 속성 값을 출력하는 역할을 합니다.
여기서 “Display origin” 버튼을 클릭해 보겠습니다.
버튼을 클릭하면 href 전체 경로가 아닌, 프로토콜과 호스트명, 포트 번호만 조합된 https://www.abc.com:6064가 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 origin 속성을 사용하면 URL에서 출처 정보만 간편하게 추출할 수 있습니다.