문서에 포함된 앵커(anchor)의 개수를 알아내려면 JavaScript의 anchors 속성을 사용하면 됩니다.
document.anchors는 HTML 문서 내에서 name 속성이 지정된 모든 <a> 요소의 컬렉션을 반환하며, length 프로퍼티와 함께 사용하면 전체 앵커 수를 손쉽게 구할 수 있습니다.
예제 코드
아래 예제를 실행하면 문서에 있는 앵커의 총 개수를 화면에 출력할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/php" name="PHP">PHP</a>
<br>
<a href="https://www.tutorialspoint.com/java/" name="Java">Java</a>
<br>
<a href="https://www.tutorialspoint.com/html5/" name="HTML5">HTML</a>
<br>
<a href="https://www.tutorialspoint.com/css/" name="CSS">CSS</a>
<script>
var val = document.anchors.length;
document.write("<br>문서 내 앵커 개수: " + val);
</script>
</body>
</html>코드 설명
위 예제에서는 name 속성이 설정된 네 개의 링크(PHP, Java, HTML5, CSS)가 문서에 포함되어 있습니다. 스크립트 부분의 document.anchors.length가 이 요소들의 개수를 세어 반환하므로, 실행 결과에는 다음과 같이 출력됩니다.
문서 내 앵커 개수: 4
참고 사항
anchors 속성은 name 속성이 있는 앵커만 계산한다는 점에 유의하세요. 일반적인 하이퍼링크처럼 href만 있고 name이 없는 <a> 태그는 포함되지 않습니다. 최신 웹 개발 환경에서는 document.querySelectorAll('a[name]')을 사용하는 방법도 대안으로 활용할 수 있습니다.