Vanilla JavaScript: Building on the Document Object Model (DOM)
1h 48mAdvanced2021-06-29
Authors

W. Scott Means
Software Developer, Consultant, Author
Course details
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.
Skills covered
CSSJavaScriptOracleFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentDeep Dive (X:Y)
Concepts
Introduction
- Learn the JavaScript DOM inside and out
- Where to start
Key DOM Concepts
- The Node interface
- DOM-specific maps and lists
- Random access with querySelector()
- CRUD in the DOM
- Challenge - queryAll++
- Solution - queryAll++
HTML to DOM
- Where does the DOM come from
- DIY HTML parsing
- Building a firm foundation - The lexer
- Parsing text
- Parsing comments
- Parsing elements
- Parsing attributes
- Challenge - Void elements
- Solution - Void elements
Transforming the DOM
- Traversing the tree
- Building a pretty printer
- Processing document fragments
- Processing comments
- Processing elements
- Processing element attributes
- Handling text and cleanup
- Challenge - Empty tags
- Solution - Empty tags
Conclusion
- Level up your DOM skills