JavaScript에서 문서에 포함된 링크의 개수를 알아내려면 document.links 컬렉션과 length 속성을 함께 사용하면 됩니다.
links 속성이란?
document.links는 HTML 문서 내의 모든 <a> 태그와 <area> 태그를 담고 있는 컬렉션입니다. 여기에 length 속성을 붙이면 문서 전체에 존재하는 링크의 총 개수를 숫자로 반환받을 수 있습니다.
예제 코드
다음 예제를 실행하면 문서 내 링크의 개수가 화면에 표시됩니다. 네 개의 링크가 있는 문서에서 실제로 4라는 값이 출력되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/php">PHP</a>
<br>
<a href="https://www.tutorialspoint.com/java/">Java</a>
<br>
<a href="https://www.tutorialspoint.com/html5/">HTML</a>
<br>
<a href="https://www.tutorialspoint.com/css/">CSS</a>
<script>
var val = document.links.length;
document.write("<br>문서 내 링크 개수: " + val);
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 결과가 출력됩니다.
문서 내 링크 개수: 4
참고 사항
document.links는 HTMLCollection 형태로 반환되므로, length 외에도 인덱스를 사용해 특정 링크 요소에 접근할 수 있습니다. 예를 들어 document.links[0]은 문서에서 첫 번째 링크를 가리킵니다. 또한 최신 JavaScript 문법에서는 document.write() 대신 textContent나 innerHTML을 사용해 결과를 표시하는 것이 권장됩니다.