জাভাস্ক্রিপ্ট গেটএলিমেন্টবাইআইডি(JavaScript getElementById Tutorial in Bangla)
getElementById()
ডকুমেন্ট অবজেক্টের একটা মেথড। এটা দিয়ে একটা এইচটিএমএল ডকুমেন্টের যেকোন
এলিমেন্টে একসেস নেয়া যায়। এই মেথড ১টি প্যারামিটার সমর্থন করে সেটা হচ্ছে
Id : Id এর জায়গায় যেকোন স্ট্রিং দিতে হবে যেটা কোন এলিমেন্টের id হবে।
মেথডটি লিখতে হয় এভাবে
document.getElementById('anyId');
এই মেথড যে আইডি প্যারামিটার হিসেবে দিবেন সেটা খুজবে এবং খুজে পেলে একটা অবজেক্ট রিটার্ন করে। যদি অনকেগুলির সাথে মিলে তাহলেও শুধু প্রথমটির জন্য অবজেক্ট টি রিটার্ন করবে। আইডি খুজে না পেলে null রিটার্ন করবে।
** যে অবজেক্ট রিটার্ন করবে সেটাতে জাভাস্ক্রিপ্টের বিভিন্ন প্রোপার্টিজ ব্যবহার করা যাবে যেমন value প্রোপার্টিজ কিংবা innerHTML ইত্যাদি।
প্রয়োগ দেখুন
** getContent() একটি ফাংশন তৈরী করেছি এবং এখানে getElementById() ব্যবহার করে content1 আইডিধারী ডিভের কনটেন্ট innerHTML প্রোপার্টি দিয়ে এলার্টের মাধ্যমে দেখিয়েছি।
** এইজটিএমএল এ একটা বাটন তৈরী করে সেখানে onclick ইভেন্ট হ্যান্ডলার ব্যবহার করে ক্লিক ইভেন্টে getContent() ফাংশন কল করেছি।
ডকুমেন্টের এলিমেন্টে একসেস ছাড়াও এই মেথড ফর্ম ভেলিডেশনে খুব ব্যবহার হয়। যেমন যে ফর্ম এলিমেন্টের মান একসেস করতে চান সেটাতে আইডি দিয়ে document.getElementById('elementId').value এভাবে দিলে মান পেয়ে যাবেন।
value প্রোপার্টিজ ব্যবহার করে ফর্ম ভেলিডেশন আমরা এর আগে অন্য টিউটোরিয়ালে দেখিয়েছি।
Id : Id এর জায়গায় যেকোন স্ট্রিং দিতে হবে যেটা কোন এলিমেন্টের id হবে।
মেথডটি লিখতে হয় এভাবে
document.getElementById('anyId');
এই মেথড যে আইডি প্যারামিটার হিসেবে দিবেন সেটা খুজবে এবং খুজে পেলে একটা অবজেক্ট রিটার্ন করে। যদি অনকেগুলির সাথে মিলে তাহলেও শুধু প্রথমটির জন্য অবজেক্ট টি রিটার্ন করবে। আইডি খুজে না পেলে null রিটার্ন করবে।
** যে অবজেক্ট রিটার্ন করবে সেটাতে জাভাস্ক্রিপ্টের বিভিন্ন প্রোপার্টিজ ব্যবহার করা যাবে যেমন value প্রোপার্টিজ কিংবা innerHTML ইত্যাদি।
01.<!DOCTYPE html>02.<html>03. 04.<head>05.<script type='text/javascript'>06.function getContent() {07.var content = document.getElementById('content1');08.alert('The content of the first DIV element is = ' + content.innerHTML);09.}10.</script>11.</head>12. 13.<body>14.<div id="content1">Div #1</div>15.<div id="content2">Div #2</div>16.<div id="content3">Div #3</div>17.<input type="button" value="Show Content" onclick="getContent()"> 18. 19.</body>20. 21.</html>** getContent() একটি ফাংশন তৈরী করেছি এবং এখানে getElementById() ব্যবহার করে content1 আইডিধারী ডিভের কনটেন্ট innerHTML প্রোপার্টি দিয়ে এলার্টের মাধ্যমে দেখিয়েছি।
** এইজটিএমএল এ একটা বাটন তৈরী করে সেখানে onclick ইভেন্ট হ্যান্ডলার ব্যবহার করে ক্লিক ইভেন্টে getContent() ফাংশন কল করেছি।
ডকুমেন্টের এলিমেন্টে একসেস ছাড়াও এই মেথড ফর্ম ভেলিডেশনে খুব ব্যবহার হয়। যেমন যে ফর্ম এলিমেন্টের মান একসেস করতে চান সেটাতে আইডি দিয়ে document.getElementById('elementId').value এভাবে দিলে মান পেয়ে যাবেন।
value প্রোপার্টিজ ব্যবহার করে ফর্ম ভেলিডেশন আমরা এর আগে অন্য টিউটোরিয়ালে দেখিয়েছি।
0 মন্তব্য(গুলি):
Post a Comment