HTML DOM의 links 컬렉션은 문서 내에 존재하는 모든 <a> 태그와 <area> 태그에 해당하는 링크들을 목록 형태로 반환하는 기능입니다. 웹페이지 안의 하이퍼링크를 동적으로 조회하거나 관리해야 할 때 매우 유용하게 활용됩니다.
기본 구문
links 컬렉션을 가져오는 기본 문법은 다음과 같습니다.
document.links
이 코드를 실행하면 현재 문서에 포함된 모든 링크 요소들이 담긴 컬렉션이 반환됩니다.
주요 속성 및 메서드
links 컬렉션에서 사용할 수 있는 대표적인 속성과 메서드는 아래와 같습니다.
| 속성/메서드 | 설명 |
|---|---|
| length | 문서 내 <a> 및 <area> 요소의 총 개수를 반환합니다. |
| namedItem() | 지정한 id 값을 가진 <a> 또는 <area> 요소를 반환합니다. |
실습 예제: length 속성 활용하기
다음 예제는 links 컬렉션의 length 속성을 사용하여 페이지에 있는 전체 링크 수를 확인하고, 각 링크를 순서대로 출력하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Links Collection length</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
area {
border:1px solid black;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Links-Collection-length</legend>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
<input type="button" value="Get Links" onclick="getLinks()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
function getLinks(){
var links = document.links.length;
divDisplay.textContent = 'Total Links: '+links;
for (var i = 0; i < links; i++) {
divDisplay.textContent += '--> '+document.links[i]+' ';
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Get Links' 버튼을 클릭하기 전에는 Google과 Bing 두 개의 하이퍼링크만 화면에 표시됩니다.
'Get Links' 버튼을 클릭한 후에는 자바스크립트가 실행되어 전체 링크 개수와 함께 각 링크가 순차적으로 표시됩니다.
정리
document.links는 문서 내 모든 링크 요소에 접근할 수 있는 간편한 방법을 제공합니다. length로 개수를 파악하고, 인덱스 또는 namedItem()으로 특정 링크에 접근하면 링크 목록을 동적으로 제어하는 다양한 기능을 구현할 수 있습니다.