English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 35m | 358 MB
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.
Table of Contents
Introduction
1 Enhance your JavaScript DOM knowledge
2 How to use the GitHub-hosted exercise files
Understanding the DOM
3 What is the DOM
4 DOM vs. HTML vs. JavaScript
5 Exploring the DOM with DevTools
6 DOM tree and node types
7 Challenge DOM detective
8 Solution DOM detective
Selecting DOM Elements
9 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
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
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
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
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
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
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
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
Resolve the captcha to access the links!