इस अध्याय में, हम सीखेंगे कि कैसे जावा स्क्रिप्ट का उपयोग करके DOM में मौजूद HTML एलिमेंट्स के कंटेंट और एट्रिब्यूट्स को बदला जा सकता है। यह ज्ञान आपको वेब पेज को डायनामिक और इंटरएक्टिव बनाने में मदद करेगा।
एलिमेंट का टेक्स्ट बदलना (Changing Element Text)
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Changing Text Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
let titleElement = document.getElementById("title");
titleElement.innerHTML = "Welcome to JavaScript!";
}
</script>
</body>
</html>HTML कंटेंट को बदलना (Changing HTML Content)
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Changing HTML Content Example</title>
</head>
<body>
<div id="content">
<p>This is a paragraph.</p>
</div>
<button onclick="changeHTML()">Change HTML</button>
<script>
function changeHTML() {
let contentElement = document.getElementById("content");
contentElement.innerHTML = "<p>This is updated HTML content.</p>";
}
</script>
</body>
</html>एलिमेंट्स के एट्रिब्यूट्स को बदलना (Changing Attributes of Elements)
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Changing Attributes Example</title>
</head>
<body>
<img id="image" src="image1.jpg" alt="Image 1">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
let imageElement = document.getElementById("image");
imageElement.src = "image2.jpg";
imageElement.alt = "Image 2";
}
</script>
</body>
</html>स्टाइल और क्लासेस को बदलना (Changing Styles and Classes)
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Changing Styles and Classes Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">This is a paragraph.</p>
<button onclick="changeStyle()">Change Style</button>
<button onclick="toggleClass()">Toggle Class</button>
<script>
function changeStyle() {
let textElement = document.getElementById("text");
textElement.style.color = "blue";
textElement.style.fontSize = "20px";
}
function toggleClass() {
let textElement = document.getElementById("text");
textElement.classList.toggle("highlight");
}
</script>
</body>
</html>इस अध्याय में, हमने सीखा कि कैसे DOM में मौजूद एलिमेंट्स के कंटेंट और एट्रिब्यूट्स को जावा स्क्रिप्ट का उपयोग करके बदला जा सकता है। अगले अध्याय में, हम DOM में एलिमेंट्स जोड़ने और हटाने के तरीकों के बारे में जानेंगे।
