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.
On 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?
Jason Larson7,539 Points
I'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 NordellTreehouse Teacher
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".
<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!