HTML DOM의 앵커 컬렉션(Anchor Collection)은 HTML 문서 내에 존재하는 모든 앵커 태그(<a>)의 집합을 반환하는 기능입니다. 다만, 이 컬렉션은 name 속성이 지정된 링크만 카운트하며, name 속성은 현재 HTML5에서는 더 이상 권장되지 않는(deprecated) 속성이라는 점에 유의해야 합니다. 컬렉션에 포함된 요소들은 HTML 소스 문서에 작성된 순서 그대로 배치됩니다.
앵커 컬렉션의 속성(Properties)
앵커 컬렉션이 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| length | HTML 문서 내에 존재하는 링크(<a>) 요소의 개수를 반환합니다. |
앵커 컬렉션의 메서드(Methods)
앵커 컬렉션에서 사용할 수 있는 메서드는 아래와 같습니다.
| 메서드 | 설명 |
|---|---|
| [index] | 지정한 인덱스 위치의 링크를 반환합니다. 인덱스는 0부터 시작하며 위에서 아래 순서로 매겨집니다. 해당 위치에 요소가 없으면 null을 반환합니다. |
| item(index) | 지정한 인덱스 위치의 링크를 반환합니다. 인덱스는 0부터 시작하며, 요소를 찾지 못하면 null을 반환합니다. |
| namedItem(id) | 컬렉션에서 지정한 id와 일치하는 링크를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. |
문법(Syntax)
앵커 컬렉션을 가져오는 기본 문법은 다음과 같습니다.
document.anchors
참고: 앵커 컬렉션은 읽기 전용(read-only)이므로 값을 직접 설정할 수 없습니다.
예제(Example)
앵커 컬렉션의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a><br>
<p>버튼을 클릭하면 위 목록에서 첫 번째 링크의 텍스트를 가져옵니다</p>
<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>
<p id="sample"></p>
<script>
function getCollection() {
var x = document.anchors[0].innerHTML;
document.getElementById("sample").innerHTML = x;
}
function getLength() {
var x = document.anchors[0].innerHTML.length;
document.getElementById("sample").innerHTML = x;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“Collection” 버튼을 클릭했을 때:
“Length” 버튼을 클릭했을 때:
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, name 속성 값이 각각 example, example1, example2로 지정된 세 개의 앵커 태그를 선언했습니다. 이처럼 name 속성이 있는 앵커만 document.anchors 컬렉션에 포함됩니다.
<a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a> <br>
다음으로, 각각 getCollection() 함수와 getLength() 함수를 실행하는 두 개의 버튼을 배치했습니다.
<button onclick="getCollection()">Collection</button> <button onclick="getLength()">Length</button>
getCollection() 함수는 인덱스 0번 위치의 앵커 태그 텍스트를 반환합니다. 이 예제에서는 첫 번째 앵커의 텍스트인 “Sample1”이 출력됩니다. 반면 getLength() 함수는 해당 링크 텍스트의 길이를 반환하는데, “Sample1”은 7글자이므로 결과값으로 7이 출력됩니다.