Blog

JavaScript: document.images নিয়ে পূর্ণাঙ্গ বাংলা টিউটোরিয়াল

document.images হলো JavaScript DOM-এর একটি প্রপার্টি, যা HTML ডকুমেন্টে ব্যবহৃত সমস্ত <img> ট্যাগসমূহের একটি লাইভ HTMLCollection প্রদান করে। এর মাধ্যমে আপনি ওয়েবপেজের সব ইমেজ একসাথে অ্যাক্সেস ও ম্যানিপুলেট করতে পারেন।

<img> ট্যাগ সম্পর্কে সংক্ষেপে

HTML এ <img> ট্যাগ ব্যবহার করে কোনো ছবিকে পেজে দেখানো হয়। প্রতিটি img ট্যাগের src, alt, width, height ইত্যাদি অ্যাট্রিবিউট থাকে।

<img src="image1.jpg" alt="ছবি ১">
<img src="image2.jpg" alt="ছবি ২">
<img src="image3.jpg" alt="ছবি ৩">
  

JavaScript দিয়ে document.images এর ব্যবহার

// সব ইমেজ দেখানো
console.log(document.images);

// ইমেজ সংখ্যা বের করা
console.log("মোট ছবি:", document.images.length);

// প্রতিটি ইমেজের src দেখানো
for (let i = 0; i < document.images.length; i++) {
  console.log("ছবি", i + 1, ":", document.images[i].src);
}
  

document.images এর বৈশিষ্ট্য টেবিলে

ব্যবহারিক উদাহরণ: সব ইমেজে Border যোগ করা

// প্রতিটি ইমেজে border যোগ
for (let i = 0; i < document.images.length; i++) {
  document.images[i].style.border = "2px solid red";
}
  

⚠️ সতর্কতা

• document.images শুধুমাত্র <img> ট্যাগকেই রিটার্ন করে, background-image CSS দিয়ে যোগ করা ইমেজ নয়।
• ইমেজগুলোর proper alt অ্যাট্রিবিউট ব্যবহার করা SEO ও accessibility এর জন্য জরুরি।

✅ সারসংক্ষেপ

• document.images দিয়ে JavaScript থেকে সমস্ত ইমেজ নিয়ন্ত্রণ করা যায়।
• ডায়নামিকভাবে ইমেজ লোড, স্টাইল পরিবর্তন বা src বদলাতে এটি ব্যবহার করা হয়।
• এটি একটি live collection — DOM পরিবর্তন হলে এটিও আপডেট হয়।