3.3. getElement এবং Query সিলেক্টর্স এর পার্থক্য
এই দুটি পদ্ধতির মধ্যে সুস্পষ্ট মিল হল যে তারা উভয়ই একটি ওয়েব পৃষ্ঠা থেকে উপাদান নির্বাচন করে। তারা বিভিন্ন উপায়ে তা করে।
getElement
getElementById পদ্ধতি ব্যবহার করে, আপনি শুধুমাত্র তার ID দ্বারা একটি উপাদান নির্বাচন করতে পারেন। শুধুমাত্র একটি উপাদান নির্বাচন করতে পারেন। getElementByClassName আপনাকে শুধুমাত্র তার class নামের উপর ভিত্তি করে যেকোনো উপাদান নির্বাচন করতে দেয়। getElementsByTagName() পদ্ধতি একটি নির্দিষ্ট ট্যাগ নামের সাথে সমস্ত উপাদানের একটি সংগ্রহ প্রদান করে।
document.getElementById(“demo”).style.color = “red”;
const collection = document.getElementsByClassName(“example color”);
document.getElementsByTagName(“p”)[0].innerHTML = “Hello World!”;
querySelector
একটি querySelector দিয়ে, আপনি একটি CSS Selector উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে পারেন। querySelectorAll দিয়ে, আপনি সমস্ত উপাদান নির্বাচন করতে পারেন। querySelector(“css-selectors”) আপনাকে CSS Selector প্যাটার্নের উপর ভিত্তি করে যেকোনো উপাদান নির্বাচন করতে দেয়।
document.querySelector(“.example”).style.backgroundColor = “red”;
document.querySelectorAll(“.example”).style.backgroundColor = “red”;
- নির্দিষ্ট একটি ইলিমেন্ট কে আইডি দ্বারা সিলেক্ট করা এবং তাতে ভ্যালু এসাইন করা।
<p id=“demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello World”;
</script>
- getElementById() ব্যবহার করে কোন ইলিমেন্ট এর কালার পরিবর্তন করা।
const myElement = document.getElementById(“demo”);
myElement.style.color = “red”;
- Get all elements with class=”demo”:
const collection = document.getElementsByClassName(“demo”);
- Get all elements with both the “demo” and “color” classes:
const collection = document.getElementsByClassName(“democolor”);
- Get all elements with the name “firstName”:
let elements = document.getElementsByName(“firstName”);
- Number of elements with name=”cats”:
let num = document.getElementsByName(“cats”).length;
- একটি ডকুমেন্ট এর সকল ইলিমেন্ট খুঁজে বের করুন।
- একটি ডকুমেন্ট থেকে “li” TagName এর সকল ইলিমেন্ট খুঁজে বের করুন।
- একটি ইনপুট বক্স এর ভ্যালু এসাইন করুন।
- getElementById() ব্যবহার করে একটি বাটন এর কালার পরিবর্তন করুন।
- querySelector() ব্যবহার করে একটি ইনপুট বক্স এর ব্যাকগ্রাউন্ড কালার পরিবর্তন করুন।
