DOM (Document Object Model) Manipulation Kya Hota Hai?

DOM Kya Hai?

DOM (Document Object Model) ek programming interface hai jo web browsers HTML documents ko represent karne ke liye use karte hain. Jab ek web page load hota hai, toh browser us page ka ek tree-like structure banata hai. Is tree ka har part ek node kehlata hai. DOM humein in nodes (elements, text, attributes) ko JavaScript se access aur modify karne ki power deta hai.

1. Selecting HTML Elements

Kisi bhi element ko manipulate karne se pehle, use select karna zaroori hai. JavaScript iske liye kai methods provide karta hai:

• getElementById('id'): Ek specific element ko uski ID se select karta hai.
• getElementsByClassName('class'): Ek specific class wale sabhi elements ko select karta hai.
• getElementsByTagName('tag'): Ek specific HTML tag wale sabhi elements ko select karta hai.
• querySelector('selector'): CSS selector ka use karke pehle matching element ko select karta hai.
• querySelectorAll('selector'): CSS selector se match hone wale sabhi elements ko select karta hai.

// Element ko ID se select karna
const heading = document.getElementById("main-heading");

// Class se select karna
const paragraphs = document.getElementsByClassName("intro-text");

// CSS selector se select karna
const firstButton = document.querySelector(".btn-primary");

2. Modifying Element Content

Element select karne ke baad, aap uska content change kar sakte hain.

innerHTML

Yeh property element ke andar ka HTML content get ya set karti hai.

const contentDiv = document.getElementById("content");
// Naya HTML content add karna
contentDiv.innerHTML = "<h2>New Title</h2><p>This is new content.</p>";

textContent

Yeh property sirf text content ko get ya set karti hai, HTML tags ko ignore karke.

const heading = document.getElementById("main-heading");
// Sirf text change karna
heading.textContent = "Welcome to Dynamic Web Pages";

3. Modifying Element Attributes & Styles

Aap elements ke attributes (jaise `src` ya `href`) aur CSS styles ko bhi change kar sakte hain.

Attributes Change Karna

const myImage = document.getElementById("main-image");
// Image ka source change karna
myImage.src = "new-image.jpg";

const myLink = document.getElementById("home-link");
// Link ka href change karna
myLink.href = "/new-page";

Styles Change Karna

const heading = document.getElementById("main-heading");
// Style change karna
heading.style.color = "blue";
heading.style.fontSize = "24px";
heading.style.backgroundColor = "#f0f0f0";

4. Adding and Deleting Elements

Naya Element Banana aur Add Karna

// 1. Ek naya <p> element banayein
const newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";

// 2. Use body me add karein
document.body.appendChild(newPara);

Element ko Remove Karna

const elementToRemove = document.getElementById("old-element");
elementToRemove.remove();

Key Takeaways

• DOM web page ka ek object-based representation hai.
• JavaScript ka use karke hum DOM ko manipulate kar sakte hain (elements add, change, ya remove karna).
• Elements ko select karne ke liye `getElementById`, `querySelector`, etc., ka use hota hai.
• Content ko `innerHTML` ya `textContent` se change kiya jaata hai.
• Attributes aur styles ko direct properties se modify kiya ja sakta hai.