Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট


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


DOM এর মৌলিক ধারণা

DOM গঠন

DOM গঠন একটি গাছের মতো কাঠামোতে থাকে যেখানে মূল ডকুমেন্ট হলো রুট, এবং এর অধীনে বিভিন্ন নোডস রয়েছে যেমন এলিমেন্ট, এট্রিবিউট, এবং টেক্সট নোডস।

HTML ডকুমেন্টের DOM কাঠামো

নিচে একটি সাধারণ HTML ডকুমেন্ট এবং তার DOM কাঠামোর উদাহরণ দেওয়া হলো:

উদাহরণ


<!DOCTYPE html>
<html>
<head>
    <title>আমার ওয়েবপেজ</title>
</head>
<body>
    <h1>স্বাগতম</h1>
    <p id="intro">এই প্যারাগ্রাফটি একটি উদাহরণ।</p>
    <button onclick="changeText()">প্যারাগ্রাফ পরিবর্তন করুন</button>
</body>
</html>

কোড এডিটর


উপরের HTML ডকুমেন্টের DOM কাঠামো কিছুটা এরকম হবে।

উদাহরণ

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── h1
│       ├── p (id="intro")
│       └── button


কোড এডিটর



DOM ম্যানিপুলেশন

জাভাস্ক্রিপ্ট ব্যবহার করে DOM ম্যানিপুলেট করার বিভিন্ন পদ্ধতি রয়েছে। এখানে কিছু মৌলিক বিষয় নিয়ে আলোচনা করা হলো।

এলিমেন্ট নির্বাচন

জাভাস্ক্রিপ্ট ব্যবহার করে HTML ডকুমেন্ট থেকে এলিমেন্ট নির্বাচন করা যায়। এতে কয়েকটি পদ্ধতি রয়েছে, যা নিম্মরুপ।

নিচে এগুলোর উদাওরন দেকুন।

উদাহরণ


// getElementById ব্যবহার করে
var header = document.getElementById('header');

// querySelector ব্যবহার করে
var paragraph = document.querySelector('p');

// querySelectorAll ব্যবহার করে
var buttons = document.querySelectorAll('button');

কোড এডিটর



এলিমেন্টের বৈশিষ্ট্য পরিবর্তন

জাভাস্ক্রিপ্ট ব্যবহার করে এলিমেন্টের বৈশিষ্ট্য পরিবর্তন করা যায়। নিচে এর উদাওরন দেকুন।

উদাহরণ


// টেক্সট পরিবর্তন
var paragraph = document.getElementById('intro');
paragraph.textContent = 'নতুন টেক্সট';

// এট্রিবিউট পরিবর্তন
var button = document.querySelector('button');
button.setAttribute('class', 'btn-primary');

// স্টাইল পরিবর্তন
button.style.backgroundColor = 'blue';
button.style.color = 'white';

কোড এডিটর



নতুন এলিমেন্ট যোগ করা

নতুন এলিমেন্ট তৈরি এবং যুক্ত করা যায়। নিচে এর উদাওরন দেকুন।

উদাহরণ


// নতুন এলিমেন্ট তৈরি করা
var newElement = document.createElement('div');
newElement.textContent = 'আমি নতুন এলিমেন্ট।';

// একটি বিদ্যমান এলিমেন্টে যুক্ত করা
var container = document.getElementById('container');
container.appendChild(newElement);


কোড এডিটর



এলিমেন্ট মুছে ফেলা

একটি এলিমেন্ট DOM থেকে মুছে ফেলা যায়। নিচে এর উদাওরন দেকুন।

উদাহরণ


var elementToRemove = document.getElementById('removeMe');
elementToRemove.parentNode.removeChild(elementToRemove);

কোড এডিটর



DOM ইভেন্ট হ্যান্ডলিং

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

উদাহরণ


var button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('বাটন ক্লিক করা হয়েছে!');
});

কোড এডিটর


ইভেন্ট অবজেক্ট

ইভেন্ট হ্যান্ডলার একটি ইভেন্ট অবজেক্ট প্রদান করে যা ইভেন্ট সম্পর্কে বিস্তারিত তথ্য ধারণ করে। নিচে এর উদাওরন দেকুন।

উদাহরণ


document.querySelector('button').addEventListener('click', function(event) {
    console.log('ইভেন্ট টাইপ:', event.type);
    console.log('টারের এলিমেন্ট:', event.target);
});

কোড এডিটর



উদাহরণ




কোড এডিটর



উন্নত DOM ম্যানিপুলেশন

DOM ফ্র্যাগমেন্টস

DOM ফ্র্যাগমেন্টস হল একটি সংকলন যা DOM এ একাধিক এলিমেন্ট একসাথে যোগ করার জন্য ব্যবহার করা যায়।

উদাহরণ


var fragment = document.createDocumentFragment();

var div1 = document.createElement('div');
div1.textContent = 'ফ্র্যাগমেন্টের প্রথম এলিমেন্ট';
fragment.appendChild(div1);

var div2 = document.createElement('div');
div2.textContent = 'ফ্র্যাগমেন্টের দ্বিতীয় এলিমেন্ট';
fragment.appendChild(div2);

document.body.appendChild(fragment);

কোড এডিটর


ক্লোনিং এলিমেন্ট

একটি এলিমেন্টের ক্লোন তৈরি এবং যুক্ত করার উদাহরণ:

উদাহরণ


var original = document.getElementById('original');
var clone = original.cloneNode(true); // true means deep clone
document.body.appendChild(clone);

কোড এডিটর



DOM এবং ফর্ম

ফর্ম এলিমেন্টগুলো DOM এ বিভিন্নভাবে পরিচালিত হতে পারে। নিচে একটি উদাওরন দেকুন জেকানে, ফর্মের মান অ্যাক্সেস করা যায়।

উদাহরণ


var input = document.querySelector('input[name="username"]');
var value = input.value;
console.log('ইনপুট মান:', value);

কোড এডিটর


ফর্ম সাবমিট হ্যান্ডলিং করার জন্য নিচের কোড গুলো বাবয়ার করতে পারি।

উদাহরণ


document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // সাবমিট হ্যান্ডলিং থেকে পেজ রিফ্রেশ বন্ধ করা
    var username = document.querySelector('input[name="username"]').value;
    alert('নাম: ' + username);
});

কোড এডিটর



DOM অপ্টিমাইজেশন

জাভাস্ক্রিপ্টের পরিবর্তে সিএসএস ক্লাস ব্যবহার করে স্টাইল পরিবর্তন করা হতে পারে আরও কার্যকর। নিচে এর সিএসএস ক্লাস ব্যবহার করে স্টাইল পরিবর্তন করা অয়েচে।

উদাহরণ


var element = document.querySelector('.my-element');
element.classList.add('active'); // ক্লাস যোগ করা
element.classList.remove('active'); // ক্লাস মুছে ফেলা

কোড এডিটর


একাধিক এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করার পরিবর্তে একটি প্যারেন্ট এলিমেন্টে ইভেন্ট লিসেনার যোগ করা। নিচে এর একটি উদাওরন দেকুন।

উদাহরণ


document.querySelector('#parent').addEventListener('click', function(event) {
    if (event.target.matches('button')) {
        alert('বাটন ক্লিক করা হয়েছে!');
    }
});

কোড এডিটর



DOM এবং পারফরম্যান্স

ভার্চুয়াল DOM - অ্যাপ্লিকেশনগুলির পারফরম্যান্স উন্নত করতে ভার্চুয়াল DOM ব্যবহার করা হয়। ভার্চুয়াল DOM হল DOM এর একটি ভার্চুয়াল কপি যা দ্রুত ম্যানিপুলেশন এবং আপডেটের জন্য ব্যবহার করা হয়।

পেইজ রেন্ডারিং অপ্টিমাইজেশন - ইনলাইন স্ক্রিপ্ট এবং স্টাইলের ব্যবহার কমিয়ে পেইজ রেন্ডারিং অপ্টিমাইজ করা যায়। অ্যাসিনক্রোনাস স্ক্রিপ্ট লোডিং এবং লেজি লোডিং প্রযুক্তি ব্যবহার করা হয়।

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