HTML DOM 이미지 컬렉션 속성은 HTML 문서의 모든 HTML 요소
컬렉션을 반환합니다.구문
다음은 구문입니다 -
document.images
속성
다음은 DOM 이미지 컬렉션의 속성입니다 -
속성 | 설명 |
---|---|
길이 | HTML 문서에서 HTML 요소의 수를 반환합니다. |
방법
DOM 이미지 수집 방법은 다음과 같습니다.
메소드 | 설명 |
---|---|
[색인] | 컬렉션에서 지정된 인덱스 요소를 반환합니다. |
항목(색인) | 컬렉션에서 지정된 인덱스 요소를 반환합니다. |
이름이 지정된 항목(id) | 컬렉션에서 지정된 id 요소를 반환합니다. |
예시
DOM 이미지 컬렉션 속성의 예를 살펴보겠습니다 -
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -
"이미지 수 계산을 클릭합니다. ” 버튼을 눌러 이 웹 페이지의 총 이미지 수 -