자바스크립트 document.images 속성 완벽 가이드 – 문서 내 이미지 개수 확인하기

자바스크립트에서 document.images 속성을 사용하면 현재 문서에 포함된 모든 <img> 태그에 접근할 수 있습니다. 이 속성은 문서 내 이미지 요소들을 담고 있는 컬렉션(HTMLCollection)을 반환하며, .length 프로퍼티를 활용하면 문서 안의 이미지 개수를 손쉽게 확인할 수 있습니다.

document.images 기본 사용법

document.images는 읽기 전용 속성으로, 페이지에 존재하는 <img> 요소 전체를 배열과 유사한 형태로 제공합니다. 아래와 같이 .length를 사용해 이미지 개수를 구할 수 있습니다.

var num = document.images.length;

예제 코드

다음 예제는 자바스크립트에서 document.images 속성을 실제로 구현하는 방법을 보여줍니다. 실행하면 문서에 포함된 이미지의 개수가 화면에 출력됩니다.

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   <body>
      <h1>TutorialsPoint Tutorials</h1>
      <img src="/javascript/images/javascript-mini-logo.jpg"/><br>
      <img src="/html5/images/html5-mini-logo.jpg"/>
      <script>
         var num = document.images.length;
         document.write("<br>How many images? "+num);
      </script>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 결과가 출력됩니다.

How many images? 2

추가 활용 방법

document.images는 단순히 개수를 세는 것 외에도 다양하게 활용할 수 있습니다.

인덱스로 특정 이미지 접근: document.images[0]처럼 인덱스를 사용해 첫 번째 이미지 요소에 바로 접근할 수 있습니다.
이미지 정보 확인: 각 이미지의 src, width, height 등의 속성값을 읽어올 수 있습니다.
반복문 처리: for문 또는 forEach 스타일의 반복 처리를 통해 문서 내 모든 이미지를 일괄 조작할 수 있습니다.

// 모든 이미지의 경로 출력
for (var i = 0; i < document.images.length; i++) {
   console.log(document.images[i].src);
}

이처럼 document.images 속성은 DOM에서 이미지 요소를 다룰 때 매우 유용한 도구이며, 별도의 선택자 없이도 문서 전체의 이미지에 빠르게 접근할 수 있다는 장점이 있습니다.