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

Explore the most crucial foundation of all web apps, the Document Object Model.

Introduction

• Learn the JavaScript DOM inside and out
• Where to start

1. Key DOM Concepts

• The Node interface
• DOM-specific maps and lists
• Random access with querySelector()
• CRUD in the DOM
• Challenge: queryAll++
• Solution: queryAll++

2. 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

3. 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