JavaScript에서 문서 내 링크의 href 속성을 찾는 방법

JavaScript는 문서 내 특정 링크의 href 속성을 가져올 수 있도록 document.links 기능을 제공합니다. 이 방법은 배열에서 특정 요소에 접근하는 방식과 완전히 동일하게 동작합니다. 참고로 document.links는 문서 안의 모든 <a> 태그(영역이 있는 <area> 태그 포함)를 담고 있는 컬렉션을 반환하며, 각 링크에는 순서대로 인덱스가 부여됩니다. 지금부터 예제를 통해 자세히 살펴보겠습니다.

예제 1

다음 예제에는 세 개의 링크가 존재합니다. document.links[2].href와 같이 사용하면 세 번째 링크의 href 값을 출력할 수 있습니다. 배열과 마찬가지로 첫 번째 링크는 0번 인덱스, 두 번째 링크는 1번 인덱스, 세 번째 링크는 2번 인덱스를 가지게 됩니다.

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
   <a href="https://www.tutorialspoint.com/java8/index.htm">Java</a><br>
   <a href="https://www.tutorialspoint.com/spring/index.htm">Spring</a>
<p id="links"></p>
<script>
   document.getElementById("links").innerHTML =
   "The href attribute is: " + document.links[2].href;
</script>
</body>
</html>

출력 결과

Javascript
Java
Spring
The href attribute is: https://www.tutorialspoint.com/spring/index.htm

위 실행 결과를 보면 인덱스 2에 해당하는 세 번째 링크인 Spring 튜토리얼 페이지의 URL이 정상적으로 출력된 것을 확인할 수 있습니다.

예제 2

다음 예제에는 두 개의 링크가 존재합니다. document.links[0].href를 사용하여 첫 번째 링크의 href 속성 값을 출력해 보겠습니다.

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
   <a href="https://www.tutorialspoint.com/java8/index.htm">Java</a>
<p id="links"></p>
<script>
   document.getElementById("links").innerHTML =
   "The href attribute is: " + document.links[0].href;
</script>
</body>
</html>

출력 결과

Javascript
Java
The href attribute is: https://www.tutorialspoint.com/javascript/index.htm

이처럼 document.links와 인덱스, 그리고 .href 속성만 조합하면 별도의 반복문 없이도 문서 내 원하는 링크의 URL을 간단하게 추출할 수 있습니다. 문서의 모든 링크를 한 번에 확인하고 싶다면 for문이나 forEach()와 함께 활용하면 더욱 편리합니다.