এইচটিএমএল এলিমেন্টকে কিভাবে খুজে বের করতে হয় এবং এক্সেস করতে হবে তা এই পেজে শিখতে পারবো।
প্রায়ই আপনি জাভাস্ক্রিপ্ট দ্বারা একটি পেজের এইচটিএমএল এলিমেন্টকে নিয়ে কাজ করতে চাইবেন।
সেটা করার জন্য আপনাকে প্রথমে এলিমেন্টটিকে খুঁজে বের করতে হবে। একটি এলিমেন্টকে খুঁজে বের করার কয়েকটি উপায় রয়েছেঃ
একটি এলিমেন্টকে ডোম এর ভেতর খুঁজে বের করার সবচেয়ে সহজ উপায় হলো এলিমেন্টের Id ব্যবহার করা।
নিচের উদাহরণে id="intro" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হল:
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3 id="heading">স্যাট একাডেমী</h3>
<p id="test"></p>
<script>
var el = document.getElementById("heading");
document.getElementById("test").innerHTML = el.innerHTML + " বাংলাদেশের বৃহত্তম ওয়েবসাইট।";
</script>
</body>
</html>
যদি এলিমেন্টটি খুঁজে পাওয়া যায় তাহলে মেথডটি এলিমেন্টকে অবজেক্ট হিসেবে রিটার্ন করবে।
যদি এলিমেন্টটি খুঁজে পাওয়া না যায় তাহলে el ভ্যারিয়েবলটি খালি থাকবে।
নিচের উদাহরণে সকল <p> এলিমেন্টকে খুঁজে বের করা হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>স্যাট একাডেমী!</p>
<p>বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByTagName</b> মেথড ব্যবহার করা হয়েছে।</p>
<p id="test"></p>
<script>
var el = document.getElementsByTagName("p");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>
</body>
</html>
নিচের এই উদাহরণটি প্রথমে id="main" যুক্ত এলিমেন্টকে খুঁজে বের করবে এবং তারপর "main" এর মাঝের সকল <p> এলিমেন্টকে খুঁজে বের করবেঃ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>স্যাট একাডেমী!</p>
<div id="main">
<p>বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByTagName</b> মেথড ব্যবহার করা হয়েছে।</p>
</div>
<p id="test"></p>
<script>
var mainEl = document.getElementById("main");
var el = mainEl.getElementsByTagName("p");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>
</body>
</html>
আপনি যদি একই নামের Class যুক্ত এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করতে চান তাহলে getElementsByClassName() ব্যবহার করুন।
নিচের এই উদাহরনটিতে class="para" যুক্ত সকল এলিমেন্টকে রিটার্ন করে।
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p class="para">স্যাট একাডেমী!</p>
<p class="para">বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByClassName</b> মেথড ব্যবহার করা হয়েছে।</p>
<p id="test"></p>
<script>
var el = document.getElementsByClassName("para");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>
</body>
</html>
Class এর নাম দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।
আপনি যদি নির্দিষ্ট সিএসএস সিলেক্টরযুক্ত(যেমনঃ id, class , type, এট্রিবিউট, এট্রিবিউটের ভ্যালু ইত্যাদি) সকল এইচটিএমএল এলিমেন্টকে খুঁজতে চান তবে querySelectorAll() মেথডটি ব্যবহার করুন।
নিচের এই উদাহরনটিতে class="para" যুক্ত সকল <p> এলিমেন্টকে রিটার্ন করে।
kt_satt_skill_example_id=1349
querySelectorAll() মেথড দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।
নিচের এই উদাহরণটিতে ফর্ম কালেকশনের মধ্য থেকে id="myForm" যুক্ত ফর্ম এলিমেন্টকে খুঁজে বের করে এবং সকল এলিমেন্টের ভ্যালু প্রদর্শন করে:
kt_satt_skill_example_id=1350
নিচের এই এইচটিএমএল অবজেক্টকেও এক্সেস করা যায়ঃ
kt_satt_skill_example_id=1352
kt_satt_skill_example_id=1354
kt_satt_skill_example_id=1355
kt_satt_skill_example_id=1356
kt_satt_skill_example_id=1359
kt_satt_skill_example_id=1361
kt_satt_skill_example_id=1365
kt_satt_skill_example_id=1366
kt_satt_skill_example_id=1367
kt_satt_skill_example_id=1368
Read more
or
