---

ওয়েব ডেভেলপমেন্টের জগতে, এইচটিএমএল উপাদানগুলির সাথে মিথস্ক্রিয়া করা এবং তাদের মানগুলি বের করা একটি মৌলিক কাজ। আপনি একটি ফর্ম তৈরি করছেন, ডেটা আনছেন বা বিষয়বস্তু ম্যানিপুলেট করছেন না কেন, জাভাস্ক্রিপ্ট ব্যবহার করে উপাদানের মান কীভাবে পেতে হয় তা জানা অপরিহার্য। এই ব্লগ পোস্টে, আমরা এটি অর্জনের জন্য বিভিন্ন পদ্ধতি অন্বেষণ করব, যার প্রত্যেকটির নিজস্ব ব্যবহারের ক্ষেত্রে এবং সুবিধা রয়েছে।

1. getElementById ব্যবহার করে

getElementById পদ্ধতিটি একটি উপাদানের মান পাওয়ার সবচেয়ে সহজ উপায়গুলির মধ্যে একটি। এটি একটি উপাদানকে তার অনন্য id বৈশিষ্ট্য দ্বারা লক্ষ্য করে।

উদাহরণ:

<input type="text" id="username" value="useotools">
<button onclick="getUsername()">Get Username</button>

<script>
function getUsername() {
    const usernameElement = document.getElementById('username');
    const usernameValue = usernameElement.value;
    alert(usernameValue);
}
</script>

ব্যাখ্যা:

• getElementById পদ্ধতিটি নির্দিষ্ট id এর সাথে উপাদানটিকে পুনরুদ্ধার করে।
• value বৈশিষ্ট্যটি তখন ইনপুট উপাদানের মান পেতে ব্যবহার করা হয়।

2. querySelector ব্যবহার করে

querySelector পদ্ধতি আপনাকে CSS নির্বাচক ব্যবহার করে উপাদান নির্বাচন করতে দেয়। এটি নির্বাচকের সাথে মেলে এমন প্রথম উপাদানটি প্রদান করে।

উদাহরণ:

<input type="text" class="user-input" value="welcome to usetoools">
<button onclick="getUserInput()">Get Input</button>

<script>
function getUserInput() {
    const inputElement = document.querySelector('.user-input');
    const inputValue = inputElement.value;
    alert(inputValue);
}
</script>

ব্যাখ্যা:

• querySelector একটি CSS নির্বাচক ব্যবহার করে প্রথম মিলিত উপাদান খুঁজে পেতে।
• value বৈশিষ্ট্য ইনপুট উপাদানের মান পুনরুদ্ধার করে।

3. getElementsByClassName ব্যবহার করে

getElementsByClassName পদ্ধতি নির্দিষ্ট শ্রেণীর নাম সহ উপাদানগুলির একটি সংগ্রহ প্রদান করে। তারপরে আপনি এই সংগ্রহের মধ্যে একটি নির্দিষ্ট উপাদানের মান অ্যাক্সেস করতে পারেন।

উদাহরণ:

<input type="text" class="user-input" value="Hello">
<input type="text" class="user-input" value="World">
<button onclick="getUserInputs()">Get Inputs</button>

<script>
function getUserInputs() {
    const inputElements = document.getElementsByClassName('user-input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

ব্যাখ্যা:

• getElementsByClassName নির্দিষ্ট শ্রেণীর নাম সহ উপাদানগুলির একটি সংগ্রহ প্রদান করে৷
• একটি লুপ সংগ্রহের মাধ্যমে পুনরাবৃত্তি করতে এবং প্রতিটি উপাদানের মান পুনরুদ্ধার করতে ব্যবহৃত হয়।

4. getElementsByTagName ব্যবহার করে

getElementsByTagName পদ্ধতিটি নির্দিষ্ট ট্যাগ নামের উপাদানগুলির একটি সংগ্রহ প্রদান করে। এই পদ্ধতিটি কার্যকর যখন আপনাকে একই ধরণের একাধিক উপাদান থেকে মান পেতে হবে।

উদাহরণ:

<input type="text" name="user" value="Useo">
<input type="text" name="user" value="Tools">
<button onclick="getUserNames()">Get Names</button>

<script>
function getUserNames() {
    const inputElements = document.getElementsByTagName('input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

ব্যাখ্যা:

• getElementsByTagName সমস্ত input উপাদানের একটি সংগ্রহ প্রদান করে।
• একটি লুপ সংগ্রহের মাধ্যমে পুনরাবৃত্তি করতে এবং প্রতিটি ইনপুট উপাদানের মান পুনরুদ্ধার করতে ব্যবহৃত হয়।

5. getAttribute ব্যবহার করে

getAttribute পদ্ধতি আপনাকে একটি উপাদানের একটি নির্দিষ্ট বৈশিষ্ট্যের মান পুনরুদ্ধার করতে দেয়। যখন আপনাকে অ-মানক বৈশিষ্ট্য বা কাস্টম ডেটা বৈশিষ্ট্যগুলি পেতে হবে তখন এটি কার্যকর।

উদাহরণ:

<div id="user-info" data-name="Useotools.com"></div>
<button onclick="getUserInfo()">Get Info</button>

<script>
function getUserInfo() {
    const userInfoElement = document.getElementById('user-info');
    const userName = userInfoElement.getAttribute('data-name');
    alert(userName);
}
</script>

ব্যাখ্যা:

• getAttribute data-name বৈশিষ্ট্যের মান পুনরুদ্ধার করে।
• এই পদ্ধতিটি কাস্টম বৈশিষ্ট্যগুলির জন্য বিশেষভাবে কার্যকর।

6. innerHTML এবং textContent ব্যবহার করা হচ্ছে

যে উপাদানগুলিতে পাঠ্য সামগ্রী রয়েছে, আপনি সামগ্রী পেতে innerHTML বা textContent ব্যবহার করতে পারেন৷

উদাহরণ:

<p id="message">Welcome to Useotools!</p>
<button onclick="getMessage()">Get Message</button>

<script>
function getMessage() {
    const messageElement = document.getElementById('message');
    const messageText = messageElement.textContent;
    alert(messageText);
}
</script>

ব্যাখ্যা:

• textContent উপাদানটির পাঠ্য সামগ্রী পুনরুদ্ধার করে।
• এই পদ্ধতিটি সহজ পাঠ্য ধারণ করে এমন উপাদানগুলির জন্য উপযোগী।

উপসংহার

Mastering the various methods to get element values in JavaScript is crucial for effective web development. Whether you're working with form inputs, custom attributes, or text content, these methods provide the flexibility and power you need to interact with your HTML elements dynamically. By understanding and applying these techniques, you can enhance your web applications and create more interactive user experiences.