HTML উপাদান সনাক্তকরণ
প্রায়শই, জাভাস্ক্রিপ্টের সাথে, আপনি HTML উপাদানগুলিকে ম্যানিপুলেট করতে চান৷
এটি করার জন্য, আপনাকে প্রথমে উপাদানগুলি খুঁজে বের করতে হবে। এটি করার বিভিন্ন উপায় রয়েছে:
- আইডি দ্বারা এইচটিএমএল উপাদান সনাক্তকরণ
- ট্যাগ নাম দ্বারা HTML উপাদান সনাক্তকরণ
- ক্লাস নাম দ্বারা HTML উপাদান সনাক্তকরণ
- CSS নির্বাচকদের সাথে HTML উপাদান সনাক্ত করা
- HTML অবজেক্ট সংগ্রহের মাধ্যমে এইচটিএমএল উপাদান সনাক্ত করা
আইডি দ্বারা একটি HTML উপাদান সনাক্তকরণ
DOM-এ একটি HTML উপাদান সনাক্ত করার সবচেয়ে সহজ উপায় হল এলিমেন্ট আইডি ব্যবহার করা।
এই উদাহরণটি id="intro" সহ উপাদানটি খুঁজে পায়:
উদাহরণ
const element = document.getElementById("intro");যদি উপাদানটি পাওয়া যায়, পদ্ধতিটি উপাদানটিকে একটি বস্তু হিসাবে (উপাদানে) প্রদান করে।
যদি উপাদানটি পাওয়া না যায় তবে উপাদানটিতে নাল থাকে।
ট্যাগ নাম দ্বারা HTML উপাদান সনাক্তকরণ
এই উদাহরণটি সমস্ত <p> উপাদান খুঁজে পায়:
উদাহরণ
const element = document.getElementsByTagName("p");এই উদাহরণটি id="main" সহ উপাদান খুঁজে পায় এবং তারপর "main"-এর ভিতরে সমস্ত <p> উপাদান খুঁজে পায়:
উদাহরণ
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");ক্লাস নাম দ্বারা HTML উপাদান সনাক্তকরণ
আপনি যদি একই শ্রেণীর নামের সাথে সমস্ত HTML উপাদান খুঁজে পেতে চান তবে getElementsByClassName() ব্যবহার করুন।
এই উদাহরণটি class="intro" সহ সমস্ত উপাদানের একটি তালিকা প্রদান করে।
উদাহরণ
const x = document.getElementsByClassName("intro");CSS নির্বাচকদের সাথে HTML উপাদান সনাক্ত করা
querySelector() পদ্ধতি
উদাহরণ
<html>
<body>
<p class="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.querySelector(".demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>querySelectorAll() পদ্ধতি
উদাহরণ
<html>
<body>
<p class="demo">One</p>
<p class="demo">Two</p>
<script>
// Access a paragraph Element
const myItems = document.querySelectorAll(".demo");
// Change the content of the Element
myItems[0].innerHTML = "First";
</script>
</body>
</html>সাধারণ ভুল
দ্রষ্টব্য:
- getElementById() এ `#` ব্যবহার করা হচ্ছে:
ত্রুটি: "#demo"
ঠিক আছে: "demo" - যে querySelector() ভুলে যাওয়া শুধুমাত্র প্রথম ম্যাচ ফেরত দেয়
আপনি যদি একটি নির্দিষ্ট CSS নির্বাচক (আইডি, শ্রেণির নাম, প্রকার, বৈশিষ্ট্য, বৈশিষ্ট্যের মান, ইত্যাদি) মেলে এমন সমস্ত HTML উপাদান খুঁজে পেতে চান, তাহলে querySelectorAll() পদ্ধতি ব্যবহার করুন।
এই উদাহরণটি class="intro" সহ সমস্ত <p> উপাদানের একটি তালিকা প্রদান করে।
উদাহরণ
const x = document.querySelectorAll("p.intro");HTML অবজেক্ট সংগ্রহের মাধ্যমে এইচটিএমএল উপাদান সনাক্ত করা
এই উদাহরণটি ফর্ম সংগ্রহে id="frm1" সহ ফর্ম উপাদান খুঁজে পায় এবং সমস্ত উপাদান মান প্রদর্শন করে:
উদাহরণ
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "
";
}
document.getElementById("demo").innerHTML = text;নিম্নলিখিত HTML অবজেক্ট (এবং অবজেক্ট সেট) অ্যাক্সেসযোগ্য:
document.anchors
সমস্ত অ্যাঙ্কর ফেরত দেয়
document.body
শরীরের উপাদান প্রদান করে
document.documentElement
একটি HTML উপাদান প্রদান করে
document.embeds
সমস্ত এম্বেড উপাদান প্রদান করে
document.forms
সমস্ত ফর্ম উপাদান প্রদান করে
document.head
হেড এলিমেন্ট রিটার্ন করে
document.images
সমস্ত চিত্র উপাদান প্রদান করে
document.links
href বৈশিষ্ট্য সহ সমস্ত উপাদান প্রদান করে
document.scripts
সমস্ত স্ক্রিপ্ট উপাদান প্রদান করে
document.title
শিরোনাম উপাদান প্রদান করে