JavaScript: Enhancing the DOM

Course details

The Document Object Model (DOM) is at the core of every webpage. In order to develop dynamic HTML pages, a front-end developer needs to understand how JavaScript connects and lets you control the DOM in order to create, modify, delete and edit existing content on a page. In this course, designed for experienced web designers and developers, instructor Maaike van Putten provides an overview of basic DOM elements, the different ways JavaScript gives you access to the elements, and how to work with the DOM to create dynamic webpages.

Learn the fundamental skills required for selecting DOM elements, traversing the DOM, modifying DOM elements, and creating, adding, and managing nodes. Along the way, get tips on event handling, advanced DOM manipulation, accessibility, performance, and best practices. At the end of the course, you’ll get the chance to test out your new skills on a real-world project by building an interactive resume app with a Node.js back end.

Concepts

0. Introduction

01 - Enhance your JavaScript DOM knowledge
02 - How to use the GitHub-hosted exercise files

1. Understanding the DOM

03 - What is the DOM
04 - DOM vs. HTML vs. JavaScript
05 - Exploring the DOM with DevTools
06 - DOM tree and node types
07 - Challenge - DOM detective
08 - Solution - DOM detective

2. Selecting DOM Elements

09 - getElementById, getElementsByClassName, getElementsByTagName
10 - querySelector and querySelectorAll
11 - Using CSS selectors to target element
12 - The matches method
13 - Challenge - Element hunter
14 - Solution - Element hunter

3. Traversing the DOM

15 - Parent, child, and sibling nodes
16 - Working with methods to get parent, child, and sibling nodes
17 - Traversing with closest and contains
18 - Challenge - Animal tree traversal
19 - Solution - Animal tree traversal

4. Modifying DOM Elements

20 - Changing text and HTML content
21 - Changing values of input elements
22 - Manipulating attributes and data attributes
23 - Working with classes
24 - Inline styles with JavaScript
25 - Challenge - Shapeshifter
26 - Solution - Shapeshifter

5. Creating, Adding, and Managing Nodes

27 - Creating elements with createElement
28 - Constructors for creating specific types of elements
29 - Inserting elements
30 - Cloning, replacing, and removing nodes
31 - Challenge - Element creator
32 - Solution - Element creator

6. Event Handling

33 - Event listeners, event handlers, and event objects
34 - Common DOM events
35 - Removing event handlers
36 - Event propagation - Capturing and bubbling
37 - Event delegation
38 - Working with preventDefault
39 - Challenge - Eventful app
40 - Solution - Eventful app

7. Advanced DOM Manipulation

41 - Working with forms and input elements
42 - Manipulating lists
43 - Creating tables
44 - DOM and AJAX - Fetch API
45 - Web components and custom elements
46 - Challenge - Mini form validator
47 - Solution - Mini form validator

8. Accessibility, Performance, and Best Practices

48 - DOM manipulation performance tips
49 - Accessibility considerations
50 - Cross-browser compatibility
51 - Challenge - Accessibility audit
52 - Solution - Accessibility audit

9. Real-World Project - Interactive Resume App

53 - Project overview
54 - Walkthrough the Node.js backend
55 - Showing sections
56 - Showing and adding experiences
57 - Adding and displaying contact information
58 - Challenge - Adding a feature
59 - Solution - Adding a feature

Conclusion

60 - Next steps