JavaScript document.anchors Explained in Bangla
document.anchors একটি পুরনো ও কম ব্যবহৃত প্রপার্টি, যা HTML ডকুমেন্টের সকল <a name="..."> ট্যাগ (নেম অ্যাংকর) সমূহের একটি HTMLCollection রিটার্ন করে। এটি শুধুমাত্র তাদেরকেই রিটার্ন করে যাদের name অ্যাট্রিবিউট রয়েছে, id নয়।
নোট: আধুনিক ওয়েবে এটি খুব কম ব্যবহৃত হয় কারণ name অ্যাট্রিবিউটের ব্যবহার প্রায় বন্ধ হয়ে গেছে এবং এর পরিবর্তে id ব্যবহৃত হয়।
১. document.anchors কিভাবে কাজ করে?
যেসব <a> ট্যাগে name অ্যাট্রিবিউট আছে, সেগুলিকে এটি একটি collection আকারে রিটার্ন করে।
<a name="section1">Section 1</a>
<a name="section2">Section 2</a>
const anchors = document.anchors;
console.log("Anchor Elements:", anchors);
console.log("First Anchor Name:", anchors[0].name);
আউটপুট: Console-এ অ্যাংকর এলিমেন্টগুলোর তালিকা দেখা যাবে এবং প্রথমটার name প্রপার্টি পাওয়া যাবে।
২. document.anchors এর ব্যবহার
| ব্যবহার | ব্যাখ্যা |
|---|---|
document.anchors.length |
ডকুমেন্টে কতটি name অ্যাট্রিবিউটসহ <a> ট্যাগ আছে তা রিটার্ন করে। |
document.anchors[0] |
প্রথম <a name="..."> এলিমেন্ট রিটার্ন করে। |
৩. id vs name – কেন anchors কাজ নাও করতে পারে?
যদি আপনি <a> ট্যাগে id ব্যবহার করেন, তবে document.anchors সেটি ধরবে না। এটি কেবলমাত্র name অ্যাট্রিবিউট দেখেই কাজ করে।
<a id="section3">This will NOT be picked by document.anchors</a>
কারণ: এখানে name অ্যাট্রিবিউট না থাকায় document.anchors এটি গণনা করবে না।
৪. বিকল্প (Modern) পন্থা
আধুনিক JavaScript ডেভেলপমেন্টে আমরা সাধারণত document.querySelector() বা getElementById() ব্যবহার করি।
const el = document.querySelector('a[name="section1"]');
console.log(el.innerText);
৫. উপসংহার
document.anchors একটি পুরনো ও নির্দিষ্ট কাজে ব্যবহৃত প্রপার্টি। আপনি যদি পুরনো কোডে কাজ করেন, তখন এটি কাজে লাগতে পারে। তবে নতুন প্রজেক্টে querySelector, getElementById ইত্যাদি ব্যবহার করাই উত্তম।