Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính Bộ sưu tập Hình ảnh HTML DOM

Thuộc tính thu thập hình ảnh HTML DOM trả về tập hợp tất cả phần tử HTML trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

document.images

Thuộc tính

Sau đây là thuộc tính của Bộ sưu tập hình ảnh DOM -

Thuộc tính
Giải thích
chiều dài
Nó trả về số lượng phần tử HTML trong tài liệu HTML.

Phương pháp

Sau đây là các phương pháp của Bộ sưu tập hình ảnh DOM

Phương thức
Giải thích
[chỉ số]
Nó trả về phần tử chỉ mục được chỉ định từ bộ sưu tập
item (chỉ mục)
Nó trả về phần tử chỉ mục được chỉ định từ bộ sưu tập.
namesItem (id)
Nó trả về phần tử id được chỉ định từ bộ sưu tập.

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính bộ sưu tập hình ảnh 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính Bộ sưu tập Hình ảnh HTML DOM

Nhấp vào “ Đếm số lượng hình ảnh ”Để nhận tổng số hình ảnh trên trang web này -

Thuộc tính Bộ sưu tập Hình ảnh HTML DOM