JavaScript में DOM Manipulation क्या है? (Manipulation using DOM in JavaScript in Hindi)

JavaScript में DOM Manipulation क्या है? (Manipulation using DOM in JavaScript in Hindi)

परिचय

JavaScript में DOM Manipulation का उपयोग वेब पेज के HTML एलिमेंट्स को एक्सेस, बदलने (update), जोड़ने (add) और हटाने (delete) के लिए किया जाता है। DOM (Document Object Model) एक API (Application Programming Interface) है, जो वेब पेज को एक ट्री-स्ट्रक्चर में प्रस्तुत करता है, जिससे हम JavaScript के माध्यम से इसे नियंत्रित कर सकते हैं।

1. JavaScript से DOM में एलिमेंट्स को एक्सेस करना

JavaScript हमें DOM में मौजूद HTML एलिमेंट्स को एक्सेस करने के लिए कई तरीके प्रदान करता है:

1.1. getElementById()

यह किसी भी id वाले HTML एलिमेंट को एक्सेस करने के लिए उपयोग किया जाता है।

let heading = document.getElementById("main-heading");
console.log(heading.innerHTML);

1.2. getElementsByClassName()

यह एक class नाम के आधार पर सभी HTML एलिमेंट्स को एक्सेस करता है।

let elements = document.getElementsByClassName("paragraph");
console.log(elements[0].innerHTML);

1.3. getElementsByTagName()

यह किसी HTML टैग के आधार पर सभी एलिमेंट्स को एक्सेस करता है।

let allParagraphs = document.getElementsByTagName("p");
console.log(allParagraphs[0].innerHTML);

1.4. querySelector()

यह किसी CSS सेलेक्टर के आधार पर पहला मेल खाने वाला एलिमेंट एक्सेस करता है।

let para = document.querySelector(".paragraph");
console.log(para.innerHTML);

1.5. querySelectorAll()

यह सभी मेल खाने वाले एलिमेंट्स को एक्सेस करता है।

let allParas = document.querySelectorAll("p");
console.log(allParas[1].innerHTML);

2. JavaScript से DOM को अपडेट करना

2.1. innerHTML का उपयोग

किसी एलिमेंट के content को बदलने के लिए।

document.getElementById("main-heading").innerHTML = "नया टेक्स्ट!";

2.2. textContent का उपयोग

यह किसी HTML एलिमेंट का टेक्स्ट कंटेंट सेट करता है।

document.getElementById("main-heading").textContent = "यह एक नया शीर्षक है!";

2.3. setAttribute() और getAttribute()

HTML एलिमेंट्स के attributes को अपडेट या एक्सेस करने के लिए।

document.getElementById("myImage").setAttribute("src", "new-image.jpg");
console.log(document.getElementById("myImage").getAttribute("src"));

2.4. style प्रॉपर्टी का उपयोग

CSS को JavaScript के माध्यम से बदलने के लिए।

document.getElementById("main-heading").style.color = "red";
document.getElementById("main-heading").style.fontSize = "24px";

3. JavaScript से DOM में एलिमेंट जोड़ना (Add Elements)

3.1. createElement()

यह एक नया HTML एलिमेंट बनाता है।

let newPara = document.createElement("p");
newPara.textContent = "यह नया पैराग्राफ है।";
document.body.appendChild(newPara);

3.2. appendChild()

यह मौजूदा HTML एलिमेंट के अंदर एक नया एलिमेंट जोड़ता है।

let listItem = document.createElement("li");
listItem.textContent = "नया आइटम";
document.getElementById("myList").appendChild(listItem);

3.3. insertBefore()

यह किसी मौजूदा एलिमेंट से पहले एक नया एलिमेंट जोड़ता है।

let newItem = document.createElement("li");
newItem.textContent = "नया आइटम";
let list = document.getElementById("myList");
list.insertBefore(newItem, list.children[0]);

4. JavaScript से DOM से एलिमेंट हटाना (Remove Elements)

4.1. removeChild()

यह किसी एलिमेंट को हटाने के लिए उपयोग किया जाता है।

let list = document.getElementById("myList");
list.removeChild(list.children[0]);

4.2. remove()

यह किसी HTML एलिमेंट को सीधे हटाने के लिए उपयोग किया जाता है।

document.getElementById("main-heading").remove();

5. JavaScript में Event Handling

JavaScript DOM Manipulation में Events का एक महत्वपूर्ण योगदान होता है।

5.1. addEventListener()

यह किसी इवेंट (जैसे क्लिक, माउस ओवर) को हैंडल करने के लिए उपयोग किया जाता है।

document.getElementById("myButton").addEventListener("click", function() {
    alert("बटन क्लिक किया गया!");
});

5.2. onclick Event

document.getElementById("myButton").onclick = function() {
    alert("यह onclick इवेंट है!");
};

5.3. onmouseover और onmouseout Event

document.getElementById("box").onmouseover = function() {
    this.style.backgroundColor = "yellow";
};
document.getElementById("box").onmouseout = function() {
    this.style.backgroundColor = "white";
};

निष्कर्ष

JavaScript में DOM Manipulation का उपयोग वेब पेज को इंटरएक्टिव और डायनामिक बनाने के लिए किया जाता है। DOM को एक्सेस करने, अपडेट करने, नए एलिमेंट जोड़ने और हटाने की सुविधा JavaScript प्रदान करता है। इसके अलावा, इवेंट हैंडलिंग के माध्यम से उपयोगकर्ता की गतिविधियों को नियंत्रित किया जा सकता है।