Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট getElementsByTagName


getElementsByTagName হল একটি জাভাস্ক্রিপ্ট মেথড যা HTML ডকুমেন্ট থেকে নির্দিষ্ট ট্যাগের সকল এলিমেন্টকে নির্বাচিত করতে ব্যবহৃত হয়। এটি একটি HTMLCollection প্রদান করে, যা DOM (Document Object Model) এ সকল মিলানো ট্যাগ এলিমেন্টের তালিকা ধারণ করে।


getElementsByTagName কি?

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> ট্যাগ আলাদা আলাদা ভাবে নির্বাচন করা হয়েছে এবং কনসোলে তাদের টেক্সট প্রদর্শন করা হয়েছে।


লাইভ HTMLCollection

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

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 সিলেক্টরগুলির সাথে তুলনা করে বিভিন্ন পরিস্থিতিতে কোন মেথডটি সবচেয়ে ভাল কাজ করে তা নির্ধারণ করতে পারবেন।