DOM CRUD অপারেশনসমূহ

Document Object Model (DOM) হলো আপনার HTML-এর জন্য একটি ট্রি স্ট্রাকচার (tree structure)। জাভাস্ক্রিপ্ট এটি ব্যবহার করে একটি পেজের প্রতিটি এলিমেন্ট, অ্যাট্রিবিউট এবং টেক্সট অ্যাক্সেস ও পরিবর্তন করতে পারে।

যখন আপনি একটি বাটনে ক্লিক করেন এবং পেজটি রিফ্রেশ না করেই আপডেট হয়, তখন আপনি DOM ম্যানিপুলেশন সরাসরি দেখতে পান।

নিচে CRUD (Create, Read, Update, Delete) অপারেশন করার পদ্ধতি দেওয়া হলো।

১. Read: এলিমেন্ট অ্যাক্সেস করা

আপনার পেজে এলিমেন্ট খুঁজে পেতে এই মেথডগুলো ব্যবহার করুন:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

২. Create: নতুন এলিমেন্ট তৈরি করা

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে নতুন HTML এলিমেন্ট তৈরি করতে পারেন।

  • createElement(): মেমোরিতে একটি নতুন ট্যাগ তৈরি করে।
  • append(): প্যারেন্ট এলিমেন্টের শেষে কন্টেন্ট যোগ করে।
  • appendChild(): একটি সিঙ্গেল নোডকে শেষ চাইল্ড হিসেবে যোগ করে।
  • prepend(): প্যারেন্ট এলিমেন্টের শুরুতে কন্টেন্ট যোগ করে।
  • before(): একটি নির্দিষ্ট টার্গেটের আগে একটি এলিমেন্ট ইনসার্ট করে।
  • after(): একটি নির্দিষ্ট টার্গেটের পরে একটি এলিমেন্ট ইনসার্ট করে।
  • insertBefore(): একটি বিদ্যমান চাইল্ডের আগে একটি নতুন এলিমেন্ট স্থাপন করে।

৩. Update: কন্টেন্ট পরিবর্তন করা

ইউজার স্ক্রিনে যা দেখে তা পরিবর্তন করুন:

  • innerText: শুধুমাত্র দৃশ্যমান টেক্সট আপডেট করে।
  • textContent: লুকানো টেক্সটসহ সমস্ত টেক্সট আপডেট করে।
  • innerHTML: কন্টেন্ট আপডেট করে এবং আপনাকে HTML ট্যাগ যোগ করার সুযোগ দেয়।

৪. Attributes: প্রোপার্টি ম্যানেজ করা

অ্যাট্রিবিউট আপনার ট্যাগে অতিরিক্ত তথ্য যোগ করে।

  • setAttribute(): একটি অ্যাট্রিবিউটের জন্য নতুন মান সেট করে। মনে রাখবেন, এটি পুরনো মানটিকে প্রতিস্থাপন করে।
  • getAttribute(): বর্তমান মানটি সংগ্রহ করে।
  • removeAttribute(): একটি অ্যাট্রিবিউট মুছে ফেলে।
  • hasAttribute(): একটি অ্যাট্রিবিউট আছে কি না তা পরীক্ষা করে।

প্রো টিপ: বর্তমান ক্লাসগুলো মুছে না ফেলে নতুন ক্লাস যোগ করতে classList.add() ব্যবহার করুন। কাস্টম অ্যাট্রিবিউটের জন্য setAttribute() ব্যবহার করুন।

৫. Delete: এলিমেন্ট রিমুভ করা

পেজ থেকে একটি এলিমেন্ট মুছে ফেলতে ব্যবহার করুন:

  • remove()

CRUD ফ্লো-এর সারসংক্ষেপ:

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

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

উৎস: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

ঐচ্ছিক লার্নিং কমিউনিটি: https://t.me/GyaanSetuAi