This repository is a collection of examples and exercises demonstrating various ways to manipulate the Document Object Model (DOM) using JavaScript.
Topics Covered:
- Selecting Elements: Learn how to select HTML elements using methods like
getElementById
,getElementsByClassName
,getElementsByTagName
,querySelector
, andquerySelectorAll
. - Modifying Content: Explore how to change the text content, HTML content, and attribute values of elements.
- Styling Elements: Discover how to add, remove, and toggle CSS classes, and how to modify inline styles.
- Creating and Appending Elements: Understand how to dynamically create new HTML elements and add them to the DOM.
- Removing Elements: Learn how to remove elements from the DOM.
- Event Handling: Explore how to respond to user interactions like clicks, hovers, and form submissions using event listeners.
- Traversing the DOM: Learn how to navigate between parent, child, and sibling elements.
How to Use:
Each folder within this repository typically contains an index.html
file and one or more JavaScript files. To see the examples in action, simply open the index.html
file in your web browser. The JavaScript code will manipulate the DOM as the page loads or in response to user interactions.
Contributing:
Contributions are welcome! If you have any examples of DOM manipulation that you'd like to share, feel free to create a pull request.
License:
This project is licensed under the MIT License - see the LICENSE.md file for details.