What is DOM?
DOM কি তা বুঝতে হলে DOM এর D, O, M এই তিনটি অক্ষর কোথা থেকে এসেছে তা জানলেই আমার মনে হয় DOM এর সম্পর্কে ভালো একটা ধারণা হবে।
তাহলে এখন DOM এর প্রথম অক্ষর D সম্পর্কে আলোচনা করা যাকঃ
আমরা জানি, জাভাস্ক্রিপ্ট একটা ওয়েবপেজকে ইন্টারেক্টিভ বানায়। এখন যদি প্রশ্ন করা হয় কীভাবে ওয়েবপেইজকে সে ইন্টারেক্টিভ বানায়? জাভাস্ক্রিপ্ট dom কে মেনিপুলেট করে এই ইন্টারেক্টিভিটি যোগ করে।
একটা ওয়েব পেজের স্ট্রাকচার তৈরী করা হয় html এর মাধ্যমে। এখন আমরা যদি একটু লক্ষ করি, আমরা আমাদের কম্পিউটারে যত ধরনের ফাইল রাখি সব ফাইলকে আমরা ডকুমেন্ট বলে থাকি। যেমনঃ একটা টেক্সট ফাইল, ওয়ার্ড ফাইল, ইমেজ ফাইল ইত্যাদি। মানে সব ধরনের ফাইলই হচ্ছে ডকুমেন্ট। একইভাবে আমাদের এই ওয়েব পেজ যে html ফাইল থেকে এসেছে সেটাও একটা Document ফাইল। মূলত, Document এর এই D ই Dom এর D কে রিপ্রেজেন্ট করে।
এবার আসা যাক DOM এর O এর ব্যাপারে-
এখন এই যে index.html থেকে ওয়েবপেজটা লোড হচ্ছে। এই ফাইলের মধ্যে আমরা অনেক ধরনের element লিখি। যেমনঃ html, head, body, div, p ইত্যাদি। এই html element গুলোকে আমরা টেক্সট এর মতো লিখলেও এগুলা হচ্ছে মূলত জাভাস্ক্রিপ্ট এর অবজেক্ট। কারণ আমরা জানি, জাভাস্ক্রিপ্ট দিয়ে যদি কিছুকে মানিপুলেট করতে হয় মানে জাভাস্ক্রিপ্টকে যদি কোনো কিছু নিয়ে কাজ করতে হয় তবে সবকিছুকেই জাভাস্ক্রিপ্ট অবজেক্ট হিসেবে চিন্তা করে। সে অবজেক্ট ছাড়া কাউকে চিনতে পারে না। ধরি, div কে নিয়ে সে কাজ করতে চায় তবে সে div কে টেক্সট হিসেবে চিন্তা না করে অবজেক্ট হিসেবে চিন্তা করবে। যখনই অবজেক্ট হিসেবে চিন্তা করব তখন সব কিছুর কিছু প্রোপার্টি থাকবে কিছু মেথড থাকবে। যেন এই জিনিসটার উপর জাভাস্ক্রিপ্ট একটা কন্ট্রোল চলে আসে। আমরা যদিও html লেখার সময় টেক্সট এর মতো লিখি জাভাস্ক্রিপ্ট এদেরকে অবজেক্ট এ রূপান্তর করে নেয়। এখন এই Object এর O ই DOM এর O কে রিপ্রেজেন্ট করে।
এবার কথা বলা যাক M কে নিয়েঃ
আমরা যখন html ফাইল এর এলিমেন্ট গুলা লিখি তখন এলিমেন্ট গুলা একটা tree structure এর আকার ধারণ করে। এই ট্রি এর প্রথমে থাকে গ্লোবাল অবজেক্ট window। এরপর সেই অবজেক্ট এর ভিতরে আরো সাব অবজেক্ট ট্রি আকারে সাজানো থাকে। অনেকটা পাশের এই ইমেজের মতো। এই html এর element গুলার Tree structure কে বলা হয় Tree Model। মানে html এর tree structure model। আর এই Model থেকেই M আসছে।
এই হচ্ছে ছোট পরিসরে DOM এর ইতিহাস!
