https://github.com/tidjee-dev/becode-manipulating_dom
https://github.com/tidjee-dev/becode-manipulating_dom
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tidjee-dev/becode-manipulating_dom
- Owner: tidjee-dev
- Created: 2024-11-15T09:09:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-15T13:02:21.000Z (over 1 year ago)
- Last Synced: 2025-03-02T08:39:36.530Z (over 1 year ago)
- Language: JavaScript
- Size: 2.99 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOM Exploration
- Repository: `dom-exploration`
- Type of Challenge: `learning`
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document.
In this series of challenges we're going to explore different aspect of this technology. Unless explicitly stated otherwise, you should **NEVER** edit the HTML files provided, everything has to be done using Javascript.
## Prerequisite
Before diving in, it is essential to grasp the main concepts of the Javascript language such as:
- Variables and constants
- Conditions
- Loops
- Arrays and objects
- Functions
## Chapters:
```
🌱 Must haves
🌼 Nice to haves (doable)
🌳 Nice to haves (hard)
```
- [1. Introduction 🌱](./1.Introduction)
- The DOM tree
- Nodes
- How to read a DOM tree using javascript
- Accessing root level nodes
- [2. DOM Selectors 🌱](./2.Selectors)
- `querySelector` and `querySelectorAll` methods
- [3. Creating nodes 🌱](./3.Create)
- The `createElement` method
- Inserting node
- [4. Navigating the DOM 🌱](./4.Navigate)
- Siblings
- [5. Events 🌱](./5.Events)
- [6. Working with forms 🌱](./6.Forms)
- [7. Big recap "drill exercise" 🌼](./7.DOM-drill)
### Projects:
- [**The Collection 🌱**](./3_Collection-project)
- [**An a-maze-ing project 🌳**](./7_amazeing-project)