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 (Retiring) Traversing the DOM Using parentNode to Traverse Up the DOM

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Posted by Saqib Ishfaq
Saqib Ishfaq
13,912 Points

what's the difference between these two? using TagName and QuerySel..

at 5:50 of the video teacher created this

const ulList = divList.querySelector(ul);

but i used this >>(code below) and works exactly the same! but just wondering shudnt it just remove the 1st item on the 'ul' as [0] , on been the 1st index position. when i click the remove button.

const ulList = document.getElementsByTagName('ul')[0];
Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

sorry but just bear with me, i may be just over complicating things! heres my code https://w.trhou.se/fadahqpwxm so here i used const ulList = document.getElementsByTagName('ul')[0]; and it shows all li's ...............one two three, like this>>> <ul> <li>one</li> <li>two</li> <li>three</li> </ul>

my question is, shouldnt it give me only 'one' being at [0] ???

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

@SafiqIshfaq Ahh i think i just figured out where you're havin doubts. See your HTML file has only one ul element, right? Hence it'll return an array of only one ul entry , alright? But this ul element has its own children li elements, so yeah you'll get every one of 'em li elements. Catch my drift? (:

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

ok i understand, but why do i have to do [0] if its only the 'ul' element in the html ! shouldnt it just give me the entire 'ul' with its children regardless of putting [0] or not when selecting it in 'const ulList'

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! There is a subtle difference between both methods. The querySelector() gives you the first element it encounters from the given element or id or class. Say if you've two divs with same class name, querySelector() will get you the first div.

On the other hand, getElementsByTagName() will give you an access to an array of elements even if there is a single element on the page. And its only takes tag name or element.

~ Ari

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

so does it mean , getElementsByTagName() gives me all '<li>' tags being at the first index position [0] or only 1st '<li</li>>' (1st list item) ????

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Nahh individual entry represents individual tag. Like if there are 5 li tags, then array.prototype.length will be 5. Catch my drift?

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

not entirely sure! u said getElementsByTagName() will give me an access of an array, so if there are 5 list items in that array would i get 1st item of that array or all of them in that array? because when i use // const ulList = document.getElementsByTagName('ul')[0]; i still get all of the list items ! which works fine in this project, but want to find out how is it working then. because guil used //const ulList = divList.querySelector(ul); to access all list items in 'ul' so my question remains the same, when we use ' querySelector('ul') ' does it give us all 'li' items in that ul ? or it sshuld giv us only 1st 'li'

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Nahh @SaqibIshfaq you'd get an array of 5 entries and its upto you which indexed entry you'd like to choose. Like in the example code you posted above, you'd get an array of all ul elements. And then you retrieved the first ul elements coz you added "[0]".