π Elevate Your Web Pages with JavaScript DOM Manipulation! π
JavaScript’s power extends beyond just algorithms and data structures; it breathes life into web pages, making them interactive and dynamic. Understanding DOM Manipulation is a key skill for any web developer.
I’ve compiled a set of exercises that will strengthen your skills in JavaScript DOM Manipulation:
– Learn to create, modify, and remove HTML elements dynamically.
– Dive into event handling to make your web pages react to user actions.
– Discover the nuances of form handling and validation.
– Experiment with styling and class toggling to enhance user experience.
Why DOM Manipulation Matters:
– It’s essential for creating interactive and user-friendly web pages.
– Helps in validating user inputs and improving form interactions.
– Enables you to respond to user actions, making websites more intuitive.
I encourage you to try these exercises, share your solutions, or discuss any DOM-related topics. Let’s demystify the DOM together and unlock the potential of dynamic web pages!
#WebDevelopment #JavaScript #DOMManipulation #InteractiveWeb #CodingExercises
Happy coding and DOMinating! π»π
JavaScript DOM Manipulation
Exercise 1: Changing Text Content
Problem: Change the text content of an HTML element with the id demo to “Hello, DOM!”
Explanation: Demonstrates how to access and modify the text content of an HTML element using JavaScript.
Code:
<div id=”demo”>Original Text</div>
<script>
document.getElementById(‘demo’).textContent = “Hello, DOM!”;
</script>
Exercise 2: Changing Styles
Problem: Change the color of the text in the demo element to blue.
Explanation: Shows how to modify the style properties of an HTML element.
Code:
<div id=”demo”>Change my color</div>
<script>
document.getElementById(‘demo’).style.color = “blue”;
</script>
Exercise 3: Creating Elements
Problem: Create a new <p> element with the text “This is a new paragraph” and append it to the body of the document.
Explanation: Demonstrates creating a new HTML element and appending it to an existing element.
Code:
<script>
let newParagraph = document.createElement(‘p’);
newParagraph.textContent = “This is a new paragraph”;
document.body.appendChild(newParagraph);
</script>
Exercise 4: Removing Elements
Problem: Remove the HTML element with the id remove-me.
Explanation: Shows how to remove an HTML element from the document.
Code:
<div id=”remove-me”>Remove me</div>
<script>
let elementToRemove = document.getElementById(‘remove-me’);
elementToRemove.parentNode.removeChild(elementToRemove);
</script>
Exercise 5: Event Handling
Problem: Add a click event listener to a button with the id click-me that alerts “Button was clicked!” when clicked.
Explanation: Introduces handling events in JavaScript, attaching a function to the click event of an HTML element.
Code:
<button id=”click-me”>Click me</button>
<script>
document.getElementById(‘click-me’).addEventListener(‘click’, function() {
alert(“Button was clicked!”);
});
</script>
Exercise 6: Toggling Classes
Problem: Toggle a class active for the HTML element with the id toggle-element whenever it is clicked.
Explanation: Shows how to add or remove a class from an element’s class list in response to an event.
Code:
<div id=”toggle-element”>Click me to toggle</div>
<script>
document.getElementById(‘toggle-element’).addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
});
</script>
<style>
.active { background-color: yellow; }
</style>
Exercise 7: Updating Image Sources
Problem: Change the source of an image with the id change-image to “new-image.jpg” when a button is clicked.
Explanation: Demonstrates changing the attribute of an HTML element through JavaScript.
Code:
<img id=”change-image” src=”old-image.jpg”>
<button id=”change-image-btn”>Change Image</button>
<script>
document.getElementById(‘change-image-btn’).addEventListener(‘click’, function() {
document.getElementById(‘change-image’).src = “new-image.jpg”;
});
</script>
Exercise 8: Form Values
Problem: Retrieve and alert the value from a text input field with the id user-input when a form is submitted.
Explanation: Covers accessing and manipulating form data through DOM properties.
Code:
<form id=”input-form”>
<input type=”text” id=”user-input”>
<button type=”submit”>Submit</button>
</form>
<script>
document.getElementById(‘input-form’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // Prevent the form from submitting
let userInput = document.getElementById(‘user-input’).value;
alert(userInput);
});
</script>
Exercise 9: Displaying and Hiding Elements
Problem: Toggle the visibility of an HTML element with the id toggle-visibility each time a button is clicked.
Explanation: Teaches how to dynamically show or hide elements with JavaScript.
Code:
<div id=”toggle-visibility”>Toggle my visibility</div>
<button id=”visibility-btn”>Toggle Visibility</button>
<script>
document.getElementById(‘visibility-btn’).addEventListener(‘click’, function() {
let element = document.getElementById(‘toggle-visibility’);
if (element.style.display === “none”) {
element.style.display = “block”;
} else {
element.style.display = “none”;
}
});
</script>
Exercise 10: Manipulating Lists
Problem: Add a new item “Orange” to an unordered list with the id fruit-list.
Explanation: Demonstrates adding new items to a list dynamically.
Code:
<ul id=”fruit-list”>
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
let newListElement = document.createElement(‘li’);
newListElement.textContent = “Orange”;
document.getElementById(‘fruit-list’).appendChild(newListElement);
</script>
