জেভাস্ক্রিপ্ট এইচটিএমএল ডম ইলেমেন্ট

এই চপ্তরে, HTML পাতায় এলইউএইচটিএম উপাদানগুলোকে অনুসন্ধান এবং ব্যবহার করার পদ্ধতি বর্ণনা করা হবে。

HTML উপাদান অনুসন্ধান

সাধারণত, JavaScript-এর মাধ্যমে, আপনি HTML উপাদানগুলোকে অপারেশন করতে হবে。

এই লক্ষ্যকে পূরণ করতে, প্রথমেই এই উপাদানগুলো অনুসন্ধান করতে হবে। এই কাজটি করার জন্য বেশ কয়েকটি পদ্ধতি রয়েছে:

  • id-র মাধ্যমে HTML উপাদান অনুসন্ধান
  • লিঙ্কটি অনুসন্ধান
  • CSS চিহ্নিতকারকের মাধ্যমে HTML উপাদান অনুসন্ধান
  • CSS চিহ্নিতকারকের মাধ্যমে HTML উপাদান অনুসন্ধান
  • HTML অবজেক্ট সংকলনের মাধ্যমে HTML উপাদান অনুসন্ধান

id-র মাধ্যমে HTML উপাদান অনুসন্ধান

ডম (DOM)-তে HTML উপাদান অনুসন্ধানকরার সর্বজনীনতম পদ্ধতি হল, id-এর মাধ্যমে

এই উদাহরণে id="intro"-র উপাদান অনুসন্ধান করা হয়:

ইনস্ট্যান্স

var myElement = document.getElementById("intro");

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

যদি উপাদান অনুসন্ধান করা যায়, এই পদ্ধতিটি উপাদানটিকে একটি অবজেক্ট হিসাবে ফিরাবে (myElement-তে)

যদি উপাদান অনুসন্ধান করা যায় না, myElement-এ null অন্তর্ভুক্ত হবে null。

লিঙ্কটি অনুসন্ধান

এই উদাহরণে সব উপাদান <p> উপাদান:

ইনস্ট্যান্স

var x = document.getElementsByTagName("p");

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এই উদাহরণে id="main"-র উপাদান অনুসন্ধান করা হয়, এবং "main"-র সমস্ত <p> উপাদান:

ইনস্ট্যান্স

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS চিহ্নিতকারকের মাধ্যমে HTML উপাদান অনুসন্ধান

আপনি কোনও একই class name-র সমস্ত HTML উপাদান অনুসন্ধান করতে হলে, এটা ব্যবহার করুন: getElementsByClassName()。

এই উদাহরণে class="intro"-র সমস্ত উপাদান তালিকা প্রত্যাহার করা হয়:

ইনস্ট্যান্স

var x = document.getElementsByClassName("intro");

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ইন্টারনেট এক্সলার সংস্করণ ৮ এবং তার আগের সংস্করণের জন্য প্রযোজ্য নয়。

CSS চিহ্নিতকারকের মাধ্যমে HTML উপাদান অনুসন্ধান

আপনি কোনও নির্দিষ্ট CSS চিহ্নিতকারক (id, class name, type, attribute, attribute value, ইত্যাদি) সহ সব এই এলইউএইচটিএম উপাদান অনুসন্ধান করতে হলে, এটা ব্যবহার করুন: querySelectorAll() পদ্ধতি

এই উদাহরণে class="intro"-র সব উপাদান <p> উপাদান তালিকা:

ইনস্ট্যান্স

var x = document.querySelectorAll("p.intro");

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

querySelectorAll() ইন্টারনেট এক্সলার সংস্করণ ৮ এবং তার আগের সংস্করণের জন্য প্রযোজ্য নয়。

এইচটিএমএল অবজেক্ট সিলেক্টর দ্বারা এইচটিএমএল অবজেক্ট অনুসন্ধান করুন

এই ইনস্ট্যান্সটি id="frm1" এর form ইলেকমেন্টটি যাচাই করে forms সংকেতসমূহে এবং সকল ইলেকমেন্টের মান দেখায়:

ইনস্ট্যান্স

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিম্নলিখিত এইচটিএমএল অবজেক্ট (এবং অবজেক্ট সংকেতসমূহ)ও প্রবেশ্য হয়: