HTML DOM의 앵커(Anchor) port 속성은 href 속성에 포함된 URL의 포트 번호를 설정하거나 반환하는 데 사용됩니다. 웹 페이지 내 링크(<a> 태그)의 포트 정보를 자바스크립트로 손쉽게 제어할 수 있는 유용한 기능입니다.
port 속성 설정 문법
포트 속성을 설정(SET)할 때는 다음과 같은 문법을 사용합니다.
anchorObj.port = num
여기서 num은 URL에 지정할 포트 번호를 의미합니다.
port 속성 반환 문법
반대로 포트 속성을 읽어올(GET) 때는 아래와 같이 작성합니다.
anchorObj.port
이렇게 하면 해당 앵커 객체의 href 값에서 포트 번호가 문자열 형태로 반환됩니다.
DOM 앵커 port 속성 구현 예제
이제 실제로 DOM 앵커 port 속성을 활용한 예제를 살펴보겠습니다. 아래 코드는 pathname, hreflang, port 세 가지 값을 버튼 클릭으로 각각 확인할 수 있도록 구성되어 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>데모 제목</h1>
<p><a id="mylink" hreflang="en" href="https://abc.com:6064/abc.html/#new">Services</a></p>
<h2 id="myid"></h2>
<button onclick="display1()">경로명 표시</button>
<button onclick="display2()">hreflang 표시</button>
<button onclick="display3()">포트 표시</button>
<script>
function display1() {
var a = document.getElementById("mylink").pathname;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").port;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>
실행 결과
위 예제를 실행하면 화면에 링크와 세 개의 버튼이 나타납니다. 그중 “포트 표시(Display port)” 버튼을 클릭하면 다음과 같이 URL의 포트 번호가 출력됩니다.
버튼을 클릭한 후의 결과 화면입니다. 예제 URL(https://abc.com:6064/abc.html/#new)에는 포트 번호 6064가 지정되어 있으므로, 화면에 6064가 표시됩니다.
정리
HTML DOM 앵커의 port 속성은 <a> 태그 href 값에 담긴 포트 번호를 읽거나 변경할 수 있는 간단하지만 실용적인 API입니다. URL 파싱이나 동적 링크 처리 로직을 구현할 때 pathname, hreflang 등 다른 앵커 속성들과 함께 활용하면 더욱 효과적입니다.