HTML DOM의 images 컬렉션 속성은 현재 HTML 문서에 포함된 모든 <img> 요소들을 하나의 컬렉션으로 반환합니다. 이를 활용하면 문서 내 이미지의 개수를 세거나, 특정 이미지 요소에 접근하는 작업을 간편하게 수행할 수 있습니다.
문법(Syntax)
images 컬렉션의 기본 사용 문법은 다음과 같습니다.
document.images
속성(Properties)
DOM Images 컬렉션이 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| length | HTML 문서 내에 존재하는 <img> 요소의 총 개수를 반환합니다. |
메서드(Methods)
DOM Images 컬렉션에서 사용할 수 있는 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| [index] | 컬렉션에서 지정한 인덱스 위치의 <img> 요소를 반환합니다. |
| item(index) | 컬렉션에서 지정한 인덱스 위치의 <img> 요소를 반환합니다. |
| namedItem(id) | 컬렉션에서 지정한 id 값을 가진 <img> 요소를 반환합니다. |
예제(Example)
다음은 DOM images 컬렉션 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 페이지에 있는 이미지의 총 개수가 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
.show{
color:#db133a;
font-size:2rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg"
alt="Learn Spring">
<img src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg"
alt="Learn Hibernate">
<img src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" alt="Learn
SQL">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg" alt="Learn
PL/SQL">
<button onclick="getCount()" class="btn">Count Number Of Images</button>
<div class="show"></div>
<script>
function getCount() {
document.querySelector('.show').innerHTML=document.images.length;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Count Number Of Images(이미지 개수 세기)” 버튼을 클릭하면 해당 웹 페이지에 포함된 이미지의 총 개수가 아래와 같이 표시됩니다.
정리
document.images는 HTMLCollection 객체로, 문서 전체의 이미지를 손쉽게 탐색하고 조작할 수 있게 해주는 유용한 도구입니다. 특히 length 속성으로 이미지 개수를 확인하거나, 인덱스 및 id 기반으로 특정 이미지에 접근할 때 활용도가 높습니다.