OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

JavaScript Fundamentals

Master the Document Object Model

Juan Lizarazo

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.

By the end of watching this course, you'll be able to:

Read more

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.

By the end of watching this course, you'll be able to:

  • Understand what is the DOM and how to interact dynamically with an HTML document.

  • Use modern and easy Javascript with classes, private attributes, and dom API's to build user interfaces.

  • Learn optimization techniques.

  • Apply easy bundling techniques that include dynamic CSS loading.

  • Search for documentation, you don't need to memorize all the DOM interfaces.

  • Interact with the DOM and user input through event listeners.

  • Apply clean code and best practices as we build along with our course project.

With this course, you'll get a downloadable source code package.

This is a beginner and intermediate course.

You don't need previous experience with the DOM.

Promo video music license:

Adventures by A Himitsu - Creative Commons — Attribution 3.0 Unported— CC BY 3.0   Music released by Argofox - Music provided by Audio Library   

Enroll now

What's inside

Learning objectives

  • Dynamic html elements
  • Dynamic css styles
  • Animations leveraging dom api's.
  • Dom events and event listeners
  • Common dom api's and documentation
  • Interactive uis development
  • State driven user interfaces
  • Have a better idea of how modern libraries work under the hood
  • 5 minute bundles
  • Object oriented programming concepts
  • Javascript private attributes
  • Performance profiling
  • Clean code practices

Syllabus

Welcome
What is the DOM?
Your first DOM update
Course project: Code DOM adventure
Read more
Suggested browser to take the lectures
Download exercise files, all code for each module. Code along or skip anytime.
DOM Fundamentals
HTML and the DOM
DOM standards
The BOM
The CSSOM
The tree (Data structure)
Knowledge check!
The DOM tree
The DOM and JavaScript
Code DOM Adventure
App architecture
Challenge: Add the exit screen to the application class diagram
Challenge solution: The exit screen
App skeleton
The splash screen file
Download our asset kit now!
Including the assets
Creating elements
Wiring the splash screen element
Creating elements at runtime
Appending HTML strings width append()
Appending nodes with append or appendChild
Script order matters
Dynamic CSS
Specifying classes to elements
Working with static styles
Defining styles at runtime
Querying the DOM to find elements
Profiling the pixel pipeline
The pixel pipeline
Identifying bad practices
Profiling runtime performance
Batching DOM updates with document fragments
Too many nodes
Animations using DOM changes
Removing nodes from the DOM
The animation frames
Our animate method
Our working animation!
Stopping the animation
Planning DOM changes with a state model
Let's build the level!
2. Our state model to control the DOM from state.
Normalizing attributes
Our level class
Arrays, references and non-iterable empty slots
Building our state with an ugly oneliner
Write code for humans and normalize your code
Rendering the level element
hmm, things are getting messy
Easy bundling
Pre-requisites
Bundle with the start script
Our dev server
Let's use DOMContentLoaded and ES Modules (ESM)
Dynamic style elements with CSS as ESM imports
DOM updates with basic state driven development
Designing the shape of our state
Initializing our state in preparation to render DOM elements
DOM updates from state
Updates to state are reflected in the DOM
Modeling and render our chip walls
The player, Interacting with user input
The player - Tech approach
Rendering the player with the DOM
Box model and global styles
Manipulating inline styles with the DOM
Moving the player by changing its state
DOM keyboard event listeners
Mapping and filtering DOM events data
Can the player move? - Tech approach
Preventing overlapping DOM elements
Prepare interactive frames
Resetting className and adding interactive frames on DOM events
Update frames without moving the element on DOM events
Interactive DOM, breaking walls
Adding random DOM elements
DOM events when pressing the space key
Creating elements on DOM events
z-index manifest
Dynamic element IDs with the DOM
Interacting with other elements using the state model
Remove surrounding walls
Portal to exit the game
Adding the portal to the screen
Random elements on the screen
Grouping inline CSS DOM updates
Exiting the game, when two elements cross paths
Challenge, your turn to build the exit screen
Your turn now!
Challenge solution, my turn to build the exit screen
Hiding the portal behind a wall
Removing DOM event listeners

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Covers DOM fundamentals, which are essential for JavaScript developers using modern libraries and frameworks like Angular, Vue, and React
Teaches optimization and bundling techniques, which can help developers improve the performance and efficiency of their web applications
Explores dynamic CSS loading, which is a useful technique for creating modern web applications with dynamic styling
Includes a downloadable source code package, which can be a valuable resource for learners who want to practice and experiment with the concepts taught in the course
Requires learners to download exercise files, which may require additional storage space on their computers
Uses ES Modules (ESM), which may require learners to have a basic understanding of module bundlers and JavaScript tooling

Save this course

Save JavaScript Fundamentals: Master the Document Object Model to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in JavaScript Fundamentals: Master the Document Object Model with these activities:
Review HTML Fundamentals
Solidify your understanding of HTML structure and elements, which are the foundation upon which the DOM is built.
Browse courses on HTML
Show steps
  • Review basic HTML tags and attributes.
  • Practice creating simple HTML documents.
  • Familiarize yourself with HTML document structure.
Read "Eloquent JavaScript"
Deepen your understanding of JavaScript and the DOM by reading a well-regarded book on the subject.
View Eloquent JavaScript, 4th Edition on Amazon
Show steps
  • Read the chapters related to the DOM and event handling.
  • Work through the exercises provided in the book.
  • Experiment with the code examples in a browser environment.
DOM Manipulation Challenges
Reinforce your DOM manipulation skills through targeted practice exercises.
Browse courses on DOM Manipulation
Show steps
  • Find online resources with DOM manipulation challenges.
  • Complete exercises involving creating, modifying, and deleting elements.
  • Practice using event listeners to respond to user interactions.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a Simple To-Do List App
Apply your DOM knowledge by building a practical application that involves dynamic element creation and event handling.
Show steps
  • Design the user interface for the to-do list app.
  • Implement the functionality to add, delete, and mark tasks as complete.
  • Use local storage to persist the to-do list data.
Create a DOM Cheat Sheet
Consolidate your understanding of common DOM APIs by creating a reference guide.
Show steps
  • Identify the most frequently used DOM methods and properties.
  • Create a document summarizing the syntax and usage of each API.
  • Include examples of how to use each API in practical scenarios.
Read "DOM Enlightenment"
Expand your knowledge of the DOM API by reading a book that focuses specifically on the DOM.
View DOM Enlightenment: Exploring JavaScript and the... on Amazon
Show steps
  • Read the chapters that cover the DOM API in detail.
  • Experiment with the code examples provided in the book.
  • Apply the best practices discussed in the book to your own projects.
Contribute to a JavaScript Library
Deepen your understanding of DOM manipulation by contributing to an open-source project.
Browse courses on JavaScript
Show steps
  • Find a JavaScript library that uses the DOM.
  • Identify a bug or feature that you can contribute to.
  • Submit a pull request with your changes.

Career center

Learners who complete JavaScript Fundamentals: Master the Document Object Model will develop knowledge and skills that may be useful to these careers:
Frontend Developer
A Frontend Developer builds user interfaces for websites and applications, and this course directly helps build those skills. This course provides extensive instruction on manipulating the Document Object Model using JavaScript, which is a core responsibility of a frontend developer. The course material includes creating dynamic elements, applying styles programmatically and creating animations, all of which are key features for a well crafted user interface. In particular, instruction on event handling, building interactive elements, and using a state-based approach are also useful to a frontend developer. Learning how modern libraries work under the hood, as discussed in this course, is a valuable insight for a frontend developer.
See salaries and explore the career path for Frontend Developer
Web Developer
Web Developers create and maintain websites, and this course is highly beneficial for this career. This course focuses on the Document Object Model, which is fundamental to web development. The course material includes working with HTML, CSS, and JavaScript to dynamically manipulate web pages. A web developer will find the lectures on creating interactive user interfaces, handling user input, and optimizing performance particularly useful. Specifically, the course covers techniques such as event listeners, state-driven UI development and DOM manipulation that are a core part of a web developer’s daily work.
See salaries and explore the career path for Web Developer
User Interface Engineer
A User Interface Engineer designs and implements the user-facing elements of software applications, making this course extremely relevant. This course gives a deep dive into the Document Object Model, which is essential for building interactive UIs. The course directly teaches how to use JavaScript to dynamically update web pages, handle user events, and create animations, all of which are crucial for a user interface engineer. Furthermore, the course’s instruction on performance profiling and clean coding practices will aid the user interface engineer in creating efficient and maintainable code. The course's approach to state-driven updates and modular architecture of user interface elements is also very helpful.
See salaries and explore the career path for User Interface Engineer
JavaScript Developer
A JavaScript Developer focuses on building interactive and dynamic web applications using JavaScript, and this course is perfectly aligned with this role. The course emphasizes the Document Object Model and how to interact with it using JavaScript. The course's coverage of DOM manipulation, user interaction, event handling and performance optimization are critical skills for any JavaScript developer. By learning how to build interactive UIs and state-driven applications using vanilla JavaScript, the JavaScript developer can gain a deeper understanding of how modern web frameworks function, which greatly helps with debugging and custom development. The course’s instruction on creating animations and dynamic CSS updates will also prove to be very useful.
See salaries and explore the career path for JavaScript Developer
Web Application Developer
A Web Application Developer builds interactive web applications, and this course helps with that. The course focuses on the Document Object Model, which is critical to building applications running in a web browser. A web application developer will find the in-depth instruction in manipulating the DOM, handling events, creating animations, and especially managing application state helpful. The course's emphasis on dynamic updates and event handling are crucial for building rich user applications. The course offers instruction on both front-end and application state management that will be beneficial to a web application developer.
See salaries and explore the career path for Web Application Developer
Interactive Developer
An Interactive Developer creates engaging and dynamic digital experiences, and this course directly helps. Through its thorough exploration of the Document Object Model, this course will empower a developer in building interactive web content. This course’s specific focus on handling user input, dynamic content updates, and animation is highly relevant to an interactive developer. The course’s instruction on event handling and state-driven user interface development is crucial for building dynamic user experiences. In particular, the course’s content on creating interactive DOM elements and animations is quite valuable to an interactive developer.
See salaries and explore the career path for Interactive Developer
UI Developer
A UI Developer specializes in implementing the visual and interactive aspects of a software interface, and this course will support that. This course provides detailed instructions on using the Document Object Model to create dynamic user interfaces. A UI developer will find the course’s modules on dynamic element creation, styling, animations, and event handling to be particularly useful. By delving into DOM manipulation and event driven interactions, a UI developer will be well prepared to build responsive and engaging interfaces. The course's instruction on state driven updates and efficient coding practices is highly valuable to a UI Developer.
See salaries and explore the career path for UI Developer
Software Engineer
A Software Engineer develops and maintains software systems, and this course can enhance their front-end skills. This course covers the Document Object Model, which a software engineer will find useful when working on front-end or full-stack work. The course content including DOM manipulation via JavaScript, event handling, and performance optimizations are especially relevant to the software engineer. In particular, the course’s instruction on state driven updates and event driven interaction is helpful to a software engineer who wants to better understand how to build engaging user experiences. The emphasis on clean code practices and performance tuning can help any kind of software engineer.
See salaries and explore the career path for Software Engineer
Full-Stack Developer
A Full Stack Developer works on both the front-end and back-end of web applications, and this course can help improve their front-end abilities. This course focuses on the Document Object Model and front-end web development using JavaScript, which is a core aspect of a full stack developer. The course material includes working with dynamic elements, styles, animations, and user interactions which are crucial for front-end work. A full stack developer will especially benefit from the course's coverage of state-driven user interfaces and event handling. Knowing how modern libraries work under the hood, a topic covered in this course, will also be of help.
See salaries and explore the career path for Full-Stack Developer
Game Developer
A Game Developer creates video games, and the skills gained from this course may be useful for creating user interfaces. This course’s focus on the Document Object Model, dynamic element creation, and animations are useful for creating in game user interfaces built with web technologies. The course's emphasis on event handling, state-driven user interfaces and dynamic CSS are valuable for any game developer. Specifically, the understanding of the DOM, game states, and dynamic user interface updates will be beneficial. A game developer may use these principles for non game contexts as well.
See salaries and explore the career path for Game Developer
UX Engineer
A UX Engineer combines user experience design with technical expertise to implement user interfaces, and this course may be useful for that. This course's focus on the Document Object Model and its use with Javascript may be useful to a UX engineer. By taking this course, a UX engineer will gain a better understanding of the low level implementation of interactive user interfaces. The lessons on styling, dynamic content, and animations, can be helpful. The course's coverage of event handling and modern user interface techniques also may help a UX engineer better execute designs.
See salaries and explore the career path for UX Engineer
Technical Writer
A Technical Writer creates technical documentation, and this course may be helpful as a source of knowledge. This course’s in depth look at the Document Object Model and its use with JavaScript can help technical writers better understand concepts when writing documentation. The course includes an overview of dynamic element creation, styling, events, and states that may be useful to a technical writer. The course also covers performance profiling concepts, which may be helpful. While not a core skill, the in depth look at front-end technologies may prove to be useful for a technical writer.
See salaries and explore the career path for Technical Writer
Web Designer
A Web Designer focuses on the visual and aesthetic aspects of websites, and this course may be useful to deepen their technical skills. While a web designer might not need to fully know all of the course material, a course that extensively covers the Document Object Model and its use with JavaScript can help a web designer better understand underlying technologies. The course materials covers many topics that can be used to better understand the capabilities of the browser. A web designer might especially appreciate the modules focusing on dynamic style updates and animations. A web designer will gain an understanding of the underlying browser technologies.
See salaries and explore the career path for Web Designer
Quality Assurance Engineer
A Quality Assurance Engineer ensures the quality of software, and this course may be helpful. This course’s focus on the the Document Object Model and how it interacts with Javascript can expose a quality assurance engineer to testing considerations. A quality assurance engineer might find it useful to understand how to manipulate the DOM for testing purposes. The course covers a variety of front-end related topics such as event handling, dynamic elements, animations, and styling that may also be useful for a quality assurance engineer. This course may indirectly help a quality assurance engineer.
See salaries and explore the career path for Quality Assurance Engineer
Project Manager
A Project Manager oversees software projects, and this course may be useful for that. While this course's focus on the Document Object Model is not a project manager's core skill, it may be useful to understand the scope of work in web development. The course covers a variety of topics, which includes event handling, dynamic elements, animations, and styling that are relevant to web development. Project managers may find the sections related to interactive components and performance useful when planning web projects. Project managers may gain an understanding of front-end development.
See salaries and explore the career path for Project Manager

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in JavaScript Fundamentals: Master the Document Object Model.
Cover image
Eloquent JavaScript, 4th Edition
Save
Provides a comprehensive introduction to JavaScript, including a thorough explanation of the DOM. It covers the core concepts of the language and how they relate to web development. This book is useful for solidifying your understanding of JavaScript fundamentals and how to apply them to DOM manipulation. It is commonly used as a textbook in introductory JavaScript courses.
Eloquent JavaScript, 4th Edition
Paperback
Check
Eloquent JavaScript, 4th Edition
Kindle Edition
Check
Cover image
DOM Enlightenment
Save
Provides a deep dive into the DOM API, covering both its strengths and weaknesses. It explores the nuances of DOM manipulation and offers best practices for writing efficient and maintainable code. This book is valuable as additional reading to gain a more thorough understanding of the DOM. It is often recommended for experienced JavaScript developers.
DOM Enlightenment: Exploring JavaScript and the...
Paperback
$$
DOM Enlightenment: Exploring JavaScript and the...
Kindle Edition
$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
7.5 total hours
Via
Udemy
Instructor
Juan Lizarazo
Language
English
Good to know
Covers DOM fundamentals, which are essential for JavaScript developers using modern libraries and frameworks like Angular, Vue, and React
Teaches optimization and bundling techniques, which can help developers improve the performance and efficiency of their web applications
Explores dynamic CSS loading, which is a useful technique for creating modern web applications with dynamic styling
Includes a downloadable source code package, which can be a valuable resource for learners who want to practice and experiment with the concepts taught in the course
Requires learners to download exercise files, which may require additional storage space on their computers
Uses ES Modules (ESM), which may require learners to have a basic understanding of module bundlers and JavaScript tooling
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser