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
Camila N
10,677 PointsWhy can't we just use querySelector(selector)?
If we could use querySelector, we could just select the elements as we would do on css. For example:
document.querySelector('ul#incomplete-tasks');
Edit: What's is better for the performance of our application?
Camila N
10,677 Pointsjohn larson Yes, maybe I didn't express correctly what I wanted to know haha I meant, what is better? performance-wise?
john larson
16,594 PointsCamila, that is a great question and I have no idea.
3 Answers
Steven Parker
230,274 PointsSince you are looking for an element by id, it makes sense to use the function designed specifically for that (getElementById). The querySelector function can find the id also, but it's designed for much more sophisticated selections and is less efficient for this situation.
john larson
16,594 Pointslol, before you finished posting your answer there was STBY, where your post would be. I thought "That's not like Steve". cause I looked it up and it's not very flattering. Your actual post in however very informative...as usual.
Camila N
10,677 Pointshmm that's not correct. querySelector returns just one item (the first one that matches, actually). querySelectorAll returns an array with all the matching elements.
Steven Parker
230,274 PointsJohn, I meant that as an abbreviation for "Stand By", and now that you've reminded me that it has a different internet slang meaning, I'll try not to use it anymore. I just didn't want anyone (like Jennifer 
And Camila, I agree both will return the same result. They must, since you can only have one element with a particular id in a document. I just meant that you don't need the extra sophistication if you have an element Id.
So, to more directly answer your original question, certainly you can just use querySelector if you want, but getElementById would likely have a small performance advantage.
akak
29,445 PointsApart from a very slight performance boost querySelector doesn't work with IE < 8. But there are not many project nowdays that would target those browsers. And even if one would have to target those, you can use polyfill. (not to mention that we transpile our code very often that takes care of that as well). I think that Treehouse tries to teach here the basic methods, as it's good to know those but in real life situation, at this point in time I think it's a better idea to stick to just one element selecting method. I don't like code where I have sometimes selectById, sometimes selectByTag etc. It's cleaner and clearer to use one unified solution -> querySelector, and by the selector it can be clearly seen what type of element am I targeting.
lucybeck
6,055 Points'GetElementByID' is intuitive, related to 'Element'. Having said that I will use querySelector from now on.
john larson
16,594 Pointsjohn larson
16,594 PointsThis isn't really an answer but a thought. You probably could do as you suggested, but a lot of times it seems Andrew just wants to expose us to different things in different situations. Also, it seems there is usually many ways of doing things.