Hey what's going on guys so I've been getting a lot of requests after creating my HTML crash course and CSS crash course people are asking for a JavaScript crash course but I think a lot of people don't know that I already have one it's called JavaScript fundamentals for beginners it's not actually called JavaScript crash course but that's what it is we look at things like Creating variables Creating arrays and functions and loops just the basic language fundamentals Alright, so if that's what you're looking for then that's the video to watch and it's actually in the vanilla JavaScript playlist on my channel Alright now what I want to do in this video is go a little deeper than just show you how to create variables and talk about data types and stuff and show you how to actually work with the Dom okay so select items how to change styles how to replace content things that you would do with jQuery but I want to show you how to do it with vanilla JavaScript because using jQuery just for Dom manipulation and just like you know changing a style adding an event things like that is kind of like using a sledgehammer to kill a mosquito it's just not needed anymore We have query selector which is just as good as using you know jQuery selectors So that's what we're going to do. We're also going to just take a look at the Dom in general we're going to look at all the some of the different properties of the document object and We're going to do a little exploring and this is the page We're going to use to do it with this is just a simple HTML page that I created that includes bootstrap Has some bootstrap classes just to make it look good, but it's basically just a header And then we have, you know, a card with a form and then a list group. Okay, and we have certain classes and IDs and stuff so that we can select certain elements. All right, now in the description you'll find a link and it will include the bare HTML file without any JavaScript.
And then as we move along, you can code along with me and add the JavaScript. I'll also have the final versions of the code as well. Alright, so let's go ahead and get started.
So if you guys really enjoy my content and you feel like you really get something out of it, consider becoming a patron to push me to keep bringing you high quality educational videos. Showing your support with even $1 means the world. We have different perks and tiers, including a $2 tier that'll give you every Udemy course that I release absolutely free. To learn more, check out patreon.com slash Traversey Media. Alright, so before we get started, let's talk a little bit about...
what the dom actually is so it stands for document object model and it's basically a structured representation of your html document okay it can be thought of as a tree of nodes or elements created by the browser javascript can be used to manipulate the dom and its elements the dom is object oriented meaning that each node has its own properties and methods that we can go and we can change and we can add we can remove things so we can manipulate basically everything on the page using javascript okay jquery was used to do this for a long time but it's becoming more and more popular to use just vanilla javascript for this and that's what we'll be doing so you may have seen diagrams like this around the web now the browser gives us a window object which represents the browser itself it's the top level object and then we have a root element inside the document Okay, so well in the window we have the document object, basically the core of the DOM. And then we have a root element, which is the HTML tag or the HTML element or node, whatever you want to call it. And then inside that we have children like head and body tags, okay, or head and body elements, nodes. And then those have their own children.
So we have a title for inside the head. We have titles. We have things like meta tags.
In the body we have things like H1s and A tags and all kinds of stuff. And then those tags, those elements, they have text nodes. So for instance, we may have an H1 with the text of my header.
That's also considered a node. We also have attributes connected to elements. For instance, we have an href attribute on an A tag or an A element. So this is the DOM. All of this stuff together.
Looked at kind of as a tree like this is the Dom okay, and we can manipulate this stuff with JavaScript And that's what we're gonna do alright, so let's go ahead and do it alright guys so on the left here I have visual studio code open. I'm using live server if you want to use that you can just click on it extensions and search for it and install it and that'll make it so this auto loads every time you save if I go ahead and I say item lister one and I save you'll see that it'll auto load Alright, so if you're not using an extension like this or atom live server or something like that, then you just have to reload Alright, but let's go over this real quick. So it's just an index HTML file This is going to be included in the description. Okay, and a link in the description and we just have a link to bootstrap to the cdn to version 4. but this doesn't really matter i just wanted to use it to kind of give it a nice style then down here we just have a header inside the header we have a container with an h1 with an id where you have some bootstrap classes then we have under the header a container we have a div with the id of main class of card which gives it this border around it and then we have an h2 a form with one field and a submit button and then we have an h2 and then a ul with the id of items and the class of list group okay and each list item has a class of list group item so that's the dom that that's the um the the html structure that we're going to be working with we will be adding and removing a couple things but this is going to be the basic page that we work with all right now down here we have a script point are pointing to a script called dom.js Which is right here and is completely empty and that's what we're going to be working with.
Alright, now guys I'm going to be moving a little fast here because this is a crash course. But I'm going to go over the most important things as well as I can. Okay, so what you want to do is you want to have your console open. So you want to either hit F12 or go to your tools. You can go to your developer tools.
The console is also available on other browsers, Firefox, Safari, whatever you're using. Because we're going to use this for our output for a while. And then once we get into actually changing things in the DOM, we'll be able to change text and styles and all that. So the first thing I want to do is just kind of examine the document object.
So remember in that diagram I showed you, the document is at the top, and then under that we basically have a tree of elements. We can actually type in the console here, JavaScript. If I were to say alert1, it'll actually execute that JavaScript. In fact, everything that we do in our file here, we could do in the console, but I want you guys to have this as a reference.
That's why I'm doing it all in the file here. What we're going to do is we're going to say console.dir, and we're going to pass in the document object. What this is going to do... is it's going to show us all of the different properties and methods attached to the document object. So you can see we have the URL we can access, we have document.all which will give us an array, not an array but an HTML collection of everything that's inside of that page, that's inside of that document.
There's the document.body which we can access and all the properties of that. So this is a very large tree of properties and methods. I'm not going to go through all of this stuff, but I do want to show you some of the useful stuff.
So let's go over here and we'll just comment this out. And let's look at some of the stuff that we can access through the document. All right, so let me put a comment up here.
And we're just going to say examine the document object. All right. And you guys can use this stuff from within your scripts.
When you create a JavaScript program, you can access this stuff. You can edit it. It's not read-only.
If you want to change anything in the document, you can do that. So let's take a look at, let me see. First of all, we'll look at the domain. So we can say console.log. We can say document.
We can use our.syntax, and we can access any of these properties. So you'll see that there is a domain right here, which is going to give you whatever domain name you're running. So if we say document.domain and save, you'll see that we get which is just basically my local host. That's the loopback address.
All right, we can also access the URL. So we'll say document.url and save. and it gives us basically the entire page and the entire url all right another thing you know what i'm just going to copy this because we're going to be doing this quite a bit this console log document Another thing we could look at is the title of the page. So we'll say document.title, and we get item lister.
And you'll see the title is item lister. If I were to go and change the title over here to, let's say, item lister 2 and save, now you'll see that that has changed as well. And this stuff is not just read-only.
We can change it. We could say document.title, and we can actually set that equal to, we'll say, 1, 2, 3. and now you can see the title has actually changed so you can change this stuff from your um from your scripts all right so another thing we can look at is let's see let's look at the doc type so if we say dot dot type and save you'll see that we're using excuse me we're using the html5 doc type all right so we can also look at the uh let's see the head and body so if we say document dot head that'll that'll grab the head element and we're outputting it to the console and you can see everything that's in the head and as you could probably guess we can also do document.body which will grab the body for us and output it all right so another thing we can do is document.all so if we do this what it gives us is an array or an html collection of everything that is in the DOM. So if we go over and we look, let's look at our index.html file, you'll see if we go, if we start right here at zero, we have our HTML tag, which is up at the top. Okay, and then the next one in the one index is going to be the head.
Then we have the meta, we have another meta. Okay, and if we open this, we can see all the different properties of each of these elements. Okay, so we can get pretty much anything we want on that element and if you go down you'll see the link okay title then we have the body then we have the first element in the body is the header you can see it also has the id and the classes then we have the container then we have the title so we can access any of these okay and we can specifically access them by their index so for instance the header title you'll see as i hover over it it'll it'll it'll highlight it in the browser Let's say we wanted to grab this, and it has an index of 10. So what we could do is we could say console.log document.all, and we could grab the index of 10 and save, and it'll actually give us that H1. All right.
Now, again, we can change things based on our selector. Now, this isn't the way that you want to select things. I'm going to show you the specific methods for selecting things, but you could.
say document.all and then grab the index of 10 and say.textcontent equals hello and save. And you'll see that it actually changed that in the page. But this is not the way that you want to select things. All right. For one thing, if you add something, this 10 is going to change.
If I go and I go before that and let's say we add a span. And we'll just put like a 1 in here or something and save. Now that span is now the 10 index, and that's what's hello. So you don't want to use that method of selecting from the DOM, just to let you know that.
And anything you add into your file here, whether it's in the head or body, it's going to get added to document.all. It's going to get added to that collection. Alright, so let's see what are some other things we can look at now. Let's say you wanted to get all the forms on the page. You could say, let's do console log document dot forms and save.
And we're looking right here. If we click this arrow, it's basically going to be a collection of all the forms. We only have one, so we have in the zero index.
These always start at zero, just like a regular array. And then we have our form. and you can get all the different properties of the form all right now you can do the same thing with like links so if you wanted to get all the links on your page you could say document.links we don't have any so we just have an empty array i say array but it's actually an html collection and there is a difference you there are some there are things like like let's say you wanted to use dot reverse which is an array method in javascript you couldn't do that you'd have to first change it into an array okay but you can select items like it's an array now if you wanted to select a certain item like in our form we have our zero index we could say forms zero like that and it'll give us that actual form all right so hopefully that that makes sense i'm going to just comment all this stuff out so that this doesn't get too confusing um so what else in addition to links we could do images so we can say document dot images and you can get those we don't have any so we're going to get an empty collection What else?
I think that's it. I mean that's not it. Definitely there's more to it. You saw when we did console.dir.document there's a lot of different properties but I'm not going to go through them all because we'll be here all day. But those are some of the interesting ones.
So what about selectors? So basically we have a few different selecting methods we can use to query the DOM. So the first one we're going to look at is getElementById, which I'm sure you've heard of. So what we're going to do here is let's console.log and let's take a look at our DOM, or our structure here. And we have an h1 with the id of headerTitle.
So what we'll do is we'll say document.getElementById and we know that it has an id of headerTitle. Was it header title? No, header dash title.
Okay, so if we save that, you'll see that it'll actually pull it from the DOM, and we're just logging it. We can also put it inside of a variable. So if I copy this, and we say, I'm just going to use ES5 syntax.
So we'll say var, and we'll call this header title equals, and then we'll paste that in. And save, and actually let's... Let's log it. So header title, save, and you'll see we get the same thing.
Now we can do certain things with this header. So we can change the text. So there's certain methods we can use such as text content. And we'll just set that to hello, save, and that'll change it.
Okay, in addition to text content, we also have inner text, which for the most part does the same thing. Let's set this to goodbye and save and you'll see a change because we basically just overwrote it. We overwrote this with this.
Now the difference or one of the differences between inner text and text content is one of them pays attention to the styling. So let me give you let me show you what I mean. So if we go into our H1 here and we put in a span and we'll just say, I don't know, 1, 2, 3, and we'll save.
Actually, this is going to overwrite that. So let's just comment those out. But we get item lister 1, 2, 3. Okay, so let's go ahead and console log.
header title dot text content all right so we get item lister one two three now if I go to this span and I add a style to it of display none okay in the dot and in the page here it's going to disappear it's going to go away now text content is still showing the one two three it's it's it's disregarding that span even though it's set to display none it still shows it here but if we were to change this to enter text and save you'll see that the 123 is not there. So it actually pays attention to the styling. So that's one of the biggest differences between the two. But you can use them for the most part pretty interchangeably.
Alright. So that's what text, content, inner text. We also have inner HTML which I'm sure you guys have seen before if you've worked with JavaScript at all. So let's say header title and we'll say.inner HTML equals and let's put an h3 and we'll say hello save now you have an h3 now if we look at if we look at it through the inspector you'll notice that the h3 is actually inside the h1 now it doesn't change the h1 to an h3 it puts the HTML inside of that that Dom element Okay, so that's what inner HTML does.
Now, if you wanted to actually... Change it the h1 to an h3 you'd have to use some other methods to access the parent element and it's a little more Advanced and we'll get to that in a little bit. Alright, but just keep in mind these these three methods So text content inner text and inner HTML now we can also do style changes Let's go ahead and save this.
Alright, so we just want to I'm just gonna comment this out too So basically we just have the header title So if we wanted to change a style, like header title... In all of this text content, the stuff that I'm doing right now, you can use with any selector, not just document.getElementById. In fact, maybe I should have done all of the selectors first and then showed you this stuff.
But you can use this with any selector. Selecting elements and then using these methods are two different things. So let's say header title and we'll say dot style. That's how you can change CSS styles. Let's say we want to change the border bottom.
All right. Now notice that I used camel case here because you can't do border dash bottom, even though this is the actual CSS property. You can't do that.
So you have to just change it to camel case. All right. So let's say we want it to be solid three pixels.
and black and save and now you can see that the h1 has the border actually i want to put that border on the header so what i would do if i wanted to use get element by d we know that the header actually has an id of main header so let's grab that instead or main dash header and then we'll just change this to header and save and now we have the border on the actual header alright so now you should understand get element by ID text content intertext inner HTML and then changing the styles with style. whatever the CSS property alright so all stuff that used to be used with jQuery but should be used with vanilla javascript now you can see how easy it is So next thing we're going to do is look at another selector. I'm going to comment these out too.
So we're going to look at getting elements by class name. Okay, so let's say get elements by class name. Now notice that it's elements, plural. So this works a little different. It's not like get element by class, which doesn't actually exist.
For that, you would use query selector, but I'll get into that in a minute. So get elements by class name. Let's say we want to get all these list items.
So we know that these list items have a class of list group item. So let's say we'll put it in a variable. So var items equals, and then we're going to say document.get. What am I doing?
Get elements by class name. and they have the class of list group item. Okay? So if we go ahead and we console.log, console.log items, what do we get here? So what it gives us is an HTML collection, okay?
Just like document.all gives us. And each one has an index, okay? And you can see if I hover over one, it'll highlight in the browser.
So we can access individual elements by saying like items, let's say we want the second one, we would use one because they're zero based. So we'll save and you'll see it'll give us the item two. Okay, that's in the one position. So if I wanted to, let's say change the text of that particular item, I could say items dot or not items dot but items one dot. Text content equals and we'll say hello to and save and now you'll see that it actually says hello to.
If I wanted to change the style let's say items one dot style dot let's do font weight. Can't do that. We got to use camel case. So font weight and we'll set that equal to.
bold and save and now you can see that we've we've bolded that that second one here all right if we wanted To do a background color for it. Let's say items one and we'll say style dot background color and we'll set it to let's say yellow. And there we go.
OK so you can see we can we can do a lot of the same stuff that we did we could do in jQuery. Now where it gets tricky is if we want to add a style to all of these. So let's say we want to give them all a light gray background.
So if we just say items.style.backgroundcolor and set it to, let's say, light gray and save, that's not going to work. All right, now this isn't going to work because... It's an HTML collection or it's an array.
We have to actually loop through it to be able to do this. So what we can do is we can iterate through it with a for loop. So we're going to say for, we'll create a variable called i equals 0. And we're going to say as long as i is less than items.length. Okay,.length is a property. It gets the number of items in that array or collection.
And then we just need to increment by one each time. And then in here, what we'll do is we'll say items, and we want to get the current iteration. And then from there, we can say.style.backgroundcolor equals our gray color. And save.
Oh, we need to actually comment this out because this is giving an error. Actually, let's put a comment right here. We'll just say gives error and save.
And now you'll see that each one has a gray background now. All right, so that is get elements by class name. Now we're going to take a look at get elements by tag name. Now this works basically the same way, except instead of getting it by class, you're getting it by tag.
So what I'm going to do is I'm actually going to copy. This whole thing. I'm going to copy it and then I'm going to comment it out.
Okay, we'll paste it here. Now let's change the variable to li and what I want to do is say get elements by tag name and then just pass in here li. So it's going to grab all the li's on the page.
And then let's console log li. We can get each li by its index. So let's change this to li.
So this should basically do the same exact thing. We're just not using the class. We're using the li. And then down here, we can loop through.
It works the same way. So li.length, save. Let's save it.
And it does the same thing. All right. Now, if I were to add another list item here, so let's add a list item, and we'll just say item. 5 and save now even though I don't have a class of list group item it still applies because it's an ally it's going by the tag not by the class if I were to just do it by the class like I did up here then then that would have this would have no effect all right let me just show you what I mean so if I comment that out And we uncomment this and save. You'll see that now that this stuff, nothing's being applied.
This gray background and all that is not applying to this because it doesn't have that class. All right, so hopefully that makes sense. All right, so let's get element by tags name. I'm not going to spend too much time on it because it's identical to the... Class name now what I want to do is look at query selector.
Alright, so this is an important one so query selector So for this this works pretty much just like jQuery Okay, the only big difference is it's it only what you're all you use it only for one item Okay, if you want to use more than one item, then you're going to use query selector all which I'm going to go over in a second as well. Alright so it only grabs the first one so if we try to grab let's say the class of title and there's more than one title on the page it's going to grab the first one. So let's go ahead and save this and let's get rid of that extra li we added. Alright, so we'll save that. And we're going to say, let's say var header.
And we're going to say document.querySelector. And we can use anything we want in here. So we can use tags, you could grab a list item, you could grab a class. Okay, so you could say.header. You can use any CSS selector just like you could with jQuery.
Okay, so just replace the jQuery money sign like that with document.querySelector. So if we want to grab the header, for instance, it has an ID of main header. So make sure you use that hash right there. All right, and then we could say header.style.borderBottom. We'll set it to solid.
4 pixels and gray. Save, and now you can see it has that border. All right, so another thing we could select is, let's grab the input.
We haven't done anything with that input form, so let's say var input, and let's set this to document.querySelector, and we want to grab the input. And we'll say input dot value equals hello world and save. And you can see now we've actually added a value to that input.
Now, even though there's two inputs on the page, because this button, this is actually an input as well. it only grabbed the first one. Okay, so it's going to grab the first one by default. Now with querySelector we can use any CSS selector.
So what I'm going to do now is I'm going to say var submit and let's set this to document.querySelector and instead of just input, let's use the input and then brackets and we can say the type equals submit okay just like we could do in CSS this should actually be in quotes though alright so if we do that and then we say submit dot value and let's see we'll change it to send and save and now you can see you've actually changed the button to send alright so what about these list items what if we were to say var item and set it to document.querySelector, and we put in here a class of list, what is it, listGroupItem. All right. And then let's say item dot color, not color, item dot style dot color equals red.
What happens? It's going to get the first one on the page. All right.
Now, let's say we wanted to get the last one. We could use the the the CSS. Last child okay, so we'll say var and let's say last item actually.
I'll just copy this So we'll say last item and we'll select list group item colon last child And then let's say last item dot style dot color equals blue. And save. And you'll see that now the last one is blue.
All right. We could also use our nth child. So let's say we want to grab the second one.
So we'll say second item. And we'll change this to, let's say, nth child 2. And then we'll change this to second item. And we'll change it to, let's say, I don't know, coral.
And save. Wait a minute. And look at the dash. There we go. So now the second one is coral.
Okay. So we can use these CSS pseudo classes or pseudo selectors, whatever they're called. All right. So what about query selector all? Let's take a look at that.
So QuerySelector all works similar to GetElementsByTagName, GetElementsByClassName. It's going to grab more than one thing. So what I'm going to do here is create a variable.
Let's see. I think we have two title classes. Yeah, we have H2ClassTitle and H2ClassTitle here. So let's grab both of those. So we'll say titles equals document dot.
query selector all and we want to get and we can put anything in here classes ids just tags anything so we're going to say class title all right and then let's go ahead and console.log titles all right i'm just going to comment all this stuff out okay so that gives us what's called a node list which is similar to a collection except we can actually run array functions on a node list. So 0 is going to be the first title, which is that addItems, and then 1 is the items. And of course we can access these like this, we can say titles 0.textContent equals hello, and we'll save and we'll change it that way. Alright, now another thing that...
used to be really hard to do with vanilla JavaScript would be to let's say alternate I would say we want each other one to be great have a great background we can do that with query selector also what we'll do is will create a variable called odd right will set it to document dot I query selector all and we're gonna use the gonna say ally and let's use nth child and we'll pass in here odd okay now this is a css selector this is a pseudo selector so we're grabbing all the odd ones and then what we'll do is we'll loop through we'll use a for loop and we'll say for var i equals zero as long as i is less than odd dot length And let's see, we just want to increment by one. And then down here, what we'll do is we'll say odd. We'll take the current iteration and we'll say dot style dot background color. And we'll set that to light gray and save.
And now every other one is light gray. All right. If we wanted to do even, we could go ahead and set this to even. And then for the selector. we'll just do nth child even and we'll go ahead and copy that let's say even and we'll change the color let's say to a darker gray and there we go all right so we can do things like that in vanilla javascript pretty damn easily alright guys so i'm realizing that i still have quite a bit that i want to cover We went over all of the selectors, so I think that this is going to be a good place to stop for this video.
And we're going to have to turn this into a little series, maybe one or two more videos, because I want to get into traversing the DOM. I want to show you how we can move up, how we can get parent nodes and child nodes, how we can use events. I want to show you how we can use mouse and keyboard events, things like that. how we can change the dom with those events so there's quite a bit more that i want to do so i'm going to stop the video here and i will see you in the next part