Learn DOM Manipulation with JavaScript

Learn DOM Manipulation with JavaScript


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

Certificate of Achievement

Endorsed Certificate of Achievement from the Quality Licence Scheme

After successfully completing the course, learners will be able to order an endorsed certificate as proof of their new achievement. Endorsed certificates can be ordered and get delivered to your home by post for only £109.00. There is an additional £10 postage charge for international students.

CPD Certification from One Education

After successfully completing the assessment of this course, you will qualify for the CPD Certificate from One Education as proof of your continued expert development. Certificate is available in PDF format, at the cost of £9, or a hard copy can be sent to you via post, at the cost of £15.


This course has been endorsed by the Quality Licence Scheme for its high-quality, non-regulated provision and training programmes. This course is not regulated by Ofqual and is not an acknowledged lesson. One Education will be able to advise you on any further recognition, for example, progression routes into further and/or higher education. For further information, please visit the Learner FAQs on the Quality Licence Scheme website.

Method of Assessment

To assess your learning, you have to complete the assignment questions provided at the end of the course. You have to score at least 60% to pass the exam and to qualify for Quality Licence Scheme endorsed, and CPD acknowledged certificates. 

After submitting the assignment, our expert tutor will assess your assignment and will give you feedback on your performance.

After passing the assignment exam, you will be able to apply for a certificate.

Why Study This Course

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

The Learn DOM Manipulation with JavaScript is fully available to anyone, and no previous lessons 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 2 weeks, 1 day
Order Your Certificate
Order Your Certificate QLS 00:00:00

COPYRIGHT © 2022 One Education

Home Search Cart
    Your Cart
    Your cart is emptyBrowse Courses

    Upgrade to get UNLIMITED ACCESS to ALL COURSES for only £49/year

    Claim Offer & Upgrade

    Membership renews after 12 months. You can cancel anytime from your account.

    Other Students Also Buy
      Apply Coupon