জাভাস্ক্রিপ্ট ডকুমেন্ট অবজেক্ট মডেল (DOM) হলো একটি ওয়েব পেজের HTML এলিমেন্টগুলোর প্রতিনিধিত্ব। এটি একটি ইন্টারফেস যা দিয়ে ওয়েব পেজের কন্টেন্ট বা স্টাইল পরিবর্তন করা যায়।
ওয়েব পেজে রাইট ক্লিক করে 'Inspect' সিলেক্ট করলে DOM দেখা যায়। HTML এলিমেন্টগুলো ট্রি (tree) ডেটা স্ট্রাকচারের মত থাকে প্যারেন্ট এবং চাইল্ড নোড হিসেবে। চাইল্ড নেই এমন এলিমেন্টকে 'leaves' বলা হয়।
DOM-এ এলিমেন্ট সিলেক্ট করার পদ্ধতি
দুইভাবে এলিমেন্ট সিলেক্ট করা যায়: getElement মেথড এবং querySelector মেথড।
getElement মেথডগুলো
document.getElementsByTagName('p')→ HTMLCollection রিটার্ন করে (যেমন ৭টি<p>ট্যাগ)।document.getElementsByClassName('className')→ HTMLCollection রিটার্ন করে।document.getElementById('idName')→ একক এলিমেন্ট রিটার্ন করে (ID ইউনিক হওয়ায়)।
querySelector মেথডগুলো
querySelector() এবং querySelectorAll() ব্যবহার করতে ক্লাসের আগে ডট (.) এবং আইডির আগে হ্যাশ (#) দিতে হয়। querySelectorAll() NodeList রিটার্ন করে যাতে forEach() ব্যবহার করা যায়। HTMLCollection-এ forEach() কাজ করে না, কিন্তু Array.from() দিয়ে অ্যারে বানানো যায়।
উপসংহার
DOM একটি শক্তিশালী ইন্টারফেস যা HTML কে ট্রি স্ট্রাকচারে রিপ্রেজেন্ট করে। querySelector বা getElement মেথডগুলো ব্যবহার করে এলিমেন্ট সিলেক্ট করে জাভাস্ক্রিপ্ট দিয়ে ম্যানিপুলেট করা যায়।
