---

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

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 উপাদানটির পাঠ্য সামগ্রী পুনরুদ্ধার করে।
• এই পদ্ধতিটি সহজ পাঠ্য ধারণ করে এমন উপাদানগুলির জন্য উপযোগী।

উপসংহার

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