This beginner's tutorial covers the fundamentals of the Document Object Model (DOM) in JavaScript. Learn DOM structure, element traversal, manipulation, and event handling with a hands-on Expense Tracker project. Perfect for aspiring front-end developers.
Course created by @logicBaseLabs
⭐️ Resources ⭐️
? Project Source Code: https://github.com/logicbaselabs/play-with-dom
? HTML DOM Events List - https://www.w3schools.com/jsref/dom_obj_event.asp
? DOM Selection Cheat Sheet - https://www.facebook.com/logicbaselabs/posts/pfbid0GAMBk7X2kHkgCkAtNZmUZGcn6weLpnAX99jbeiHpbefgJu2kCRZxTKXvgikkzijql
? DOM Traversal Cheat Sheet - https://www.facebook.com/logicbaselabs/posts/pfbid02Nm8T1ExwFQH6aRrPDkLVQhaZXVMsxnMP6qG4QqytXTcgjN2UxsXDcegiEgKr2wYRl
? DOM Manipulation Sheet - https://www.facebook.com/logicbaselabs/posts/pfbid031qFufNBnzPe6arn7DoQExBmNFunjmy7Zwu4eZF1pzgMVKZVvA91qeF3rEaiQ3BK5l
? DOM Project Ideas - https://www.facebook.com/logicbaselabs/posts/pfbid0Gw1tkEqxHbcApV6Dn2bbb4PFDw1hCfCD9JwXooFA87Tm8cRAkKTajJ2JHu37oRoSl
? logicBase Labs YouTube Channel - https://youtube.com/@logicBaseLabs
? logicBaseLabs LinkedIn Page - https://www.linkedin.com/company/logicbaselabs
? logicBaseLabs X - https://x.com/@logicBaseLabs
❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
⭐️ Chapters ⭐️
- 0:00:00 Intro
- 0:02:28 Lesson 1 - What is DOM
- 0:08:23 Lesson 2 - Analyze the DOM
- 0:20:51 Lesson 3 - Traversing DOM Elements
- 0:42:09 Lesson 4 - Traversing DOM Hierarchy
- 0:54:45 Lesson 5 - Manipulate the DOM
- 1:05:59 Lesson 6 - Listening to DOM Events
- 1:21:43 Lesson 7 - Project Expense Tracker App
- 1:55:32 Final words
? Thanks to our Champion and Sponsor supporters:
? Drake Milly
? Ulises Moralez
? Goddard Tan
? David MG
? Matthew Springman
? Claudio
? Oscar R.
? jedi-or-sith
? Nattira Maneerat
? Justin Hual
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news