• No products in the basket.



  • 4 Students

  • Certified


Learn how to manipulate the DOM to get a better handle on web pages. Take advantage of DOM manipulation with JavaScript to design a webpage that ensures a better quality of experience for web users.

The user demand for a web page is enormous, which means that webpages must provide some great features. This highly-engaging DOM manipulation with JavaScript training will help you understand how to modify web pages and develop features. You will learn how to implement modern web pages with HTML and CSS. It will guide you on code DOM adventure, planning DOM changes with a state model, and easy bundling. You will explore what it takes to build fantastic and user-friendly applications that update and edit data on the page dynamically. 

Learn the DOM concepts and leverage its capabilities by enrolling today!

Course design

The course is delivered through our online learning platform, accessible through any internet-connected device. There are no formal deadlines or teaching schedules, meaning you are free to study the course at your own pace.

You are taught through a combination of

  • Video lessons
  • Online study materials

Will I receive a certificate of completion?

Upon successful completion, you will qualify for the UK and internationally-recognised CPD accredited certification. You can choose to make your achievement formal by obtaining your PDF Certificate at the cost of £9 and Hard Copy Certificate for £15.

Why study this course

It doesn’t matter if you are an aspiring professional or absolute beginner; this course will enhance your expertise and boost your CV with critical skills and an accredited certification attesting to your knowledge.

The Learn DOM Manipulation with JavaScript is fully available to anyone, and no previous qualifications are needed to enrol. All One Education needs to know is that you are eager to learn and are over 16.

Course Curriculum

Unit 01: Course Introduction
What is the DOM? 00:02:00
Your first DOM update 00:05:00
Course Project: Code DOM Adventure 00:04:00
Unit 02: DOM Fundamentals
HTML and the DOM 00:05:00
DOM standards 00:05:00
The BOM 00:04:00
The CSSOM 00:03:00
The tree (Data structure) 00:05:00
The DOM tree 00:11:00
The DOM and JavaScript 00:01:00
Unit 03: Code DOM Adventure
App architecture 00:08:00
Challenge solution: The exit screen 00:04:00
App skeleton 00:05:00
The splash screen file 00:03:00
Download our asset kit now! 00:03:00
Including the assets 00:03:00
Unit 04: Creating elements
Wiring the splash screen element 00:02:00
Creating elements at runtime 00:03:00
Appending HTML strings width append() 00:02:00
Appending nodes with append or append Child 00:03:00
Script order matters 00:04:00
Unit 05: Dynamic CSS
Specifying classes to elements 00:04:00
Working with static styles 00:04:00
Defining styles at runtime 00:04:00
Querying the DOM to find elements 00:05:00
Unit 06: Profiling the pixel pipeline
The pixel pipeline 00:02:00
Identifying bad practices 00:04:00
Profiling runtime performance 00:04:00
Batching DOM updates with document fragments 00:05:00
Too many nodes 00:04:00
Unit 07: Animation using DOM changes
Removing nodes from the DOM 00:06:00
The animation frames 00:06:00
Our animate method 00:04:00
Our working animation! 00:06:00
Stopping the animation 00:08:00
Unit 08: Planning DOM changes with a state model
Let’s build the level! 00:02:00
2. Our state model to control the DOM from state. 00:10:00
Normalizing attributes 00:04:00
Our level class 00:04:00
Arrays, references and non-iterable empty slots 00:05:00
Building our state with an ugly oneliner 00:05:00
Write code for humans and normalize your code 00:05:00
Rendering the level element 00:05:00
Things are getting messy 00:06:00
Unit 09: Easy bundling
Easy bundling 00:06:00
Bundle with the start script 00:01:00
Our dev server 00:02:00
Let’s use DOMContentLoaded and ES Modules (ESM) 00:07:00
Dynamic style elements with CSS as ESM imports 00:04:00
Unit 10: DOM updates with basic state driven development
Designing the shape of our state 00:02:00
Initializing our state in preparation to render DOM elements 00:05:00
DOM updates from state 00:08:00
Updates to state are reflected in the DOM 00:03:00
Modeling and render our chip walls 00:06:00
Unit 11: The player, Interacting with user input
The player – Tech approach 00:02:00
Rendering the player with the DOM 00:07:00
Box model and global styles 00:06:00
Manipulating inline styles with the DOM 00:04:00
Moving the player by changing its state 00:06:00
DOM keyboard event listeners 00:07:00
Mapping and filtering DOM events data 00:04:00
Can the player move? – Tech approach 00:03:00
Preventing overlapping DOM elements 00:12:00
Prepare interactive frames 00:08:00
Resetting className and adding interactive frames on DOM events 00:06:00
Update frames without moving the element on DOM events 00:03:00
Unit 12: Interactive DOM, breaking walls
Adding random DOM elements 00:06:00
DOM events when pressing the space key 00:05:00
Creating elements on DOM events 00:05:00
z-index manifest 00:04:00
Dynamic element IDs with the DOM 00:07:00
Interacting with other elements using the state model 00:06:00
Remove surrounding walls 00:04:00
Unit 13: Portal to exit the game
Adding the portal to the screen 00:07:00
Random elements on the screen 00:05:00
Grouping inline CSS DOM updates 00:03:00
Exiting the game, when two elements cross paths 00:04:00
Challenge, your turn to build the exit screen 00:03:00
Challenge solution, my turn to build the exit screen 00:04:00
Hiding the portal behind a wall 00:05:00
Removing DOM event listeners 00:04:00
Unit 14: Animating all the things
Rendering the splash screen 00:04:00
Swapping screens 00:02:00
Animating the portal 00:04:00
CSS kit – animations 00:03:00
Request animation frame and delaying animations 00:09:00
Animating with a parent css class 00:03:00
Old TV effect 00:02:00
Animating with delayed animation 00:11:00
Optimizing frames 00:03:00
Final frame optimizations 00:04:00
Unit 15: DOM Sound effects
Dynamic audio elements 00:07:00
Interactive sound effects with DOM events 00:04:00
Delayed audio effects with callbacks and DOM events 00:04:00
Final lecture, final sound effect! exiting the game 00:03:00
Assignment -Learn DOM Manipulation with JavaScript 00:00:00

Training 10 or more people?

Get your team access to 3,000+ top courses anytime, anywhere.

Try One Education Business




Get accredited certificates

New skills

Add skills to your CV


Test your skills

Dedicated Support

For any questions

Set your own speed

Self-paced learning

Save your money

Monthly subscription

COPYRIGHT © 2022 One Education

Your Cart