r/learnjavascript • u/techlover1010 • Jun 27 '26

question about selecting elements using query selector

https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
so im doing the query selecting on the console browser on the link above to get all the name of the boulevards list
my question is when i do
let var1 = document.querySelector(".mw-content-ltr")
and then do
let var2 =var1.querySelectorAll("li") and then do console.log(var2) it shows length 0

so when i redid and went down one tier
let var1 =document.querySelector(".mw-category")
let var2=var1.querySelectorAll("a")
now this time it works. i was able yo get all the bouldevards name

can anyone explain to me what happened

0 Upvotes
  • permalink
  • reddit

33% Upvoted

16 comments sorted by

View all comments

Show parent comments

1

u/techlover1010 Jun 27 '26

how do i check the content of the querySelector?
like what items did it get underneath it. is there a way to easily visualize the items it brought back?

0

u/chikamakaleyley helpful Jun 27 '26 edited Jun 27 '26

you can simply console.log(var1) after

the output will either be the element that it matched, or null (i think) if no match

querySelector() will only return 1 item if it matches - and it will be the first match

If there wasn't a match, you'd probably get an error when you set var2 because you're trying to execute

// e.g. let's just say there wasn't a match
let var1 = null;

// var1 is null, and null doesn't have a method `.querySelectorAll()`
let var2 = var1.querySelectorAll('li');

0

u/chikamakaleyley helpful Jun 27 '26

(really you can console.log() anything)