JavaScript document.anchors 속성이란?
JavaScript에서 document.anchors 속성은 현재 문서 안에 있는 <a> 태그 중 name 속성을 가진 요소들만 모아놓은 컬렉션(HTMLCollection)을 반환합니다. 이 컬렉션의 length 속성을 활용하면 문서에 포함된 앵커의 개수를 손쉽게 확인할 수 있습니다.
여기서 주의할 점은 href 속성을 가진 일반 하이퍼링크는 document.links에 포함되고, 오직 name 속성을 가진 요소만 document.anchors에 포함된다는 것입니다. 두 속성의 차이를 비교하면 이해가 훨씬 쉬워집니다.
document.anchors 사용 예제
아래 코드를 실행하면 문서 내 링크와 앵커의 개수를 각각 출력하는 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<p>
<a href="/java/index.htm">Java</a><br>
<a href="/php/index.htm">PHP</a><br>
<a name="Ruby Tutorial">Ruby</a><br>
<a name="WordPress Tutorial">WordPress</a>
</p>
<script>
var num1 = document.links.length;
var num2 = document.anchors.length;
document.write("How many links? "+num1);
document.write("<br>How many anchors? "+num2);
</script>
</body>
</html>실행 결과
위 예제에는 총 4개의 <a> 태그가 있습니다. 그중 href 속성을 가진 Java와 PHP는 링크로 분류되고, name 속성을 가진 Ruby와 WordPress는 앵커로 분류됩니다. 따라서 실행 결과는 다음과 같습니다.
How many links? 2 How many anchors? 2
참고 사항
HTML5 표준에서는 <a> 태그의 name 속성이 더 이상 권장되지 않으며, 대신 id 속성을 사용해 페이지 내 특정 위치를 지정하는 것이 일반적입니다. 다만 document.anchors는 하위 호환성을 위해 여전히 지원되고 있으므로, 기존 레거시 코드를 유지보수할 때 유용하게 활용할 수 있습니다. 새로운 프로젝트에서는 document.querySelectorAll('a[name]') 같은 최신 DOM API를 사용하는 편이 좋습니다.