JavaScript DOM은 문서와 관련된 다양한 정보를 손쉽게 얻을 수 있는 여러 속성을 제공합니다. 그중 document.links.length 속성을 사용하면 현재 문서에 포함된 링크(<a> 태그)의 총 개수를 간단히 확인할 수 있습니다. 이 속성은 기존 코드의 정상적인 동작에는 전혀 영향을 주지 않으므로 안심하고 사용할 수 있습니다.
document.links.length란?
document.links는 HTML 문서 내 모든 <a> 태그(링크)를 담고 있는 컬렉션입니다. 여기에 length 속성을 붙이면 문서 전체에 몇 개의 링크가 존재하는지 숫자로 반환받을 수 있습니다.
예제 1 - 링크 3개인 경우
아래 예제에는 세 개의 링크가 포함되어 있습니다. DOM 속성인 document.links.length를 사용하면 문서에 있는 링크의 개수가 화면에 그대로 출력됩니다.
<html>
<body>
<a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
<a href="https://www.tutorialspoint.com/php/index.htm">Php</a><br>
<a href="https://www.tutorialspoint.com/java8/index.htm">Java</a><br>
<p id="links"></p>
<script>
document.getElementById("links").innerHTML =
"링크의 개수는: " + document.links.length;
</script>
</body>
</html>실행 결과
Javascript Php Java 링크의 개수는: 3
예제 2 - 링크 2개인 경우
다음 예제에는 두 개의 링크만 포함되어 있습니다. 마찬가지로 document.links.length 속성을 사용하면 링크 개수가 정확하게 표시됩니다.
<html>
<body>
<a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
<a href="https://www.tutorialspoint.com/bitcoin/index.htm">Bitcoin</a><br>
<script>
document.write("링크의 개수는: " + document.links.length);
</script>
</body>
</html>실행 결과
Javascript Bitcoin 링크의 개수는: 2
정리
이처럼 document.links.length는 별도의 라이브러리나 복잡한 로직 없이 한 줄의 코드로 문서 내 링크 개수를 파악할 수 있는 매우 유용한 DOM 속성입니다. 웹 페이지 분석, 링크 유효성 검사, 동적 콘텐츠 처리 등 다양한 상황에서 활용할 수 있습니다.