Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Vanilla JavaScript: Building on the Document Object Model (DOM)

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

1h 48mAdvanced2021-06-29

Authors

W. Scott Means

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

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal