JavaScript: document.links নিয়ে বিস্তারিত বাংলা টিউটোরিয়াল
document.links হলো JavaScript DOM-এর একটি প্রপার্টি, যা HTML ডকুমেন্টে থাকা সমস্ত <a> ট্যাগের একটি HTMLCollection প্রদান করে — যেগুলোর href অ্যাট্রিবিউট আছে। এটি ব্যবহার করে আপনি ওয়েবসাইটের সব কার্যকর লিংক খুঁজে পেতে ও পরিবর্তন করতে পারবেন।
<a> ট্যাগ কী?
HTML ডকুমেন্টে <a> ট্যাগ ব্যবহার করে হাইপারলিঙ্ক তৈরি করা হয়। এটি ব্যবহারকারীদের একটি পেজ থেকে অন্য পেজে নিয়ে যায়। উদাহরণ:
<a href="https://example.com">Visit Example</a>
JavaScript দিয়ে document.links ব্যবহারের পদ্ধতি
// সব কার্যকর লিংক গুলো কনসোলে দেখানো
console.log(document.links);
// মোট কতটি লিংক আছে
console.log("মোট লিংক:", document.links.length);
// প্রত্যেক লিংকের href প্রিন্ট করা
for (let i = 0; i < document.links.length; i++) {
console.log("লিংক", i + 1, ":", document.links[i].href);
}
document.links এর বৈশিষ্ট্যসমূহ
| প্রপার্টি/মেথড | ব্যাখ্যা |
|---|---|
| document.links | সকল <a> ট্যাগ যাদের href আছে তা একটি HTMLCollection হিসেবে রিটার্ন করে। |
| document.links.length | কার্যকর <a> ট্যাগের সংখ্যা রিটার্ন করে। |
| document.links[index] | নির্দিষ্ট লিংক অ্যাক্সেস করার জন্য index ব্যবহার করা হয়। |
ব্যবহারিক উদাহরণ: সব লিংকে স্টাইল যোগ করা
// সব লিংকের রঙ ও আন্ডারলাইন পরিবর্তন
for (let i = 0; i < document.links.length; i++) {
document.links[i].style.color = "red";
document.links[i].style.textDecoration = "underline";
}
⚠️ সতর্কতা
- document.links শুধুমাত্র
<a>ট্যাগকেই রিটার্ন করে যাদেরhrefঅ্যাট্রিবিউট আছে। <a name="anchor">এর মতো লিংকগুলো এই কালেকশনে থাকে না যদিhrefনা থাকে।
✅ সারসংক্ষেপ
document.linksদিয়ে JavaScript থেকে সক্রিয়<a>ট্যাগসমূহ অ্যাক্সেস করা যায়।- এটি ডাইনামিকভাবে লিংকের গঠন, স্টাইল বা গন্তব্য পরিবর্তনের জন্য উপকারী।
- এই কালেকশনটি লাইভ, অর্থাৎ DOM আপডেট হলে এটি স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।