Scoping querySelector

[00:00:00]
>> Going back to our HTML that doesn't look so weird like the other one. So it's just an HTML. So forget about the templates for now we will see that later but the rest is just HTML. Nothing really important. I don't have any JavaScript file. The only JavaScript file that I do have here.

[00:00:18]
It's serviceworker.js. That is kind of empty. This is the one that is making the magic for the installation, the PWA installation, okay, that we won't cover today. But it's not even linked at this point. So you don't see any JavaScript file, okay. But before adding some JavaScript I start rendering this.

[00:00:39]
And when I go to the console here, and I start playing with the DOM. So we already mentioned that we have the document, we have the window and we have the document. So for example, here I can ask for the document to the web querySelector, and I can try to find here all my header elements.

[00:01:01]
And it's giving me the header element. So document.querySelector, it's actually picking one element from the DOM. The first one in this case with that selector and that's a tag selector, okay? So if we look at our code, let me show you here. The header we have an h1, we have nav.

[00:01:23]
And for example in the nav we have links, these anchor elements that they have here, the links, they have a class, for example, they have different classes but one is navlink. So i can actually go and say, okay, document.querySelector.navlink dot because it's a class. And it's giving me only one link.

[00:01:47]
Not both. Why? Because I'm using querySelector. querySelector is always giving you one element. This is actually a very common mistake when you're doing VanillaJS that you forget that Query Selector is giving you only one. But we have also querySelectorAll that returns a NodeList of 2. So now I have both links.

[00:02:14]
Okay, so that's how you pick elements from here. And what if you do a querySelector or querySelectorAll of something that doesn't exist like .important? Null. Because I don't have any node with that class. And what our querySelectorAll? It's an empty NodeList, like an empty array, node null, and we mentioned that.

[00:02:42]
When we are picking one element if it's not there it will be null. If you're picking multiple elements, if no one has found is giving me an empty array, not null, okay? So things to have in mind when you're dealing with these things. And by the way, I'm always using the DOM API over the document object, right?

[00:03:06]
But that's not completely the only way to do that. Let me show you this. Going back to the elements, I have for example here a nav, right? And within the nav for example I have span, okay? So we have nav, I have a span. So what if I wanna get to the span?

[00:03:28]
Well, I can go to console and say document.querySelector(span). Okay, yeah, I got the span. It has an id, so I can also say span with id badge. Is it working? Yes, I'm getting the object in return, so it works, but we are making a query in the whole document, which might be a good idea or not.

[00:04:00]
In fact, most people complaining on the performance on VanillaJS is because they're always querying the document and not specific parts. I could say, for example, that I wanna first get, in this case the nav. So I can do a querySelector and get the nav element, okay, like so.

[00:04:25]
I can store that into a variable and then I don't need to use document.querySelector. I can use nav.querySelector because the DOM API is not just available in the DOM document object, also it's available in every DOM element. So now I can query only within the nav. Make sense?

[00:04:53]
So yeah, we did two queries, but of course, because it is a variable, this is like caching the reference. So I can then store that nav object and use it many times later. To then find elements in that, like fragment of the document. Remember that someone asked about document fragment.

[00:05:12]
Well, this is kind of the same idea where document fragment is like a separate option. But we can then query for specific parts of the documents. So we are narrowing the query for being more performant, okay. So all the API that we have seen is actually available on every node object, not just in document.

[00:05:36]
So when you understand how this work, your brain will start organizing. Okay, how can I do things in my page? Okay, mostly we, I mean we are going to talk about performance and we're going to explain where and which parts performance is an issue. Okay, but we want specifically today, like the most performant solution because we are learning from scratch.

[00:06:03]
It's better to learn the basic concepts and then maybe get deeper into performance. But this is a very simple way to understand the difference, sometimes searching the document will take more time. Of course that different browsers we have different techniques to make that faster. Anyway, you know that there are browsers that are faster than other browsers.

[00:06:24]
And why is that? Well, they implement things differently. For example, they might implement different indexes on when you're searching with querySelector generally find elements faster or things like that. You can also start your project by creating references, like storing variables of all the elements that you will use a lot so that you don't need to query those objects with a kind of a lazy load.

[00:06:54]
You can prefetch those queries beforehand, okay, just by creating variables. Does it make sense? Okay, and remember that we are querying here. We are working with the DOM, not with our original HTML. So we are working with a dynamic structure that we have in memory.