DOM CRUD অপারেশনসমূহ
Document Object Model (DOM) হলো ব্রাউজার যেভাবে HTML-কে উপস্থাপন করে। এটি প্রতিটি এলিমেন্ট, অ্যাট্রিবিউট এবং টেক্সট অংশকে একটি অবজেক্টে রূপান্তরিত করে। JavaScript এই অবজেক্টগুলো ব্যবহার করে স্ক্রিনে আপনি যা দেখেন তা পরিবর্তন করে।
যখন আপনি একটি বাটনে ক্লিক করেন এবং পেজটি রিফ্রেশ না করেই আপডেট হয়, তখন JavaScript আসলে DOM পরিবর্তন করছে।
আপনি এই মেথডগুলোর মাধ্যমে CRUD (Create, Read, Update, Delete) অপারেশন করতে পারেন।
- এলিমেন্ট অ্যাক্সেস করা (Read) কোনো কিছু পরিবর্তন করতে হলে, আপনাকে প্রথমে সেটি খুঁজে বের করতে হবে। এই মেথডগুলো ব্যবহার করুন:
getElementById()getElementsByClassName()getElementsByTagName()querySelector()querySelectorAll()
- এলিমেন্ট তৈরি করা (Create) আপনি JavaScript ব্যবহার করে নতুন HTML এলিমেন্ট তৈরি করতে পারেন।
createElement("tagName")মেমোরিতে এলিমেন্টটি তৈরি করে।append()একটি প্যারেন্টের শেষে কন্টেন্ট যোগ করে।appendChild()একটি সিঙ্গেল নোডকে শেষ চাইল্ড হিসেবে যোগ করে।prepend()একটি প্যারেন্টের শুরুতে কন্টেন্ট যোগ করে।before()একটি নির্দিষ্ট আইটেমের আগে একটি এলিমেন্ট ইনসার্ট করে।after()একটি নির্দিষ্ট আইটেমের পরে একটি এলিমেন্ট ইনসার্ট করে।insertBefore()একটি নির্দিষ্ট চাইল্ডের আগে একটি এলিমেন্ট স্থাপন করে।
নোট: একটি এলিমেন্ট যতক্ষণ না আপনি পেজে যোগ করছেন, ততক্ষণ এটি মেমোরিতে থাকে।
- এলিমেন্ট আপডেট করা (Update) আপনি এই প্রপার্টিগুলো ব্যবহার করে বিদ্যমান কন্টেন্ট পরিবর্তন করতে পারেন:
innerText: শুধুমাত্র দৃশ্যমান টেক্সট পরিবর্তন করে।textContent: লুকানো টেক্সটসহ সমস্ত টেক্সট পরিবর্তন করে।innerHTML: কন্টেন্ট পরিবর্তন করে এবং আপনাকে HTML ট্যাগ যোগ করার সুযোগ দেয়।
- অ্যাট্রিবিউট নিয়ে কাজ করা (Update) অ্যাট্রিবিউটগুলো এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
setAttribute(name, value): একটি অ্যাট্রিবিউট সেট বা পরিবর্তন করে।getAttribute(name): একটি অ্যাট্রিবিউটের ভ্যালু সংগ্রহ করে।removeAttribute(name): একটি অ্যাট্রিবিউট মুছে ফেলে।hasAttribute(name): একটি অ্যাট্রিবিউট আছে কি না তা পরীক্ষা করে।
প্রো টিপ: পুরনো ক্লাসগুলো না মুছে নতুন ক্লাস যোগ করতে classList.add() ব্যবহার করুন। setAttribute() পুরো ভ্যালুটিকে প্রতিস্থাপন করে।
- এলিমেন্ট রিমুভ করা (Delete) পেজ থেকে একটি এলিমেন্ট মুছে ফেলতে ব্যবহার করুন:
remove()
একটি CRUD ফ্লো-এর সারসংক্ষেপ:
- Create:
createElement() - Update:
innerText = "New text" - Add:
appendChild() - Delete:
remove()
এই মেথডগুলোতে দক্ষতা অর্জন করলে আপনি টু-ডু লিস্ট (to-do list) বা ক্যালকুলেটরের মতো ইন্টারঅ্যাক্টিভ অ্যাপ তৈরি করতে পারবেন। ফ্রন্ট-এন্ড ডেভেলপমেন্টের জন্য এটি একটি অত্যন্ত গুরুত্বপূর্ণ দক্ষতা।
উৎস: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka