Learn DOM manipulation with easy modern JavaScript
Learn the Document Object Model fundamentals by building an interactive game with plain HTML, DOM and modern JavaScript.
Development,Web Development,Javascript
Lectures -101
Resources -1
Duration -7 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we use when we work with Javascript and interact in any way dynamically with the document.
If you use Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood.
If you want to stand out as a JavaScript developer, you need to learn DOM fundamentals.
Goals
- Dynamic html elements
- Animations leveraging DOM API's.
- Common DOM API's and documentation
- State Driven User Interfaces
- 5 minute bundles
- Javascript private attributes
- Clean code practices
- Dynamic css styles
- DOM events and event listeners
- Interactive UIs development
- Have a better idea of how modern libraries work under the hood
- Object oriented programming concepts
- Performance profiling
Prerequisites
- Basic Javascript and HTML
- Concepts nodeJS 12+ and npm just for tooling, we don't program in nodejs in this course.
![Learn DOM manipulation with easy modern JavaScript Learn DOM manipulation with easy modern JavaScript](https://d3mxt5v3yxgcsr.cloudfront.net/courses/4470/course_4470_image.png)
Curriculum
Check out the detailed breakdown of what’s inside the course
Welcome
5 Lectures
-
What is the DOM? 02:28 02:28
-
Your first DOM update 05:16 05:16
-
Course project: Code DOM adventure 03:44 03:44
-
Download exercise files, all code for each module. Code along or skip anytime.
-
Suggested browser to take the lectures
DOM Fundamentals
7 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Code DOM Adventure
7 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Creating elements
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Dynamic CSS
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Profiling the pixel pipeline
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Animations using DOM changes
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Planning DOM changes with a state model
9 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Easy bundling
6 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
DOM updates with basic state driven development
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
The player, Interacting with user input
12 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Interactive DOM, breaking walls 0 / 7|37 min
7 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Portal to exit the game
9 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Interactive DOM, breaking walls
10 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
DOM sound effects
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Juan Lizarazo](https://www.tutorialspoint.com/assets/profiles/322713/profile/200_228784-1617060370.jpg)
Juan Lizarazo
Hi! I am Juan Lizarazo, your Tutorialspoint Instructor!
I've been programming since I was ten years old, and I have been teaching for over a decade.
I am a Software Architect in Salt Lake City, Utah, focused on web app development, cloud, leadership, team scaling, and distributed applications.
I am also a software engineering instructor, teaching computer science topics like data structures and algorithms to students all over the US.
I also contribute to open-source, talk at Conferences, answer questions on stack overflow, and sometimes write.
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)