자바스크립트로 HTML 문서를 다룰 때 앵커(anchor) 태그는 매우 자주 등장하는 요소입니다. 자바스크립트는 문서 내 앵커의 총 개수를 간편하게 확인할 수 있도록 document.anchors.length 속성을 제공합니다. 이 속성은 프로그램의 다른 코드에 아무런 영향을 주지 않으면서 오직 앵커 태그의 개수만 반환합니다.
문법
length = document.anchors.length;
이 구문은 문서 내 앵커 태그의 개수만을 반환하며, 다른 코드의 실행 결과에는 전혀 영향을 미치지 않습니다.
알아두면 좋은 점
document.anchors 컬렉션에는 name 속성을 가진 <a> 태그만 포함됩니다. 따라서 href 속성만 있는 일반 링크는 개수에 포함되지 않으므로 유의해야 합니다.
예제 1
다음 예제에서는 두 개의 앵커 태그를 사용하고, DOM 속성인 document.anchors.length로 그 개수를 구해 화면에 출력합니다.
<html>
<body>
<a name="Tutor">Tutorix</a><br>
<a name="Tutorial">Tutorialspoint</a><br>
<p id="anchors"></p>
<script>
document.getElementById("anchors").innerHTML =
"앵커의 개수는: " + document.anchors.length;
</script>
</body>
</html>출력 결과
Tutorix Tutorialspoint 앵커의 개수는: 2
예제 2
이번 예제에서는 세 개의 앵커 태그를 사용하고, document.write() 메서드와 함께 document.anchors.length를 호출하여 개수를 바로 출력합니다.
<html> <body> <a name="Tutor">Tutorix</a><br> <a name="Tutorial">Tutorialspoint</a><br> <a name="Tutorials">Tutorialspoint private ltd</a><br> <script> document.write(document.anchors.length); </script> </body> </html>
출력 결과
Tutorix Tutorialspoint Tutorialspoint private ltd 3
정리
document.anchors.length는 문서 내 앵커 태그의 개수를 빠르고 안전하게 파악할 수 있는 간단한 방법입니다. 별도의 라이브러리나 복잡한 로직 없이 단 한 줄의 코드로 원하는 정보를 얻을 수 있어, DOM을 다루는 다양한 상황에서 유용하게 활용할 수 있습니다.