Document Object Model ( DOM ) full explained

DOM কি?

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

DOM দিয়ে কি কি কাজ করা যায়?

DOM দিয়ে নিম্নলিখিত কাজগুলি করা যায়:

1. এলিমেন্ট এক্সেস এবং মডিফাই করা: ডম ব্যবহার করে ওয়েব পেজের সকল এলিমেন্টে এক্সেস করা যায়, উপাদানগুলির প্রপার্টি মডিফাই করা যায় এবং নতুন উপাদান সৃষ্টি করা যায়।

2. ইভেন্ট হ্যান্ডলিং: ওয়েব পেজে ঘটনাগুলির (যেমন: ক্লিক, পাস ওভার, কীবোর্ড ইভেন্ট) সাথে সম্পর্কিত হ্যান্ডলার ফাংশন সংযোজন করার জন্য ডম ব্যবহার করা হয়।

3. কনটেন্ট মডিফিকেশন: টেক্সট, ইমেজ, স্টাইল, ক্লাস এবং অন্যান্য প্রোপার্টি মডিফাই করে ওয়েব পেজের কনটেন্ট পরিবর্তন করা যায়।

4. ডাইনামিক পেজ ক্রিয়েশন: ডম ব্যবহার করে জাভাস্ক্রিপ্ট বা অন্য স্ক্রিপ্টিং ভাষা ব্যবহার করে নতুন উপাদান তৈরি করে পেজে ডাইনামিক কনটেন্ট যোগ করা যায়।

5. স্টাইল মডিফিকেশন: ডম দিয়ে স্টাইল প্রোপার্টি মডিফাই করে ওয়েব পেজের উপাদানের দৃশ্যমান আকার ও অবস্থা পরিবর্তন করা যায়।

6. ডকুমেন্ট ন্যাভিগেশন: ডম ব্যবহার করে ওয়েব পেজের নেভিগেশন বানানো, উপাদানের মধ্যে লিঙ্ক যোগ করা যায়।

7. পেজ ডাইনামিক মডিফিকেশন: ব্যবহারকারীর ইনপুট অনুযায়ী পেজে ডাইনামিক পরিবর্তন করার জন্য ডম ব্যবহার করা হয়, যেমন ইনপুট ভ্যালিডেশন, পেজে নতুন ডেটা প্রদর্শন ইত্যাদি। সংক্ষেপে, ডম একটি ওয়েব পেজের স্ট্রাকচার, কনটেন্ট এবং ইভেন্টগুলির প্রোগ্রামাত্বক অ্যাক্সেস এবং মডিফিকেশন সহায়ক ইন্টারফেস প্রদান করে।

কোন কোন ল্যাঙ্গুয়েজে DOM ব্যবহার করা যায় ?

DOM - ডকুমেন্ট অবজেক্ট মডেল মূলত বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজে ব্যবহার করা যায় তার মধ্যে কয়েকটা হলোঃ

1. JavaScript: JavaScript ডম ব্যবহার করার জন্য সবচেয়ে প্রয়োজনীয় ও সহজতম ল্যাঙ্গুয়েজ। ওয়েব পেজের ডম এক্সেস এবং মডিফাই করতে জাভাস্ক্রিপ্ট ব্যবহার করা হয়। মূলত আমরা জাভাস্ক্রিপ্ট ব্যবহার করেই DOM অ্যাপ্লাই করি ব্রাউজারে।

2. Python: Python একটি ডম ব্যবহার করতে ব্যবহারকৃত ল্যাঙ্গুয়েজ নয়, তবে কিছু লাইব্রেরি ব্যবহার করে ডম এক্সেস এবং মডিফাই করা সম্ভব। উদাহরণস্বরূপ, BeautifulSoup এবং lxml এমন লাইব্রেরি যেগুলি HTML ডকুমেন্টের ডম ব্যবহার করার সুবিধা প্রদান করে।

3. Ruby: Ruby এবং Ruby on Rails ফ্রেমওয়ার্কে DOM ব্যবহার করার জন্য একটি সম্ভাব্য লক্ষ্য নয়, তবে কিছু লাইব্রেরি ডম এক্সেস এবং মডিফাই করার জন্য ব্যবহার করা যায়।

মূলত, জাভাস্ক্রিপ্ট ( JS ) ডম ব্যবহার করার সবচেয়ে প্রাধান্যপূর্ণ ল্যাঙ্গুয়েজ, কারণ ওয়েব প্রোগ্রামিং এর জন্য তা সর্বাধিক সমর্থন প্রদান করে।

কিভাবে আমরা DOM ব্যবহার করবো ?

DOM ব্যবহার করার সামান্য উদাহরণ নিম্নে দেয়া হল:

1. এলিমেন্ট এক্সেস করা: ডম ব্যবহার করে একটি উপাদানে এক্সেস করার উদাহরণ দেখা যাক।

// HTML: 
<div id="myDiv">Hello, DOM!</div>

// JavaScript: 
const myElement = document.getElementById("myDiv"); 
console.log(myElement.textContent);

// Output: "Hello, DOM!"

2. এলিমেন্ট প্রোপার্টি মডিফাই করা: একটি উপাদানের প্রোপার্টি মডিফাই করার উদাহরণ দেখা যাক।

// HTML: 
<p id="myParagraph">This is a paragraph.</p>

// JavaScript: 
const myParagraph = document.getElementById("myParagraph"); 
myParagraph.textContent = "Updated paragraph text.";

3. ইভেন্ট হ্যান্ডলিং সংযোজন: একটি ইভেন্ট হ্যান্ডলার সংযোজন করার উদাহরণ দেখা যাক।

// HTML: 
<button id="myButton">Click me</button>

// JavaScript: 
const myButton = document.getElementById("myButton"); 
myButton.addEventListener("click", () => { 
alert("Button clicked!"); 
});

4. নতুন উপাদান সৃষ্টি করা: নতুন এলিমেন্ট তৈরি করার উদাহরণ দেখা যাক।

// JavaScript: 
const newElement = document.createElement("div"); 
newElement.textContent = "Newly created element"; 
document.body.appendChild(newElement);

5. স্টাইল প্রোপার্টি মডিফাই করা: উপাদানের স্টাইল প্রোপার্টি মডিফাই করার উদাহরণ দেখা যাক।

// HTML: 
<p id="myText">This is some text.</p>

// JavaScript: 
const myText = document.getElementById("myText"); 
myText.style.color = "red"; myText.style.fontSize = "20px";

এইভাবে, ডম ব্যবহার করে ওয়েব পেজে উপাদানে এক্সেস করা, উপাদানের প্রোপার্টি মডিফাই করা, ইভেন্ট হ্যান্ডলিং সংযোজন করা, নতুন উপাদান সৃষ্টি করা এবং উপাদানের স্টাইল প্রোপার্টি মডিফাই করা সম্ভব।

আশফাক আহমেদ

ফ্রন্ট ইন্ড ওয়েব ডেভেলপার