JavaScript’s Document Object Model (DOM) turns static web pages into dynamic experiences. At its core, the DOM represents every element on a page as an object you can read or modify. These four practical exercises demonstrate how to harness DOM manipulation to create responsive, interactive interfaces.
Change Text with a Single Click
The simplest way to start exploring DOM interaction is by updating text content on user action. This exercise demonstrates how to replace the heading text when a button is clicked.
<body>
<h1 id="greeting">Welcome to JavaScript</h1>
<button id="toggleBtn">Change text</button>
<script>
const heading = document.getElementById("greeting");
function updateText() {
heading.textContent = "DOM manipulation in action";
}
document.getElementById("toggleBtn").addEventListener("click", updateText);
</script>
</body>The key here is using document.getElementById() to select the heading element and then updating its textContent property. Modern JavaScript prefers event listeners over inline onclick handlers for cleaner separation of concerns.
Toggle Lights: From Off to On
This classic exercise brings visual feedback to DOM manipulation. By switching an image source, users see a bulb turning on or off—ideal for understanding conditional logic in JavaScript.
<body>
<img id="bulb" src="bulb-off.png" alt="Light bulb">
<button id="toggleLight">Toggle bulb</button>
<script>
const bulbImage = document.getElementById("bulb");
const toggleButton = document.getElementById("toggleLight");
toggleButton.addEventListener("click", () => {
if (bulbImage.src.includes("bulb-off.png")) {
bulbImage.src = "bulb-on.png";
toggleButton.textContent = "Turn off";
} else {
bulbImage.src = "bulb-off.png";
toggleButton.textContent = "Turn on";
}
});
</script>
</body>The logic checks the current image source and flips between two states. This teaches conditional rendering, a fundamental concept in interactive web development.
Build a Simple Counter
Counters are everywhere—from like buttons to form submissions. This exercise implements a three-button system: increment, decrement, and reset.
<body>
<h1>Counter: <span id="counter">0</span></h1>
<button id="increment">+</button>
<button id="decrement">−</button>
<button id="reset">Reset</button>
<script>
let count = 0;
const counterDisplay = document.getElementById("counter");
document.getElementById("increment").addEventListener("click", () => {
count++;
counterDisplay.textContent = count;
});
document.getElementById("decrement").addEventListener("click", () => {
if (count > 0) {
count--;
counterDisplay.textContent = count;
}
});
document.getElementById("reset").addEventListener("click", () => {
count = 0;
counterDisplay.textContent = count;
});
</script>
</body>Each button controls the counter independently. The decrement button includes a safeguard to prevent negative values, demonstrating input validation.
Real-Time Character Counter
Modern applications often need to monitor user input length—think tweet character limits or password strength. This exercise reacts instantly to keyboard input.
<body>
<input id="userText" type="text" placeholder="Type here...">
<h2>Characters: <span id="charCount">0</span></h2>
<script>
const inputField = document.getElementById("userText");
const charCounter = document.getElementById("charCount");
inputField.addEventListener("input", () => {
charCounter.textContent = inputField.value.length;
});
</script>
</body>The input event listener triggers whenever the user types, updating the character count in real time. This pattern is widely used in form validation and UX feedback systems.
DOM manipulation is the bridge between static markup and dynamic behavior. These exercises cover essential techniques—text updates, conditional rendering, state management, and real-time feedback—that form the foundation of interactive web development. Start with these patterns, then expand into frameworks like React or Vue for even more powerful interactions.
AI summary
JavaScript’in DOM manipülasyonunu kullanarak buton tıklamalarıyla metin değiştirme, ışık açma-kapama, sayı sayacı ve karakter sayacı gibi basit uygulamaları nasıl geliştirebileceğinizi keşfedin.
