Vanilla JavaScript: Building on the Document Object Model (DOM)

Vanilla JavaScript: Building on the Document Object Model (DOM)

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 47m | 363 MB

At the heart of every web application and framework (such as Angular or React) lies the DOM, the Document Object Model. In this course, instructor W. Scott Means explores the DOM from the bottom up. After a fast-paced introduction to the Node interface and DOM trees, Scott takes things to the next level by constructing a functioning HTML parser. He shows you how HTML source code is translated into a complete DOM tree, including comments, text nodes, and elements with attribute nodes. Then, Scott demonstrates how the resulting DOM tree can be traversed and transformed using DOM-specific maps and lists, tree references, and document fragments to produce pretty-printed HTML output. He concludes the course with advice on how you can practice what you’ve learned and get one step closer to mastering the DOM.

Table of Contents

1 Learn the JavaScript DOM inside and out
2 Where to start

1. Key DOM Concepts
3 The Node interface
4 DOM-specific maps and lists
5 Random access with querySelector()
6 CRUD in the DOM
7 Challenge queryAll++
8 Solution queryAll++

2. HTML to DOM
9 Where does the DOM come from
10 DIY HTML parsing
11 Building a firm foundation The lexer
12 Parsing text
13 Parsing comments
14 Parsing elements
15 Parsing attributes
16 Challenge Void elements
17 Solution Void elements

3. Transforming the DOM
18 Traversing the tree
19 Building a pretty printer
20 Processing document fragments
21 Processing comments
22 Processing elements
23 Processing element attributes
24 Handling text and cleanup
25 Challenge Empty tags
26 Solution Empty tags

27 Level up your DOM skills