Targeting Javascript in Javascript and the Dom Section 5 video 1

Hello John,

there is document.querySelector() and element.querySelector(). In this case both return the same value.

All in all, as document.querySelector() uses a depth-first pre-order traversal of the document's nodes it would be more efficient to use element.querySelector() when you know that what you are looking for is a child of an element.

Hi John here is why we are using listDiv.querySelector instead of document.querySelector("ul")

Remember how Guil said in one of his video it is better to target the parent element that is as close to the the target as possible?

Here is why we do that. If we use document.querySelector("ul") that will work fine for this project. However let's imagine you add some more code in a few days time to your project and that code has another set of UL & LI before the one you already have. Now everytime you run your event listener your event listener function will run on all your UL. To eliminate that problem we are using listDiv.

We are basically telling the browser that give us the UL only within the listDiv. Don't perform our action on any other list dive. This is called the rule of specificity. In web development the more specific you are the better in most cases.

Hope that helps.

So it was a mistake? Or can element of the element.querySelector be anything

Ok I see it. Im a newb sorry