জাভাস্ক্রিপ্ট ডম ম্যানিপুলেশনঃ জাভাস্ক্রিপ্ট আর ডম
ডম(DOM) বা অন্যকথায় ডকুমেন্ট অবজেক্ট মডেল(Document Object Model) হচ্ছে XML বা HTML ডকুমেন্ট এর জন্যে একটা প্রোগ্রামিং ইন্টারফেস। এখান এটা কি? এটা হচ্ছে আমাদের পেজ(HTML বা XML পেজ) কে এমনভাবে রিপ্রেজেন্ট করে যাতে এটাকে সহজেই প্রোগ্রামিং ল্যাংগুয়েজ দিয়ে মডিফাই করা যায়। আমরা আমাদের এই লেখায় বিশেষ করে HTML পেজের সাথে ডমে ইন্টার্যাকশন দেখবো।
আমরা যখন একটা ওয়েবপেজ HTML এ লিখি তখন এটা আমরা ব্রাউজার দিয়ে দেখতে পারি। আবার চাইলে পেজ সোর্স থেকে সরাসরি HTML কোডগুলোও দেখতে পারি। মূলত আমরা ব্রাউজারে যেটা দেখি আর পেজ সোর্সে যা দেখা যায় দুইটাই এক। কিন্তু এখানে ডম ঠিক এই ডকুমেন্টটাকেই অবজেক্ট ওরিয়েন্টেডভাবে রিপ্রেজেন্ট করে যাতে আমরা ডমের সাহায্যে এই পেজের সাথে ইন্ট্যার্যাক্ট করতে পারি। এখন এই ইন্টার্যাকশানটা একটা প্রোগ্রামিং ল্যাংগুয়েজ বা জাভাস্ক্রিপ্ট দিয়েই করা হয়। এখন ডম যেহেতু অবজেক্ট রিপ্রেজেন্টশন, তো সেখানেও আমাদের জাভাস্ক্রিপ্ট এর অন্যান্য অবজেক্ট এর মতোই প্রপার্টি, মেথড থাকে। যেগুলোর সাহায্যে আমরা আমাদের পেজের সবকিছু অ্যাক্সেস করতে পারি, প্রয়োজনে মডিফাই করতে পারি সহজেই।
এখন এই ডম একেক ব্রাউজারে একেকরকমভাবে ইমপ্লিমেন্ট করা থাকতে পারে। কিন্তু তারপরেও স্ট্যান্ডার্ড মেইন্টেইন করার জন্যে বেশীরভাগ মেজর ব্রাউজারগুলোই The W3C DOM এবং WHATWG DOM এর স্ট্যান্ডার্ড মেইন্টেইন করে। তাই যেকোনো ব্রাউজারেই একটা মেথড কাজ করলে সেটা বাকী সব ব্রাউজারে করবে কিনা সেটা যাচাই করে নেওয়া ভালো। তবে আমি আমার এই লেখায় স্ট্যান্ডার্ড মেইন্টেইন করেই।
আপনি হয়তো শুনে থাকবেন জাভাস্ক্রিপ্ট দিয়ে একটা HTML পেজকে ডায়নামিক করা যায়। এখানে ডম যেহেতু আমাদের পেজের সাথে কাজ করার জন্যে মেথড অ্যাড করে দেয়, তাই আমরা সহজেই চাইলে একটা HTML পেজের উপর কিছু কাজ করতে পারিঃ
- নতুন ইলিমেন্ট তৈরী করা
- আগের কোনো ইলিমেন্ট রিমুভ করা
- আগের কোনো ইলিমেন্ট মডিফাই করা
- অ্যাট্রিবিউটস মডিফাই করা, অ্যাড করা, রিমুভ করা
- স্টাইলিং অ্যাড করা, রিমুভ করা, মডিফাই করা
- পেজে ইভেন্ট তৈরী করা, যে এরকম কোনো কিছু ঘটলে পেজের উপর একটা নির্দিষ্ট অ্যাকশন পারফর্ম করা
- নির্দিষ্ট কোনো ইলিমেন্ট এর উপর ইভেন্ট তৈরী করা, যে এই ইলিমেন্ট এর উপর এমন কিছু ঘটলে আমরা অমুক অ্যাকশন নিতে চাই।
জাভস্ক্রিপ্ট এ ডম ম্যানিপুলেশনের জন্যে জেকোয়েরী লাইব্রেরী অনেক ব্যবহৃত হয়ে থাকে। জেকোয়েরীর কাজ হচ্ছে জাভাস্ক্রিপ্ট এর বিল্ট-ইন ডম ম্যানিপুলেশনের মেথড আর প্রপার্টিগুলো যাতে আরো সহজে, ছোটো করে মনে রাখা যায় এমন কিছু মেথড অ্যাড করা।
আপনাকে জেকোয়েরী ব্যবহার করতে হবে নাঃ জেকোয়েরী দিয়ে যে কাজটা আপনি করবেন, সেইম কাজটাই আপনি পিউর জাভাস্ক্রিপ্ট দিয়েও করতে পারবেন। আর আমাদের বেশীরভাগ ক্ষেত্রেই তত বেশী কাজ করতে হয় না ডম ম্যানিপুলেশনে, সেক্ষেত্রে জেকোয়ীর মতো হিউজ একটা লাইব্রেরী মাত্র দুই একটা মেথড আর সুবিধার জন্যে অ্যাড না করাই ভালো। কারণ ক্লাইন্ট-সাইডে এক-দুই কেবি বেশী ফাইল সাইজও আপনার টোটাল সাইটের পারফর্মেন্সের উপর প্রভাব ফেলতে পারে। সেখানে জেকোয়েরী মোটামোটি অনেক বড় একটা লাইব্রেরী। তাই জেকোয়েরী অ্যাড না করে আপনি পিউর জাভাস্ক্রিপ্ট দিয়েই কাজ সেরে ফেলতে পারবেন। যেমন এই ওয়েবসাইটে জেকোয়েরীর বিভিন্ন মেথডের বিপরীতে পিউর জাভাস্ক্রিপ্ট দিয়ে কিভাবে সেইম কাজটা করবেন সেগুলোর একটা লিস্ট দেওয়া আছে।
বিশেষ নোটঃ নোড জেএস এ যেহেতু এরকম পেজ বা ডকুমেন্ট এর কোনো ব্যাপার নাই, তাই নোড জেএস ডম পাবেন না। এটা শুধুমাত্র আপনার ব্রাউজারেই অ্যাক্সেস পাবেন। তাই এই সিরিজের সব লেখা শুধুমাত্র ব্রাউজার স্পেসেফিক।
আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!
