คุณสมบัติคอลเลกชั่นรูปภาพ HTML DOM ส่งคืนคอลเลกชั่นขององค์ประกอบ HTML ทั้งหมดในเอกสาร HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
document.images
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของ DOM Images Collection -
คุณสมบัติ | คำอธิบาย |
---|---|
ความยาว | ส่งกลับจำนวน องค์ประกอบ HTML ในเอกสาร HTML |
วิธีการ
ต่อไปนี้เป็นวิธีการของ DOM Images Collection
วิธีการ | คำอธิบาย |
---|---|
[ดัชนี] | ส่งคืนองค์ประกอบ ดัชนีที่ระบุจากคอลเล็กชัน |
item(index) | ส่งคืนองค์ประกอบ ดัชนีที่ระบุจากคอลเล็กชัน |
namedItem(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>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “นับจำนวนภาพ ” เพื่อรับจำนวนภาพทั้งหมดบนหน้าเว็บนี้ -