Exercises: DOM Navigation Methods - DOM In Depth

Let's go through some exercises on DOM Navigation together to get more practice with the DOM.

We start by writing out own HTML and picking out both HTML and Text/Comment Nodes from the DOM using our dev tools in the Browser.

We then move on to third party websites like Craigslist, Wikipedia and eBay to grab different content off their webpages from within the dev tools.

I'd highly encourage you to practice this on any sites that may interest you as well!

We look at:
firstChild and firstElementChild
lastChild and lastElementChild
childNodes and children
nextSibling and nextElementSibling
previousSibling and previousElementSibling
parentNode and parentElement

Chapters:
00:00 Introduction
00:43 Warmup Exercise - DOM Navigation
14:21 Exercise 1 - Craigslist Navigation
28:35 Exercise 2 - Wikipedia Footer
36:28 Exercise 3 - eBay Nav Bar
50:54 Next Steps

📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/dom-in-depth

💬 Come join us on Discord to chat with a like-minded community about tech and learning:   / discord  

🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon:   / techwithnader