การทำงานกับ document.images ใน JavaScript

Property document.images คืนค่า HTMLCollection ของ Element <img> ทั้งหมดในเอกสาร ใช้ .length เพื่อนับจำนวน

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <h1>TutorialsPoint Tutorials</h1>
    <img src="/javascript/images/javascript-mini-logo.jpg" /><br>
    <img src="/html5/images/html5-mini-logo.jpg" />
    <script>
      var num = document.images.length;
      document.write("<br>How many images? " + num);
    </script>
  </body>
</html>

คำอธิบาย

• document.images — Live HTMLCollection ของ <img> Elements
• .length — จำนวนรูปภาพทั้งหมด
• ผลลัพธ์: How many images? 2
• เข้าถึงรูปภาพตัวที่ n: document.images[n]

การใช้งานจริง

• Preload Images: new Image().src = document.images[i].src
• Lazy Load: เปลี่ยน data-src → src เมื่อ Scroll ใกล้
• Image Gallery: วนลูป document.images สร้าง Lightbox
• Analytics: นับรูปภาพ Track Impression

ตัวเลือกสมัยใหม่: document.querySelectorAll('img') คืน NodeList รองรับ Selector ซับซ้อน (เช่น img[loading="lazy"])