Youcef Madadi
Web and game development teacher
DOM
MANIPULATIONS
WITH JS
Objectives
- Defining the DOM
- DOM Selectors
- DOM Manipulation
- Events
- A small app to make
Defining the DOM
- Use cases of DOM manipulations
- What is DOM?
- How to access it?
- The process of DOM manipulations
Use cases of DOM manipulations
We see DOM manipulation on a daily bases all around the web.
it controls the movement and the interactivity of the websites we use everyday.
- Games
- Scrolling Effects
- Dropdown menus
- Form Validations
- Interactivity
- Animations
- Every awesome site ever
What is DOM ?
Document Object Model
The Document Object Model is the interface between your Javascript and HTML+CSS
The browser turns every HTML tag into a Javascript object that we can manipulate
Everything is stored inside of the document object
How to access it ?
The process of DOM manipulations
1. Select The element
2. Access the attribute
3. Change the values of the attribute or an option inside of it
DOM Selectors
- How to select elements by tags?
- How to select elements by classes?
- How to select elements by CSS query selctors?
DOM Manipulation
- Change properties
- DOM methods and properties
- Manipulating Classes
Manipulating Classes
- Class list
- AddClass
- RemoveClass
DOM
methods and properties
- createElement
- firstChild
- appendChild
- removeChild
- getAttribute
- setAttribute
- document.forms
- innerHTML
DOM Events
- Events List
- Events as properties
- Events in an event listner
- RemoveClasses
DOMmanipulations
By Youcef Madadi
