ওয়েব ডেভেলপমেন্টের জগতে, এইচটিএমএল উপাদানগুলির সাথে মিথস্ক্রিয়া করা এবং তাদের মানগুলি বের করা একটি মৌলিক কাজ। আপনি একটি ফর্ম তৈরি করছেন, ডেটা আনছেন বা বিষয়বস্তু ম্যানিপুলেট করছেন না কেন, জাভাস্ক্রিপ্ট ব্যবহার করে উপাদানের মান কীভাবে পেতে হয় তা জানা অপরিহার্য। এই ব্লগ পোস্টে, আমরা এটি অর্জনের জন্য বিভিন্ন পদ্ধতি অন্বেষণ করব, যার প্রত্যেকটির নিজস্ব ব্যবহারের ক্ষেত্রে এবং সুবিধা রয়েছে।
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
বৈশিষ্ট্যটি তখন ইনপুট উপাদানের মান পেতে ব্যবহার করা হয়।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
বৈশিষ্ট্য ইনপুট উপাদানের মান পুনরুদ্ধার করে।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
নির্দিষ্ট শ্রেণীর নাম সহ উপাদানগুলির একটি সংগ্রহ প্রদান করে৷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
উপাদানের একটি সংগ্রহ প্রদান করে।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
বৈশিষ্ট্যের মান পুনরুদ্ধার করে।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.