JavaScript로 첫 번째 이미지 ID 가져오기
JavaScript에서 문서 내 첫 번째 이미지의 ID를 반환하려면 document.images 속성을 사용하면 됩니다. 이 속성은 HTML 문서에 포함된 모든 <img> 요소를 담고 있는 컬렉션(HTMLCollection)을 반환하며, 배열과 같은 방식으로 인덱스를 통해 각 이미지에 접근할 수 있습니다.
핵심 문법
document.images[0].id처럼 인덱스 0에 접근하면 문서에서 가장 먼저 등장하는 이미지의 id 속성 값을 얻을 수 있습니다. 또한 document.images.length를 활용하면 문서 내 전체 이미지 개수도 함께 확인할 수 있어 유용합니다.
예제
다음 코드를 실행하면 문서에 있는 첫 번째 이미지의 ID를 출력할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<img id="image1" src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg">
<img id="image2" src="https://www.tutorialspoint.com/hive/images/hive-mini-logo.jpg">
<img id="image3" src="https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg">
<img id="image4" src="https://www.tutorialspoint.com/maven/images/maven-mini-logo.jpg">
<script>
var val = document.images.length;
document.write("<br>문서 내 이미지 개수: "+val);
document.write("<br>첫 번째 이미지의 ID: "+document.images[0].id);
</script>
</body>
</html>실행 결과
위 예제를 실행하면 브라우저에 다음과 같은 결과가 표시됩니다.
문서 내 이미지 개수: 4 첫 번째 이미지의 ID: image1
이처럼 document.images 컬렉션을 사용하면 별도의 쿼리 셀렉터 없이도 간단하게 이미지 요소 정보를 조회할 수 있습니다.