Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Selecting Elements and Adding Events with JavaScript Perform: Selecting Elements

Camila N
Camila N
10,677 Points

Why 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?

This 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.

Camila N
Camila N
10,677 Points

john larson Yes, maybe I didn't express correctly what I wanted to know haha I meant, what is better? performance-wise?

Camila, that is a great question and I have no idea.

3 Answers

Steven Parker
Steven Parker
212,140 Points

Since 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.

lol, 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
Camila N
10,677 Points

hmm 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
Steven Parker
212,140 Points

John, 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 :wink:) to jump in while I was composing.

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
akak
29,444 Points

Apart 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.

'GetElementByID' is intuitive, related to 'Element'. Having said that I will use querySelector from now on.