JavaScript에서는 링크를 나타내는 앵커(<a>) 요소의 href 속성과 target 속성에 쉽게 접근할 수 있습니다. 링크는 보통 <p> 태그 안에 배치되며, 그 내부의 앵커 태그가 실제 목적지 URL(href)과 문서가 열리는 위치(target) 정보를 담고 있습니다. 먼저 document.getElementById() 등으로 해당 요소를 선택한 뒤 각 속성을 읽어오면 되는데, 아래에서 하나씩 자세히 살펴보겠습니다.
href 속성 찾기
링크의 href 속성 값을 가져오려면 대상 <a> 요소를 선택한 후 .href 속성을 참조하면 됩니다. 다음 예제에서는 href 속성에 "https://www.tutorialspoint.com/"이라는 주소가 설정되어 있으며, 프로그램을 실행하면 이 값이 화면에 그대로 출력됩니다.
예제
<html>
<body>
<p><a id="myId" href="https://www.tutorialspoint.com/">tutorialspoint</a></p>
<script>
var ref = document.getElementById("myId").href;
document.write(ref);
</script>
</body>
</html>
출력 결과
tutorialspoint
https://www.tutorialspoint.com/
target 속성 찾기
target 속성은 링크를 클릭했을 때 문서가 어디에서 열릴지를 지정하는 역할을 합니다. 이 값을 확인하려면 마찬가지로 해당 <a> 요소를 선택한 후 .target 속성을 참조하면 됩니다. 참고로 실무에서 널리 쓰이는 값으로는 새 탭에서 링크를 여는 "_blank", 현재 창에서 여는 "_self" 등이 있습니다. 다음 예제에서는 target 속성에 설정된 값이 실행 결과로 그대로 출력됩니다.
예제
<html>
<body>
<p><a id="myId" target="_union" href="https://www.tutorialspoint.com/">tutorialspoint</a></p>
<script>
var ref = document.getElementById("myId").target;
document.write(ref);
</script>
</body>
</html>
출력 결과
tutorialspoint
_union