document.links 속성이란?
JavaScript에서 document.links 속성은 현재 문서에 포함된 모든 하이퍼링크의 컬렉션(HTMLCollection)을 반환합니다. 이때 가져올 수 있는 링크는 <a> 태그와 <area> 태그 중 href 속성을 가진 요소들입니다.
컬렉션의 length 속성을 활용하면 문서 전체에 몇 개의 링크가 존재하는지 손쉽게 확인할 수 있으며, 인덱스를 사용해 특정 링크 요소에 접근하는 것도 가능합니다.
기본 사용 예제
다음 코드를 실행하면 document.links 속성을 통해 문서 내 링크의 총 개수를 화면에 출력할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<p>
<a href="/java/index.htm">Java</a><br>
<a href="/php/index.htm">PHP</a><br>
<a href="/ruby/index.htm">Ruby</a><br>
<a href="/wordpress/index.htm">WordPress</a>
</p>
<script>
var num = document.links.length;
document.write("How many links? "+num);
</script>
</body>
</html>코드 설명
위 예제에서는 문서 안에 Java, PHP, Ruby, WordPress 네 개의 <a> 태그가 존재합니다. 스크립트 부분에서 document.links.length를 호출하면 이 링크들의 개수인 4가 반환되어 "How many links? 4"라는 결과가 출력됩니다.
추가 활용 팁
- 특정 링크 접근:
document.links[0]처럼 인덱스를 사용하면 첫 번째 링크 요소에 바로 접근할 수 있습니다. - href 값 확인: 각 요소의
.href속성을 읽어 링크 URL을 얻거나 수정할 수 있습니다. - 반복 처리:
for문이나forEach를 활용해 모든 링크를 순회하며 일괄 처리할 수 있습니다.
단, href 속성이 없는 <a name="..."> 형태의 앵커나 <link> 태그는 document.links 컬렉션에 포함되지 않으므로 주의해야 합니다.