JavaScript DOM

📘 DOM Kya Hai?

Hindi: DOM ka full form Document Object Model hai. Browser HTML page ko ek structure ke form mein samajhta hai. JavaScript DOM ki help se is structure ke elements ko access aur change kar sakti hai.

English: DOM stands for Document Object Model. It allows JavaScript to access and modify HTML elements on a webpage.

💡 DOM Kyu Use Karte Hain?

DOM ki help se hum:

• HTML text change kar sakte hain
• Elements ko hide/show kar sakte hain
• CSS classes change kar sakte hain
• New elements create kar sakte hain
• Elements remove kar sakte hain
• User ke actions ke according page update kar sakte hain

1️⃣ getElementById()

Kisi HTML element ko uske id se select karne ke liye getElementById() use hota hai.

<h2 id="title">
    Welcome to OMI
</h2>

<script>

const title =
document.getElementById("title");

</script>

2️⃣ Text Change Karna

JavaScript se selected element ka text textContent ki help se change kar sakte hain.

<h2 id="title">
    Old Text
</h2>

<script>

const title =
document.getElementById("title");

title.textContent =
"New Text";

</script>

3️⃣ querySelector()

querySelector() se CSS selector ka use karke element select kar sakte hain.

<p class="message">
    Hello
</p>

<script>

const message =
document.querySelector(".message");

</script>

4️⃣ CSS Change Karna

JavaScript se kisi element ki CSS property bhi change ki ja sakti hai.

<h2 id="title">
    OMI
</h2>

<script>

const title =
document.getElementById("title");

title.style.color = "blue";
title.style.fontSize = "35px";

</script>

5️⃣ innerHTML

innerHTML se element ke andar ka HTML content change kiya ja sakta hai.

<div id="box">
    Old Content
</div>

<script>

const box =
document.getElementById("box");

box.innerHTML =
"<h2>Hello OMI</h2>";

</script>

6️⃣ classList

JavaScript se kisi element ki CSS class add ya remove karne ke liye classList use hota hai.

element.classList.add("active");

element.classList.remove("active");

element.classList.toggle("active");

toggle() class ko add/remove karne mein useful hota hai.

7️⃣ New Element Create Karna

JavaScript se new HTML element bhi create kiya ja sakta hai.

const newItem =
document.createElement("p");

newItem.textContent =
"New OMI Content";

document.body.appendChild(newItem);

💻 Complete DOM Example

Ab button click hone par heading ka text change karte hain.

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<h2 id="title">
    Welcome to OMI
</h2>

<button id="button">
    Change Text
</button>

<script>

const title =
document.getElementById("title");

const button =
document.getElementById("button");

button.addEventListener("click", function(){

    title.textContent =
    "OMI Website Development";

});

</script>

</body>

</html>

🌐 Real Website Mein DOM

Professional websites mein DOM ka use menus, login forms, buttons, popups, notifications, dashboards aur dynamic content ke liye hota hai.

button.addEventListener("click", function(){

    menu.classList.toggle("active");

});

⚠️ Important Note