Exercises: The querySelector API - DOM In Depth

Let's go through some exercises to get some practice with the querySelector API in Javascript together.

We start with a warmup exercise to select the Google image logo from their hompage.

In exercise 2, we look at a the Wallhaven website to pick out an IMG tag from the list of image cards.

Then, we try to grab all of the "src" attributes for all the IMG tags on the first page of the Wallhaven.

We wrap up the video by trying to get all the "href" attributes of the NAV bar of the Wallhaven site.

Chapters:
00:00 Introduction
00:27 Warmup Exercise - Google Logo Selector
08:42 Exercise 1 - Wallhaven IMG Selector
18:30 Exercise 2 - Wallhaven ALL src Selector
28:20 Exercise 3 - Wallhaven ALL href Selector
37:30 Next Steps

[hareshlakhwani]

Again great learning please keep posting video in depth

[mnnw]

keep this amazing work Nader, from Egypt with Love

[mnnw]

const nodeList = [src]");
const newarray = Array.from(nodeList);
newarray.forEach((node)=> ;

[kalixaegus]

Just keep doing vidoes for javasacript dom we need it a lot your videos are really great!!!

[CappyVLNT]

I understood the theory behind grabbing the #id in the warmup but for me when I was inspecting the google homepage there was no id attribute on the img element but the class attribute still was the same weirdly generated name so hindsight using the class css selector would have been better as they didn't change that 😁

for the ending what is actually the difference between doing the vs doing querySelectorAll("nav a") wallhaven site seems to be down out of service atm of writing this comment, so can't really test it out sadly enough

[mnnw]

const ul =
const ulLis =

ulLis.forEach((li) => > a").href));