৫ অক্টোবর, ২০২২
পড়তে মিনিট লাগতে পারে

জাভাস্ক্রিপ্ট ডম ম্যানিপুলেশনঃ জাভাস্ক্রিপ্ট আর ডম

শেয়ার করুনঃ

ডম(DOM) বা অন্যকথায় ডকুমেন্ট অবজেক্ট মডেল(Document Object Model) হচ্ছে XML বা HTML ডকুমেন্ট এর জন্যে একটা প্রোগ্রামিং ইন্টারফেস। এখান এটা কি? এটা হচ্ছে আমাদের পেজ(HTML বা XML পেজ) কে এমনভাবে রিপ্রেজেন্ট করে যাতে এটাকে সহজেই প্রোগ্রামিং ল্যাংগুয়েজ দিয়ে মডিফাই করা যায়। আমরা আমাদের এই লেখায় বিশেষ করে HTML পেজের সাথে ডমে ইন্টার‍্যাকশন দেখবো।

আমরা যখন একটা ওয়েবপেজ HTML এ লিখি তখন এটা আমরা ব্রাউজার দিয়ে দেখতে পারি। আবার চাইলে পেজ সোর্স থেকে সরাসরি HTML কোডগুলোও দেখতে পারি। মূলত আমরা ব্রাউজারে যেটা দেখি আর পেজ সোর্সে যা দেখা যায় দুইটাই এক। কিন্তু এখানে ডম ঠিক এই ডকুমেন্টটাকেই অবজেক্ট ওরিয়েন্টেডভাবে রিপ্রেজেন্ট করে যাতে আমরা ডমের সাহায্যে এই পেজের সাথে ইন্ট্যার‍্যাক্ট করতে পারি। এখন এই ইন্টার‍্যাকশানটা একটা প্রোগ্রামিং ল্যাংগুয়েজ বা জাভাস্ক্রিপ্ট দিয়েই করা হয়। এখন ডম যেহেতু অবজেক্ট রিপ্রেজেন্টশন, তো সেখানেও আমাদের জাভাস্ক্রিপ্ট এর অন্যান্য অবজেক্ট এর মতোই প্রপার্টি, মেথড থাকে। যেগুলোর সাহায্যে আমরা আমাদের পেজের সবকিছু অ্যাক্সেস করতে পারি, প্রয়োজনে মডিফাই করতে পারি সহজেই।

এখন এই ডম একেক ব্রাউজারে একেকরকমভাবে ইমপ্লিমেন্ট করা থাকতে পারে। কিন্তু তারপরেও স্ট্যান্ডার্ড মেইন্টেইন করার জন্যে বেশীরভাগ মেজর ব্রাউজারগুলোই The W3C DOM এবং WHATWG DOM এর স্ট্যান্ডার্ড মেইন্টেইন করে। তাই যেকোনো ব্রাউজারেই একটা মেথড কাজ করলে সেটা বাকী সব ব্রাউজারে করবে কিনা সেটা যাচাই করে নেওয়া ভালো। তবে আমি আমার এই লেখায় স্ট্যান্ডার্ড মেইন্টেইন করেই।

আপনি হয়তো শুনে থাকবেন জাভাস্ক্রিপ্ট দিয়ে একটা HTML পেজকে ডায়নামিক করা যায়। এখানে ডম যেহেতু আমাদের পেজের সাথে কাজ করার জন্যে মেথড অ্যাড করে দেয়, তাই আমরা সহজেই চাইলে একটা HTML পেজের উপর কিছু কাজ করতে পারিঃ

  • নতুন ইলিমেন্ট তৈরী করা
  • আগের কোনো ইলিমেন্ট রিমুভ করা
  • আগের কোনো ইলিমেন্ট মডিফাই করা
  • অ্যাট্রিবিউটস মডিফাই করা, অ্যাড করা, রিমুভ করা
  • স্টাইলিং অ্যাড করা, রিমুভ করা, মডিফাই করা
  • পেজে ইভেন্ট তৈরী করা, যে এরকম কোনো কিছু ঘটলে পেজের উপর একটা নির্দিষ্ট অ্যাকশন পারফর্ম করা
  • নির্দিষ্ট কোনো ইলিমেন্ট এর উপর ইভেন্ট তৈরী করা, যে এই ইলিমেন্ট এর উপর এমন কিছু ঘটলে আমরা অমুক অ্যাকশন নিতে চাই।

জাভস্ক্রিপ্ট এ ডম ম্যানিপুলেশনের জন্যে জেকোয়েরী লাইব্রেরী অনেক ব্যবহৃত হয়ে থাকে। জেকোয়েরীর কাজ হচ্ছে জাভাস্ক্রিপ্ট এর বিল্ট-ইন ডম ম্যানিপুলেশনের মেথড আর প্রপার্টিগুলো যাতে আরো সহজে, ছোটো করে মনে রাখা যায় এমন কিছু মেথড অ্যাড করা।

আপনাকে জেকোয়েরী ব্যবহার করতে হবে নাঃ জেকোয়েরী দিয়ে যে কাজটা আপনি করবেন, সেইম কাজটাই আপনি পিউর জাভাস্ক্রিপ্ট দিয়েও করতে পারবেন। আর আমাদের বেশীরভাগ ক্ষেত্রেই তত বেশী কাজ করতে হয় না ডম ম্যানিপুলেশনে, সেক্ষেত্রে জেকোয়ীর মতো হিউজ একটা লাইব্রেরী মাত্র দুই একটা মেথড আর সুবিধার জন্যে অ্যাড না করাই ভালো। কারণ ক্লাইন্ট-সাইডে এক-দুই কেবি বেশী ফাইল সাইজও আপনার টোটাল সাইটের পারফর্মেন্সের উপর প্রভাব ফেলতে পারে। সেখানে জেকোয়েরী মোটামোটি অনেক বড় একটা লাইব্রেরী। তাই জেকোয়েরী অ্যাড না করে আপনি পিউর জাভাস্ক্রিপ্ট দিয়েই কাজ সেরে ফেলতে পারবেন। যেমন এই ওয়েবসাইটে জেকোয়েরীর বিভিন্ন মেথডের বিপরীতে পিউর জাভাস্ক্রিপ্ট দিয়ে কিভাবে সেইম কাজটা করবেন সেগুলোর একটা লিস্ট দেওয়া আছে।

বিশেষ নোটঃ নোড জেএস এ যেহেতু এরকম পেজ বা ডকুমেন্ট এর কোনো ব্যাপার নাই, তাই নোড জেএস ডম পাবেন না। এটা শুধুমাত্র আপনার ব্রাউজারেই অ্যাক্সেস পাবেন। তাই এই সিরিজের সব লেখা শুধুমাত্র ব্রাউজার স্পেসেফিক।

ট্যাগঃ
শেয়ার করুনঃ

ক্রমানুসারে এই জাভাস্ক্রিপ্ট সিরিজঃ

জাভাস্ক্রিপ্ট ব্যাসিক
জাভাস্ক্রিপ্টঃ কি, কেন, কখন? জাভাস্ক্রিপ্টঃ কোথায় এবং কিভাবে ইউজ করা হয়? জাভাস্ক্রিপ্টঃ ব্যাসিক ক্রোম ডেভেলপার কন্সোল জাভাস্ক্রিপ্টঃ ভ্যারিয়েবল এবং ডাটা টাইপ জাভাস্ক্রিপ্টঃ অপারেটর নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ কন্ডিশনাল স্টেটমেন্ট নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ লুপ নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ অ্যারে নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ ব্যাসিক অবজেক্ট জাভাস্ক্রিপ্টঃ ব্যাসিক ফাংশন জাভাস্ক্রিপ্টঃ স্টেটমেন্ট আর এক্সপ্রেশন জাভাস্ক্রিপ্টঃ ড্রাই প্রিন্সিপ্যাল জাভাস্ক্রিপ্টঃ নাকি ইকমাস্ক্রিপ্ট? জাভাস্ক্রিপ্টঃ বিহ্যাইন্ড দ্যা সীন জাভাস্ক্রিপ্টঃ হোইস্টিং(Hoisting) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ স্কোপ(Scope) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ক্লোজারস(Closures) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ইফি, Immediately Invoked Function Expressions (IIFE)
জাভাস্ক্রিপ্ট অ্যাডভান্স
জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ call(), bind() এবং apply() মেথড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ অবজেক্ট ওরিয়েন্টেড জাভাস্ক্রিপ্ট জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ফাংশন কন্সট্রাকটর(Constructor) এবং ‘new’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট অ্যাডভান্সঃ স্ট্রিক্ট (Strict) মোড
জাভাস্ক্রিপ্ট ইএস ৬(ES6)
জাভাস্ক্রিপ্ট ইএস ৬(ES6): নতুন কি আছে? জাভাস্ক্রিপ্ট ইএস ৬(ES6): let এবং const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করা জাভাস্ক্রিপ্ট ইএস ৬(ES6):ইফি (Immediately Invoked Function Expressions) জাভাস্ক্রিপ্ট ইএস ৬(ES6): টেমপ্লেট লিটারেল(Template Literal) ও স্ট্রিং মেথড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারো (Arrow) ফাংশন ও লেক্সিক্যাল(Lexical) ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারে জাভাস্ক্রিপ্ট ইএস ৬(ES6): স্প্রেড(Spread) অপারেটর জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডি-স্ট্রাকচারিং (Destructuring) জাভাস্ক্রিপ্ট ইএস ৬(ES6): রেস্ট(Rest) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডিফল্ট(Default) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ম্যাপ (Map) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস (Class) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস ও ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট ইএস ৬(ES6): সব ইনভারোমেন্ট এ ইএস৬
নিত্যদিনের জাভাস্ক্রিপ্ট
নিত্যদিনের জাভাস্ক্রিপ্টঃ ফার্স্ট ক্লাস ফাংশন ও হাইয়ার অর্ডার ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ map(), filter() ও reduce() নিত্যদিনের জাভাস্ক্রিপ্টঃ some() ও every() মেথড নিত্যদিনের জাভাস্ক্রিপ্টঃ অবজেক্ট এ লুপ চালানো নিত্যদিনের জাভাস্ক্রিপ্টঃ ডট নোটেশন এবং ব্র্যাকেট নোটেশন নিত্যদিনের জাভাস্ক্রিপ্টঃ ম্যাথ (Math) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেট (Date) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ লজিক্যাল অপারেটর অর (।।) এবং অ্যান্ড (&&) নিত্যদিনের জাভাস্ক্রিপ্টঃ কন্ডিশনাল/টার্নারি (Ternary) অপারেটর নিত্যদিনের জাভাস্ক্রিপ্টঃ রেগুলার এক্সপ্রেশন (Regular Expression) নিত্যদিনের জাভাস্ক্রিপ্টঃ এরর হ্যান্ডলিং (Error Handling) নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেভেলপার কন্সোল (Console) নিত্যদিনের জাভাস্ক্রিপ্টঃ অ্যাসিনক্রোনাস (Asynchronous) নিত্যদিনের জাভাস্ক্রিপ্টঃ কলব্যাক(Callback) ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ প্রমিস (Promise) নিত্যদিনের জাভাস্ক্রিপ্টঃ async এবং await