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
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsOn the 'taskList' variable, do you need to select <ul> if the class is only used there?
On the 'taskList' variable, querySelector selects ('.list-container ul').
The only time the class 'list-container' appears is there. Would there be an issue if the 'ul' was omitted? If so, why?
For example: const taskList = document.querySelector('.list-container');
Would this option work/would it be clean code?
2 Answers
Jason Larson
8,353 PointsI'm not sure which video you're referring to, but yes, there would be an issue if you omitted the 'ul'. As it stands, you're setting the taskList variable to a ul element. If you omit the ul, you'll be setting taskList to the first instance of whatever type of element is assigned the class "list-container". (Without seeing the code, I'd guess it's probably a <div> or something similar, and I doubt that is what you're are wanting to do.)
Depending on the HTML, you MIGHT be ok omitting the '.list-container', but not omitting the 'ul'. This would only be applicable if the ul that you are trying to select is the first one in the document.
Hopefully, this clears it up for you, but if not, reply back and I'll try to clarify.
Jennifer Nordell
Treehouse TeacherHi there, Sean Flood! I'm just following up on your follow-up question, though Jason Larson answered just brilliantly!
I think maybe you're missing what is being selected actually and I'd be curious to know which video you were working on at the time. If you dropped the "ul", you wouldn't be selecting the unordered list anymore. You'd be selecting whatever parent had the class "list-container".
For example:
<div class="list-container">
<h2>Some example text</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
If we dropped the "ul", the element returned by the querySelector is the element with the class "list-container", which isn't a <ul>. It's a <div>. But if we include the "ul" with querySelector(".list-container ul"), that says "get the <ul> that you find that resides in an element that has the class "list-container".
Hope this helps!
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsSwan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsHey Jason thanks for your response! If '.list-container' is the only class in the document, why do you need to specify the <ul> as well though? I can see how the specificity of it would be needed if there were multiple things tagged with that class. But if there was only one instance of the class '.list-container', would you still need the <ul> tag? If so, why?
And this isn't for any code I am working on, I'm just curious as to the mechanics of the whole thing.
Thanks again!
Jason Larson
8,353 PointsJason Larson
8,353 PointsI agree with Jennifer Nordell that you might be missing what the code is actually doing, but I'll try to answer anyway. It doesn't matter if there is only one class or a thousand classes in the document, if you are trying to select an unordered list for some purpose, you cannot omit the 'ul'. The only exception to this is if you are targeting a ul that has the name of the class that you are selecting. If that is the case, you would actually have to drop the 'ul', as otherwise you would be targeting the wrong thing.
After re-reading your question, it sounds like you are thinking of it as '.list-container' is specifying the 'ul', kind of like '.list-container' was a broader category, and 'ul' was the specific category. Or to put it a different way, if you went to a restaurant that was only open for dinner (and you knew that they only had a single menu), and you asked to see a menu, you wouldn't need to say that you wanted a dinner menu because that would be unnecessarily specific, since it's the only type of menu that they have. In reality, it's more like you're walking in to an office supply store and asking to see anything that you could use to display a menu. You might be shown paper, chalkboards, whiteboards, poster board, cardboard boxes, etc. And let's take this a step further and say that the staff was super helpful and actually wrote menus on each of the different materials, and some of the menus were a drink menu, and some were a dessert menu. Now we'll say that you decide that you like the way the list on the whiteboard looks, so you ask for the whiteboard. They take it in the back, and come out with a whiteboard in a box. You take it home and open it up, and the whiteboard has nothing on it. If you had actually meant that you wanted the staff to create a menu for you and you wanted to buy the menu that was on the whiteboard, you would have been disappointed. That's what happens with your querySelector if you just ask for '.list-container' (except that it doesn't have to actually be things that can contain a list because you give it the name). Since you're omitting the 'ul', you're not going to get back an actual list of items, you're just going to get back the elements that have a class that says that they can contain a list. If you had told them that you wanted to buy the actual menu that they made on the poster board, but you wanted it on the whiteboard, they would probably have charged you for the whiteboard as an item, and the creation of a menu as a service because those 2 things are fundamentally different. The same goes with your query. If you have a querySelector for a '.list-container", you're getting back whatever type of element is first assigned a class of 'list-container'. If you have a querySelector for a 'ul', you're going to get back the first 'ul' element, which is an actual list, along with any items that might be on the list.
I hope this helped, and it wasn't just rambling that made things more confusing.
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsSwan The Human
Full Stack JavaScript Techdegree Student 19,338 PointsJason Larson Thank you very very much actually for your rambling explanation because that was the only thing that got me to understand haha. Although, I do very much appreciate the other response, your crazy version was exactly what I needed. I like the way you put it by saying yes you are referring to a list-container but just because that is the name doesn't mean it's specifying that it's a <ul>
Cheers for your absolute beast mode determination to help me understand!
I guarantee the next time I encounter this situation, I will think of your reference!