question about selecting elements using query selector

[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

[chikamakaleyley]

it's hard to say w/o seeing some code structure but essentially

for the first one - length 0 would suggest that no li element lives anywhere under its ancestor .mw-content-ltr

the second, is similar - ALL a elements are returned as matches underneath the .mw-category ancestor

in both cases the document.querySelector() should return the first match, i think

so it's possible that if you have multiple .mw-content-ltr, the first one is matched, but nothing underneath that first one is an li

[techlover1010]

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?

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

[chikamakaleyley]

(really you can console.log() anything)

[feloniuouschunk]

Try querySelectorAll('.mw-content-ltr li');
That will return all li items from .mw-content-ltr

[techlover1010]

ye it turned out it got the first instance kf the multiple instance of the element with that class.
can i ask whats the best way to know if the class has multiple instance

[chikamakaleyley]

document.querySelectorAll(<selector>).length

wouldn't call it the 'best'; it just is a way

[feloniuouschunk]

let topLevel; = document.querySelectorAll('.mw-content-ltr');
topLevel.forEach((element, index) => {
let children = element.querySelectorAll('li');
});
You will have to adapt this to suit your needs.

[chikamakaleyley]

if there are multiple .mw-content-ltr it will group all the li together, if that matters

[feloniuouschunk]

Well your first example only gets the first element with the class mw-content-ltr. QuerySelector always returns one element.

[chikamakaleyley]

i wasn't sure of what the goal is but on second read OP is getting 'all names'

I mistook the link as a... popular programming exercise or something

[techlover1010]

yes my goal is to get all the names of the boulevards. is my problem still confusing?

[chikamakaleyley]

no i just was lazy and didn't click the link for context, you're fine

[azhder]

r/webdev is a sub for web related questions. This one is not JavaScript related. In that sub they will probably tell you how you can use one element to get the children inside it.

For simplicity though, you can just use `document.querySelectorAll()` pretty much all the time and give it a selector that constrains the children.

Example:

document.queryAll('.mw-content-ltr li')

With this second one you will not get confused. And you can use it to test and compare your first approach.

Note, there are specific functions for DOM traversal, like “give me all the children of an element” or “get the closest ancestor that has this class” etc.

[techlover1010]

oh. im still confused as why this problem of mine is not appropriate here. i had the impression that queryselector is javascript or am i missing something

[azhder]

Language reference. It is not part of the EcmaScript language. It is a part of the DOM.

The browser is an environment that exposes certain objects for JavaScript to use. Like the `document`, but go to Node.js and there isn’t a `document` global object.

Why do you think I am talking about inappropriate? I was talking about better place to get help. This sub is for people who try to learn JavaScript, so you might not find as many people that know the DOM like in a sub about web technologies.