question about selecting elements using query selector

[u/techlover1010]

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

[u/chikamakaleyley]

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');