HTML 문서에 포함된 이미지의 개수를 확인하려면 JavaScript의 document.images 속성을 사용하면 됩니다.
document.images 속성이란?
document.images는 현재 문서 안에 있는 모든 <img> 요소를 담고 있는 컬렉션(HTMLCollection)입니다. 이 컬렉션의 length 속성을 참조하면 문서 전체에서 사용된 이미지의 총 개수를 손쉽게 얻을 수 있습니다.
예제 코드
아래 코드를 실행하면 문서에 포함된 이미지의 개수를 화면에 출력할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<img src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/hive/images/hive-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/maven/images/maven-mini-logo.jpg">
<script>
var val = document.images.length;
document.write("<br>문서 내 이미지 개수: " + val);
</script>
</body>
</html>실행 결과
위 예제에서는 이미지가 4개 삽입되어 있으므로, 다음과 같은 결과가 출력됩니다.
문서 내 이미지 개수: 4
참고 사항
document.images 컬렉션은 배열처럼 인덱스로 접근할 수 있어, 특정 이미지 요소에 개별적으로 접근하는 것도 가능합니다. 예를 들어 document.images[0]은 문서의 첫 번째 이미지를 반환합니다. 또한 이미지 로딩 상태나 크기 등 다양한 정보를 활용한 동적 처리에도 유용하게 사용할 수 있습니다.