Md. Rony

Posted on Aug 27 • Updated on Sep 2

জাভাস্ক্রিপ্ট DOM (ডকুমেন্ট অবজেক্ট মডেল)

ভূমিকা:
এই কোর্সে আমরা জাভাস্ক্রিপ্টের মাধ্যমে কীভাবে DOM (ডকুমেন্ট অবজেক্ট মডেল) এর সাথে ইন্টার‌্যাক্ট করা যায় তা শিখব। DOM হলো একটি ওয়েব পেজের HTML বা XML ডকুমেন্টের স্ট্রাকচার, যা জাভাস্ক্রিপ্টের মাধ্যমে পরিবর্তন, ম্যানিপুলেট ও আপডেট করা সম্ভব। এই ক্লাসটি বেসিক থেকে অ্যাডভান্সড লেভেল পর্যন্ত ডিজাইন করা হয়েছে।

DOM এর পরিচিতি:

টপিক:

DOM কি?
DOM এর স্ট্রাকচার
জাভাস্ক্রিপ্ট এবং DOM এর মধ্যে সম্পর্ক

উদাহরণ:

HTML কোড এবং কীভাবে ব্রাউজার সেই HTML কোডকে DOM এ রূপান্তর করে।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

ব্যাখ্যা:

এই HTML ফাইলটি একটি ডকুমেন্টের স্ট্রাকচার তৈরি করেছে, যা ব্রাউজার DOM এ রূপান্তর করে।

DOM এ এলিমেন্ট সিলেকশন:

টপিক:

DOM থেকে এলিমেন্ট সিলেক্ট করার পদ্ধতি

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

উদাহরণ:

HTML পেজ থেকে id, class, এবং tag এর মাধ্যমে এলিমেন্ট সিলেক্ট করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Selection</title>
</head>
<body>
    <h1 id="header">Welcome to DOM Manipulation</h1>
    <p class="content">This is a paragraph.</p>
    <p class="content">This is another paragraph.</p>

    <script>
        // getElementById
        const header = document.getElementById('header');
        console.log(header);

        // getElementsByClassName
        const paragraphs = document.getElementsByClassName('content');
        console.log(paragraphs);

        // getElementsByTagName
        const allParagraphs = document.getElementsByTagName('p');
        console.log(allParagraphs);

        // querySelector
        const firstParagraph = document.querySelector('.content');
        console.log(firstParagraph);

        // querySelectorAll
        const allContent = document.querySelectorAll('.content');
        console.log(allContent);
    </script>
</body>
</html>

ব্যাখ্যা:

এই উদাহরণে বিভিন্ন পদ্ধতি ব্যবহার করে DOM থেকে এলিমেন্ট সিলেক্ট করা হয়েছে।

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

টপিক:

1.এলিমেন্ট এর কন্টেন্ট পরিবর্তন

innerHTML
textContent
innerText

2.নতুন এলিমেন্ট যুক্ত করা

createElement()
appendChild()

3.এলিমেন্ট রিমুভ করা

removeChild()

উদাহরণ:

HTML এলিমেন্টের টেক্সট পরিবর্তন করা, নতুন এলিমেন্ট যোগ করা, এবং বিদ্যমান এলিমেন্ট রিমুভ করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>
    <h1 id="header">Original Heading</h1>
    <p id="para">Original paragraph text.</p>

    <script>
        // Changing the content
        const header = document.getElementById('header');
        header.innerHTML = 'Updated Heading';

        const para = document.getElementById('para');
        para.textContent = 'Updated paragraph text.';

        // Adding a new element
        const newPara = document.createElement('p');
        newPara.textContent = 'This is a new paragraph added to the DOM.';
        document.body.appendChild(newPara);

        // Removing an element
        const oldPara = document.getElementById('para');
        document.body.removeChild(oldPara);
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে DOM এর মধ্যে থাকা HTML এলিমেন্টগুলোর কন্টেন্ট আপডেট করতে হয়, নতুন এলিমেন্ট যোগ করতে হয়, এবং এলিমেন্ট রিমুভ করতে হয়।

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

টপিক:

1.ইভেন্ট কি?

2.ইভেন্ট হ্যান্ডলার যোগ করা

addEventListener()

3.ইভেন্টের ধরন

click, mouseover, mouseout, keydown, ইত্যাদি

উদাহরণ:

ইভেন্ট হ্যান্ডলার যোগ করা এবং ইভেন্টের উপর ভিত্তি করে DOM ম্যানিপুলেশন করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <p id="message"></p>

    <script>
        const button = document.getElementById('clickMe');
        const message = document.getElementById('message');

        button.addEventListener('click', function() {
            message.textContent = 'Button clicked!';
        });

        button.addEventListener('mouseover', function() {
            message.textContent = 'Mouse is over the button!';
        });

        button.addEventListener('mouseout', function() {
            message.textContent = '';
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এই উদাহরণে আমরা ইভেন্ট হ্যান্ডলার ব্যবহার করে কীভাবে ইভেন্টের উপর ভিত্তি করে DOM ম্যানিপুলেশন করতে পারি তা শিখেছি।

DOM ট্রাভার্সাল

টপিক:

1.প্যারেন্ট এলিমেন্ট খুঁজে বের করা

parentNode

2.চাইল্ড এলিমেন্ট খুঁজে বের করা

childNodes
firstChild
lastChild

3.সিবলিংস খুঁজে বের করা

nextSibling
previousSibling

উদাহরণ:

DOM এর মধ্যে নেভিগেট করা এবং বিভিন্ন এলিমেন্ট খুঁজে বের করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Traversal</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        const list = document.getElementById('list');

        // Parent Node
        console.log(list.parentNode);

        // Child Nodes
        console.log(list.childNodes);

        // First and Last Child
        console.log(list.firstChild);
        console.log(list.lastChild);

        // Siblings
        const firstItem = list.firstChild;
        console.log(firstItem.nextSibling);
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা DOM এর মধ্যে নেভিগেট করা এবং প্যারেন্ট, চাইল্ড এবং সিবলিংস এলিমেন্ট খুঁজে বের করার পদ্ধতি শিখেছি।

অ্যাডভান্সড DOM ম্যানিপুলেশন

টপিক:

1.ডাইনামিক স্টাইল পরিবর্তন

style প্রপার্টি

2.ক্লাস ম্যানিপুলেশন

classList.add()
classList.remove()
classList.toggle()

উদাহরণ:

DOM এর এলিমেন্টের স্টাইল পরিবর্তন করা এবং ক্লাস যোগ/রিমুভ করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced DOM Manipulation</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="text">Hover over this text to change its style.</p>

    <script>
        const text = document.getElementById('text');

        text.addEventListener('mouseover', function() {
            text.style.color = 'blue';
            text.classList.add('highlight');
        });

        text.addEventListener('mouseout', function() {
            text.style.color = '';
            text.classList.remove('highlight');
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা এলিমেন্টের স্টাইল ডাইনামিকভাবে পরিবর্তন করা এবং ক্লাস ম্যানিপুলেশন করার পদ্ধতি শিখেছি।

ফর্ম ডেটা ম্যানিপুলেশন এবং ভ্যালিডেশন

টপিক:

1.ফর্ম ডেটা অ্যাক্সেস এবং ম্যানিপুলেশন
2.ফর্ম ভ্যালিডেশন

কাস্টম ভ্যালিডেশন মেসেজ
input ইভেন্ট
submit ইভেন্ট

উদাহরণ:

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

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Manipulation</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Submit</button>
    </form>
    <p id="error"></p>

    <script>
        const form = document.getElementById('myForm');
        const username = document.getElementById('username');
        const error = document.getElementById('error');

        form.addEventListener('submit', function(event) {
            if (username.value === '') {
                error.textContent = 'Username is required';
                event.preventDefault();
            } else {
                error.textContent = '';
            }
        });

        username.addEventListener('input', function() {
            if (username.value !== '') {
                error.textContent = '';
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে ফর্মের ডেটা ম্যানিপুলেট এবং ভ্যালিডেশন করা যায়।

অ্যাডভান্সড ইভেন্ট হ্যান্ডলিং এবং ডেলিগেশন

টপিক:

1.ইভেন্ট ডেলিগেশন
2.বাবলিং এবং ক্যাপচারিং
3.কাস্টম ইভেন্ট

উদাহরণ:

ইভেন্ট ডেলিগেশন ব্যবহার করে কিভাবে ইভেন্ট ম্যানেজ করতে হয় এবং কাস্টম ইভেন্ট কিভাবে তৈরি করা যায়।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        const list = document.getElementById('list');

        list.addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert(event.target.textContent);
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে ইভেন্ট ডেলিগেশন এবং বাবলিং ম্যানেজ করতে হয়।

Top comments (12)

Sabbir MMS • Sep 2

Nice and Attractive! 💥

Basic ea arektu clear hoye gelo.

Erokom clear conscious aro kichu documentation provide korle valo hoy inshallah. ❤
Sathe output embeds kore dile aro easy to understand hobe jodio ei documentation ta porei output imagine korte perechi.

Custom Map(); niye ekta in detail documentation dewar request roilo.