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

Posted by Mahmoud Nasser
Mahmoud Nasser
5,507 Points

Selecting Elements in The DOM 

 let ul = document.getElementsByTagName('ul')[0];

what does [0] mean in this code block ???

2 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Mahmoud Nasser,

The getElementsByTagName method returns an HTMLCollection of HTMLElement objects, this type of collection can be confusing to a lot of new comers as it shares similar traits to an array but is slightly different in some regards. In the case of the example you've given, passing [0] as the last part of the declaration says we want the first item in the collection.

In the vast majority of programming languages collections, arrays and/or lists always start at index zero. In the case of your example we will get the first found unordered list in the DOM.

For more information about this method have a read of the MDN page which has a ton of useful information and examples.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

Happy coding!

Mahmoud Nasser
Mahmoud Nasser
5,507 Points

Thanks bro i got it

Mahmoud Nasser
Mahmoud Nasser
5,507 Points

am sorry i got confused the index [0] mean that it will get the first item in the unordered list or it will get the first unordered list it find in case there is many unordered list thanks in advance

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

The method is selecting from many unordered lists in the document. That's what it needs to return a HtmlCollection object. It looks for one or more instances of the given element and then select the right one with the array index. It's the array index that determines which of the unordered lists (if there's more than one to select). It doesn't select the child list items. Only the lists.

Example. Here's a HTML document with 3 unordered list elements.

<!doctype html>
<html lang="en">
    <head>
          <title>Title</title>
    </head>
    <body>

     <ul>
          <li></li>
          <li></li>
          <li></li>
     </ul>

     <ul>
          <li></li>
          <li></li>
          <li></li>
     </ul>
     <ul>

          <li></li>
          <li></li>
          <li></li>
     </ul>
    </body>

You could then select all three in 3 different lines of JS, passing in the correct array index.

    let ul = document.getElementsByTagName('ul')[0];
    let ulTwo = document.getElementsByTagName('ul')[1];
    let ulThree = document.getElementsByTagName('ul')[2];

There you have 3 different selections for each unordered list

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

This is a zero based index. It means when you're selecting from a collection of elements rather than just the one, if you want to get a specific instance of a HTML based collection you can specify it with that index.

So zero based means the first in a collection just like with regular arrays.

Mahmoud Nasser
Mahmoud Nasser
5,507 Points

thanks a lot i got it