getElementsByTagName হল একটি জাভাস্ক্রিপ্ট মেথড যা HTML ডকুমেন্ট থেকে নির্দিষ্ট ট্যাগের সকল এলিমেন্টকে নির্বাচিত করতে ব্যবহৃত হয়। এটি একটি HTMLCollection প্রদান করে, যা DOM (Document Object Model) এ সকল মিলানো ট্যাগ এলিমেন্টের তালিকা ধারণ করে।
getElementsByTagName হল একটি DOM মেথড যা কোনো নির্দিষ্ট HTML ট্যাগের সমস্ত এলিমেন্টকে সংগ্রহ করে। এটি একটি লাইভ HTMLCollection প্রদান করে, যা মানে হচ্ছে যদি ডকুমেন্টের মধ্যে নতুন ট্যাগ যুক্ত করা হয়, তবে সেই নতুন ট্যাগও সংগ্রহে যোগ হবে।
document.getElementsByTagName(tagName);
tagName: এটি একটি স্ট্রিং যা ট্যাগের নাম নির্দেশ করে। উদাহরণস্বরূপ, 'div', 'p', 'a' ইত্যাদি।
ধরা যাক, আপনার একটি HTML ডকুমেন্ট আছে যেটিতে বিভিন্ন ট্যাগ রয়েছে এবং আপনি সকল <p> ট্যাগ সংগ্রহ করতে চান। নিম্নলিখিত উদাহরণটি দেখাবে কিভাবে আপনি এটি করতে পারেন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementsByTagName Example</title> </head> <body> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <p>This is the third paragraph.</p> <div>This is a div element.</div> <p>This is the fourth paragraph.</p> <script> // JavaScript Code let paragraphs = document.getElementsByTagName('p'); for (let i = 0; i < paragraphs.length; i++) { console.log(paragraphs[i].innerText); } </script> </body> </html>
নিচে এই কোড গুলোর বর্ণনা দেকুন।
আপনি একসঙ্গে একাধিক ট্যাগ নির্বাচন করতে পারেন না getElementsByTagName দিয়ে। তবে, আপনি প্রতিটি ট্যাগের জন্য আলাদা আলাদা কল করতে পারেন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Tags Example</title> </head> <body> <h1>Main Heading</h1> <p>This is a paragraph.</p> <h2>Subheading</h2> <p>Another paragraph.</p> <div>A div element.</div> <script> // JavaScript Code let headings = document.getElementsByTagName('h1'); let paragraphs = document.getElementsByTagName('p'); console.log('Headings:'); for (let i = 0; i < headings.length; i++) { console.log(headings[i].innerText); } console.log('Paragraphs:'); for (let j = 0; j < paragraphs.length; j++) { console.log(paragraphs[j].innerText); } </script> </body> </html>
এখানে <h1> এবং <p> ট্যাগ আলাদা আলাদা ভাবে নির্বাচন করা হয়েছে এবং কনসোলে তাদের টেক্সট প্রদর্শন করা হয়েছে।
getElementsByTagName একটি লাইভ HTMLCollection প্রদান করে। অর্থাৎ, যদি ডকুমেন্টে নতুন ট্যাগ যোগ করা হয়, তাহলে HTMLCollection স্বয়ংক্রিয়ভাবে আপডেট হবে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Live HTMLCollection Example</title> </head> <body> <p>Initial paragraph.</p> <script> // JavaScript Code let paragraphs = document.getElementsByTagName('p'); console.log('Initial paragraphs count:', paragraphs.length); // Adding a new paragraph let newParagraph = document.createElement('p'); newParagraph.innerText = 'Newly added paragraph.'; document.body.appendChild(newParagraph); // Checking the count again console.log('Updated paragraphs count:', paragraphs.length); </script> </body> </html>
বর্ণনা
getElementsByTagName এর সাথে তুলনা করলে querySelectorAll একটি অনেক শক্তিশালী অপশন যা CSS সিলেক্টর ব্যবহার করে ট্যাগ নির্বাচন করতে সক্ষম।
নিচে এর উদাহরণ দেকুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>querySelectorAll Example</title> </head> <body> <p class="highlight">Highlighted paragraph.</p> <p>Regular paragraph.</p> <script> // Using querySelectorAll let highlightedParagraphs = document.querySelectorAll('p.highlight'); highlightedParagraphs.forEach(p => console.log(p.innerText)); </script> </body> </html>
এখানে querySelectorAll ব্যবহার করে .highlight ক্লাস সহ <p> ট্যাগ নির্বাচন করা হয়েছে। এটি CSS সিলেক্টর ব্যবহার করে ট্যাগ নির্বাচন করতে সক্ষম, যা অনেক বেশি ফ্লেক্সিবল।
getElementsByTagName দিয়ে ডাইনামিক কনটেন্ট ম্যানিপুলেশন করা সম্ভব। ধরুন, আপনি একটি তালিকা থেকে সকল আইটেমের স্টাইল পরিবর্তন করতে চান।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Content Example</title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> // JavaScript Code let listItems = document.getElementsByTagName('li'); for (let i = 0; i < listItems.length; i++) { listItems[i].style.color = 'blue'; } </script> </body> </html>
এখানে সমস্ত <li> ট্যাগের টেক্সট কালার পরিবর্তন করা হয়েছে।
getElementsByTagName শুধুমাত্র ট্যাগের নাম অনুসারে নির্বাচন করে, CSS ক্লাস বা আইডি ব্যবহার করতে পারে না। লাইভ HTMLCollection প্রদানের কারণে, কখনও কখনও পারফরমেন্স ইস্যু হতে পারে যদি ডকুমেন্টে অনেক পরিবর্তন ঘটে। getElementsByTagName একটি প্রাথমিক কিন্তু শক্তিশালী DOM মেথড যা HTML ডকুমেন্ট থেকে নির্দিষ্ট ট্যাগ এলিমেন্ট সংগ্রহ করতে সহায়তা করে। যদিও এর কিছু সীমাবদ্ধতা রয়েছে, এটি ব্যবহারে সহজ এবং সরাসরি ফলাফল প্রদান করে।
এখানে উল্লিখিত উদাহরণ এবং ব্যাখ্যাগুলি আপনাকে এই মেথডটি কিভাবে ব্যবহার করতে হয় তা বুঝতে সাহায্য করবে। অন্য DOM মেথড এবং CSS সিলেক্টরগুলির সাথে তুলনা করে বিভিন্ন পরিস্থিতিতে কোন মেথডটি সবচেয়ে ভাল কাজ করে তা নির্ধারণ করতে পারবেন।