 First, it was InfoPath. Then, Silverlight. Eventually, Internet Explorer joined the ranks of the dead. Will jQuery be next? Can we just address the fact that we are all so happy that Internet Explorer is dead? I think in a lot of ways, actually, so full disclosure, jQuery is not dead. It's just that a lot of the stuff that jQuery provides can be done natively in modern browsers. I think that's the point about the fact that Internet Explorer is now officially dead. Is jQuery as needed as it used to be? I think jQuery was the thing that patched that Internet Explorer experience so that you could write a code base and address Internet Explorer and other more modern browsers at the same time. I mean, jQuery was originally introduced, if I remember correctly, as a compatibility library. It was there because all the browsers were a little different. Then they all got to be the same except for Internet Explorer. Now, Edge solves that by having an IE mode that works with the old enterprise apps that haven't got updated. The actual browser is Chromium, which is super compatible with everything. Exactly. Today, we're absolutely going to be talking about those things you can do natively. Here we are. I'm starting out in the results screen because what I want to talk about first is just to go over some examples of what's called CSS selector syntax. This is what jQuery used. There's just ways to use the CSS selectors to get at the elements that you want. We're going to start by talking about query selector. Query selector can be executed against the window, against the document, or against an element, a specific element. I'm going to use document for all the examples, but just know that you can use those. We'll have links to references so you can read more about it if you're interested. Just to be clear, if I'm getting this right, instead of document.query selector of selector in jQuery, I would have done dollar sign selector. That's right. It's the same thing. Except for jQuery would return you a jQuery object, which was the special thing. That's true. This returns you an element. The actual DOM element. Nice. Starting out with query selector, this returns the first matching element to your selector. It's important to understand that. If there are more than one that matched the query selector, it's going to find the first one starting from the top of the dependencies of the thing that you're query selecting from. To get an element by ID, obviously you can use get element by ID, but you can also use the query selector with a pound sign and an ID of the element. You can use that. Another way is if you want to find an element by the HTML tag, you can do a query selector for the element. You can also then find an element by one of its attributes. Since you can actually make up your own attributes, if you had an attribute maybe called data dash ID or data dash output, excuse me, where the ID was data dash output, you could do a query selector where use the braces. That means an attribute. Where data ID equals data output. It's going to find the elements with that particular attribute that has that particular value. You can also then query by class name. You can say give me any elements that have the class, my class, for instance. That's another way to do that. You can of course combine these together. You can do all the divs with this attribute or things like that. Nice. Then in addition to that, you have this query selector all. This gets you back an array of elements or nodes. In this case, you just change what your property is, but all the selectors are the same. If you do query selector all with data ID, just data ID and no value, you could get all of the elements where that have a data ID tag. It doesn't matter what the value is. Or excuse me, attribute, not tag. Get all the div elements on the page. Just pass in div instead. Or get all of the elements with that particular class. That's another way that you can do that. Switching over, let's go back to the JavaScript here because I have some other things that you can do. Create element. If I click create element, says this is a new element. Let's come back over to the JavaScript and look quickly. I have some functions that I defined really quickly here. You can just do document dot create element and say I want a new div. Then all I did in this case is I went and used the standard get element by ID and appended the child, a child element of the new element that I created. That's how to create an element. It's now by inheritance I've explained append child. There's appending a new child element. This is handy for the LI example. If we come down here and say if I want to append the child, I can add a new element to that ULLI class there. Getting and setting attributes. If I want to set this attribute to pink, I can do that. Let's come back to our JavaScript here and we'll have a set attribute. Essentially what I'm doing is I'm saying get element by ID. I have an element that I called get attribute. I'm going to set the style background color to pink. Then I can update the inner text of that element to say the word pink. I'm just effectively getting the attribute back and setting it to the inner text. You can kind of see that I can set it and I can get it. Then last one is the event listeners. I have it on the other side. All of those buttons that you saw in my results have buttons that have an event listener. The way that I assign what the click event is going to do is by adding an event listener to the click event and then saying, okay, when the click event happens on the create element button, then I'm going to call the create element function which is this right here. That is the get element by ID. Yeah, that's great. What's left that you could have done with jQuery? Lots. There's a lot of other functions that we didn't cover here about finding elements in relation to each other and other things like that. There's more goodness that could be done. As I sort of said at the beginning, you can get an element and then use that element to query select something else. You can traverse the DOM that way. Another thing that you can do is if you put commas in between those selector syntax that I was explaining, that can be an OR function. You can create a few query selectors and then say if the data ID is this or the class is this or some other thing about it. You can use commas in between those to combine a bunch of query selectors together to form an OR situation. Well, it's great. I guess the other things I can think of are not under the DOM manipulation banner. Things like fetch is now the built-in way to do the equivalent of arrest call from JavaScript, sorry, from jQuery and promises. I remember I used to use jQuery for promises and now they're built in and they even have, jQuery doesn't have a single weight, does it? It doesn't like on our last video. There you go. If you missed that one, go check it out for sure. Absolutely. Cool. Hey, did you like this video? Was it interesting? Did you get anything new? Would you like to learn anything more about this topic? Please like this video and consider subscribing to the Voigtanos channel to get notified of any new videos updated. And check out BabyRA Sync Await video, the last one, to learn more about that. Great. Thanks for joining us today on Browser Native.