HTML DOM Anchor protocol 속성이란?
HTML DOM의 Anchor protocol 속성은 링크(<a> 태그)의 href 속성에 포함된 URL의 프로토콜 부분을 설정하거나 반환하는 데 사용됩니다. 여기서 프로토콜이란 http, https, ftp처럼 리소스에 접근하는 방식을 정의하는 문자열을 의미합니다.
protocol 속성 설정 문법
프로토콜 값을 설정할 때는 다음과 같은 문법을 사용합니다.
anchorObj.protocol = protocol_url
위 코드에서 protocol_url은 URL에 지정할 프로토콜 값으로, http:, https:, ftp: 등을 사용할 수 있습니다.
protocol 속성 반환 문법
현재 링크의 프로토콜 값을 가져오려면 아래와 같이 작성합니다.
anchorObj.protocol
예제로 살펴보기
다음 예제는 DOM Anchor의 protocol 속성뿐만 아니라 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()">pathname 표시</button>
<button onclick="display2()">hreflang 표시</button>
<button onclick="display3()">port 표시</button>
<button onclick="display4()">protocol 표시</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;
}
function display4() {
var a = document.getElementById("mylink").protocol;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 데모 제목과 함께 'Services'라는 텍스트 링크가 화면에 나타나고, 그 아래 네 개의 버튼이 배치됩니다.
여기서 “protocol 표시” 버튼을 클릭해 보겠습니다.
버튼을 클릭하면 해당 링크의 href 값에서 프로토콜 부분인 https:가 추출되어 화면에 출력되는 것을 확인할 수 있습니다.
정리
DOM Anchor의 protocol 속성은 URL 문자열을 직접 파싱하지 않고도 프로토콜 정보를 손쉽게 읽거나 변경할 수 있는 유용한 기능입니다. pathname, port, hreflang 같은 다른 Anchor 속성들과 함께 활용하면 자바스크립트로 URL을 더욱 체계적으로 다룰 수 있습니다.