Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM Making Changes to the DOM Append Nodes

Kelsey Donegan
Kelsey Donegan
3,342 Points
Posted by Kelsey Donegan
Kelsey Donegan
3,342 Points

How do I find get or reference specific <ul> tags when there are many?

It's easy to reference it in this code by just using document.querySelector('ul') because it's the only one. How do I find a specific one in more complex code with multiple <ul> tags?

2 Answers

jb30
jb30
44,807 Points

To get a NodeList of all the <ul> elements on a page, you could do document.querySelectorAll('ul'). You could then select a particular node by its index number, such as document.querySelector('ul')[3].

You could add a class or id to the <ul> element, and select the element using the class or id.

You could change your selector to make it more specific, such as document.querySelector("nav ul").

Kelsey Donegan
Kelsey Donegan
3,342 Points
Kelsey Donegan
Kelsey Donegan
3,342 Points

All great options, thanks for a clear and helpful answer!

David Shulkin
seal-mask
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 10,255 Points
David Shulkin
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 10,255 Points

If there are multiple ul's in the markup they will usually have classes or id's attributed to them , which you would use to select them by.

For instance: using the example were currently working with:

<ul class = "thisClass" aria-live="polite">

const x = document.querySelector('.thisClass');

console.log(x)

returns:
      <ul class = "thisClass" aria-live="polite">
       ....
      </ul>
olushola oludipe
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
olushola oludipe
Web Development Techdegree Graduate 18,495 Points
olushola oludipe
.a{fill-rule:evenodd;}techdegree seal-36
olushola oludipe
Web Development Techdegree Graduate 18,495 Points

If i understand your question well you're asking how to target a specific class if you have multiple classes of the same name, well I think the best way is using the qurerySelector() method. with that you'll be able to use more specific css selectors like nthchild and others to target your markup.

hope this helps.