Uddeshyo | Student Super App

13. DOM Manipulation (Select Elements)

📘 কনসেপ্ট (থিওরি)

DOM (Document Object Model) হলো জাভাস্ক্রিপ্ট যেভাবে HTML কে দেখে। জাভাস্ক্রিপ্ট HTML ডকুমেন্টের সব এলিমেন্ট অ্যাক্সেস ও পরিবর্তন করতে পারে।

এলিমেন্ট পরিবর্তন করতে প্রথমে তা সিলেক্ট করতে হয়। সিলেক্ট করার মেথড:

1. document.getElementById("idName") — ID দিয়ে একটি এলিমেন্ট সিলেক্ট করে
2. document.querySelector(".className") — CSS সিলেক্টরের সাথে মেলা প্রথম এলিমেন্ট সিলেক্ট করে
3. document.querySelectorAll("p") — CSS সিলেক্টরের সাথে মেলা সব এলিমেন্ট সিলেক্ট করে

দ্রষ্টব্য: যেহেতু আমাদের কোড এডিটর শুধু কনসোল আউটপুট দেখায়, আপনি এখানে আসল UI পরিবর্তন দেখতে পাবেন না, তবে সিনট্যাক্স বোঝা খুবই জরুরি।

💡 উদাহরণ

এলিমেন্ট সিলেক্ট করা (সিনট্যাক্স উদাহরণ):

// HTML: Welcome
const heading = document.getElementById("title");
console.log(heading);

// HTML: Hello

const paragraph = document.querySelector(".text");

// HTML: Item 1
Item 2

const listItems = document.querySelectorAll("li");
// listItems এর উপর forEach দিয়ে লুপ করা যায়

🎯 আপনার কাজ (প্র্যাকটিস)

getElementById ব্যবহার করে "submit-btn" id যুক্ত এলিমেন্ট সিলেক্ট করার সিনট্যাক্স লিখুন এবং button নামের const ভেরিয়েবলে রাখুন। ভেরিয়েবলটি লগ করুন।

main.javascript

OUTPUT

Run your code to see the output here...