इस अध्याय में, हम सीखेंगे कि कैसे जावा स्क्रिप्ट का उपयोग करके DOM में एलिमेंट्स जोड़े और हटाए जा सकते हैं। यह कौशल वेब पेजों को डायनामिक और इंटरएक्टिव बनाने के लिए आवश्यक है।
एलिमेंट बनाना और जोड़ना (Creating and Adding Elements)
जावा स्क्रिप्ट में document.createElement() का उपयोग करके आप नए एलिमेंट बना सकते हैं और उन्हें DOM में जोड़ सकते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Adding Elements Example</title>
</head>
<body>
<div id="container">
<p>This is an existing paragraph.</p>
</div>
<button onclick="addElement()">Add Element</button>
<script>
function addElement() {
// नया पैराग्राफ एलिमेंट बनाएं
let newParagraph = document.createElement("p");
// एलिमेंट के अंदर टेक्स्ट जोड़ें
newParagraph.innerHTML = "This is a new paragraph.";
// कंटेनर में नया एलिमेंट जोड़ें
let container = document.getElementById("container");
container.appendChild(newParagraph);
}
</script>
</body>
</html>एलिमेंट को हटाना (Removing Elements)
जावा स्क्रिप्ट में removeChild() का उपयोग करके आप DOM से एलिमेंट्स को हटा सकते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Removing Elements Example</title>
</head>
<body>
<div id="container">
<p id="paragraph">This is a paragraph to be removed.</p>
</div>
<button onclick="removeElement()">Remove Element</button>
<script>
function removeElement() {
// पैराग्राफ एलिमेंट को चुनें
let paragraph = document.getElementById("paragraph");
// पैराग्राफ का पैरेंट एलिमेंट चुनें
let container = document.getElementById("container");
// पैरेंट एलिमेंट से पैराग्राफ को हटाएं
container.removeChild(paragraph);
}
</script>
</body>
</html>एलिमेंट्स को क्लोन करना (Cloning Elements)
जावा स्क्रिप्ट में cloneNode() का उपयोग करके आप किसी मौजूदा एलिमेंट को क्लोन कर सकते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Cloning Elements Example</title>
</head>
<body>
<div id="container">
<p id="original">This is the original paragraph.</p>
</div>
<button onclick="cloneElement()">Clone Element</button>
<script>
function cloneElement() {
// मौजूदा पैराग्राफ एलिमेंट को चुनें
let original = document.getElementById("original");
// एलिमेंट को क्लोन करें
let clone = original.cloneNode(true);
// क्लोन किए गए एलिमेंट को कंटेनर में जोड़ें
let container = document.getElementById("container");
container.appendChild(clone);
}
</script>
</body>
</html>DOM में नेविगेशन (Navigation in DOM)
DOM में नेविगेट करने के लिए, आप विभिन्न प्रॉपर्टीज़ का उपयोग कर सकते हैं, जैसे parentNode, childNodes, firstChild, lastChild, nextSibling, और previousSibling।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>DOM Navigation Example</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="navigateDOM()">Navigate DOM</button>
<script>
function navigateDOM() {
// सूची के पहले बच्चे को चुनें
let list = document.getElementById("list");
let firstItem = list.firstChild;
// पहले बच्चे का अगला सिबलिंग चुनें
let secondItem = firstItem.nextSibling;
// दूसरे आइटम का टेक्स्ट बदलें
secondItem.innerHTML = "This is the modified second item.";
}
</script>
</body>
</html>इस अध्याय में, हमने सीखा कि कैसे जावा स्क्रिप्ट का उपयोग करके DOM में एलिमेंट्स जोड़े और हटाए जा सकते हैं, उन्हें क्लोन किया जा सकता है और DOM में नेविगेट किया जा सकता है। अगले अध्याय में, हम DOM इवेंट्स के बारे में जानेंगे।
