JavaScript의 앵커(anchor) 태그는 배열과 유사한(array-like) 구조를 따릅니다. 따라서 특정 앵커 태그에 접근하려면 배열처럼 인덱스를 사용하면 되며, 이때 document.anchors 컬렉션을 활용합니다.
기본 문법
element = document.anchors[i].innerHTML;
위 문법에서 i는 원하는 앵커 요소의 인덱스 번호입니다. 인덱스는 0부터 시작하므로 첫 번째 앵커는 document.anchors[0]으로 접근합니다.
예제 1: 첫 번째 앵커 요소 출력하기
다음 예제에서는 두 개의 앵커 태그 중 첫 번째 앵커 태그의 내용을 화면에 표시합니다.
<html>
<body>
<a name="Tutor">Tutorix</a><br>
<a name="Totorial">Tutorialspoint</a><br>
<p id="anchors"></p>
<script>
document.getElementById("anchors").innerHTML =
"첫 번째 앵커 요소: " + document.anchors[0].innerHTML;
</script>
</body>
</html>출력 결과
첫 번째 앵커 요소: Tutorix
예제 2: 세 번째 앵커 요소 출력하기
다음 예제에는 세 개의 앵커 요소가 있으며, 그중 세 번째 요소의 내용을 document.anchors 컬렉션을 통해 가져와 화면에 표시합니다.
<html>
<body>
<a name="Tutor">Tutorix</a><br>
<a name="Totorial">Tutorialspoint</a><br>
<a name="Totorials">Tutorialspoint private ltd</a><br>
<p id="anchors"></p>
<script>
document.getElementById("anchors").innerHTML =
"세 번째 요소: " + document.anchors[2].innerHTML;
</script>
</body>
</html>출력 결과
세 번째 요소: Tutorialspoint private ltd
정리
document.anchors는 HTML 문서 내 name 속성이 지정된 모든 <a> 요소를 담고 있는 컬렉션입니다. 배열과 마찬가지로 대괄호 표기법([i])으로 특정 요소에 접근할 수 있으며, .length 속성으로 전체 앵커 개수도 확인할 수 있습니다. 다만 최신 웹 표준에서는 document.querySelector()나 getElementById() 같은 메서드 사용이 권장되므로, 레거시 코드 유지보수 시 참고하는 것이 좋습니다.