JavaScript DOM Crash Course - Part 1

[Music] hey what's going on guys so I've been getting a lot of requests after creating my HTML crash course in 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 and talk about datatypes 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 of and 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 gonna do we're also going to just take a look at the Dom in general we're gonna look at all the some of the different properties of the document object and we're gonna do a little exploring and this is the page we're gonna 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 it will include this that the bare HTML file without any JavaScript and then as we move along you can 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 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.00 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/crashcourse 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 that basically everything on the page using javascript ok 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 the core of the DOM and then we have a root element which is the HTML tag or the HTML element our node whatever you want to call it and then inside that we have children like head and body tags ok our 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 H ones 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 an ode we also have attributes okay can connected to elements for instance we have an 8 and href attribute on an a tag or an a element so this is this is the Dom okay all 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 all right 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 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 list or one and I save you'll see that it'll auto load alright so if you're not using an extension like this or Adam 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 ok 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 or you have some bootstrap classes then we have under the head or a container we have a div with the idea 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 idea of items in the class of list group ok and each list item has a class of list group item so that's the Dom that that's the that 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 j/s which is right here and is completely empty and that's what we're gonna be working with all right now guys I'm gonna be moving a little fast here because this is a crash course but I'm gonna go over the 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 your tools and go to your developer tools that 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 awhile all right and then once we get into actually changing things in the Dom we'll be able to change text and styles and all that okay so the first thing I want to do is just kind of examine the document object okay 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 so we can actually type in the console here JavaScript if I were to say alert one 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 all right that's why I'm doing it all in the file here so what we're gonna do is we're gonna say console dot der and we're gonna pass in the document object okay so what this is gonna do is it's going to show us all of the different properties and methods attached to the document object alright so you can see we have like the URL we can access we have document dot 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 dot 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 the useful stuff so let's go over here and just we'll just comment this out and let's look at some of the stuff that we can access through the document alright so let me put a comment up here and we're just gonna say examine I will say examine the document objects all right and you guys can use this stuff from within your scripts when you create a JavaScript program you can you can access the 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 dot log we can say document we can use our dot syntax and we can access any of these properties so you'll see that there is a where is it domain right here which is going to give you whatever domain name you're running so we say document dot domain and Save you'll see that we get one two seven zero zero one which is just basically my localhost that's the loopback address all right we can also access the URL so we'll say document dot URL and save and it gives us basically the entire page and the entire URL alright another thing you know what I'm just gonna copy this because we're gonna 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 dot title and we get item lister okay and you'll see the title is item lister if I were to go and change the title over here - let's say item list or - 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 dot title and we can actually set that equal to we'll say one two three and now you can see the title has actually changed so you can change this stuff from your from your scripts alright so another thing we can look at is let's say let's look at the doctype so if we say dot doctype and Save you'll see that we're using excuse me we're using the html5 doctype alright so we can also look at the 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 out putting 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 dot body which will grab the body for us and help put it all right so another thing we can do is document dot 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 0 we have our HTML tag which is up at the top okay and then the next one and the one index is going to be the head then we have the meta we have another matter 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 in 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 dot 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 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 dot all and then grab that's in the index of 10 and say dot text content equals hello and save and you'll see that it actually changed that in the page but this this is not the way that you want to slow things alright 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 out of span and we'll just put like a 1 in here or something and save now that span is now the the 10 index and that's what's hello so you don't want to use that method of selecting from the Dom alright 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 gonna 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 ok 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 dot 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 0 like that and it'll give us that actual form alright so hopefully that that makes sense I'm gonna just comment all this stuff out so that this doesn't get too confusing so what else then it's 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 gonna 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 consoled ER doc ument there's a lot of different properties but I'm not going to go through them all cuz we'll be here all day but those are some of the the interesting ones so what about selectors okay so basically we have a few different selecting methods we can use to query the Dom so the first one we're gonna look at is get element by ID which I'm sure you've heard of so what we're gonna do here is let's console dot log and let's take a look at our Dom or our structure here and we have an h1 with the ID of header title so what we'll do is we'll say document dot get element by D and we know that it has an ID of header title was it header title or no header - 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 gonna 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 head our 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 overrode it we over wrote this with this now the difference are 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 one two three and we'll save actually it this is gonna overwrite that so let's just comment those out but we get item list or one two three 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 gonna disappear it's gonna 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 inner text and save you'll see that the one two three is not there okay 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 all right so that's that's what text content intertext 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 dot inner HTML equals and let's put an h3 and we'll say hello save and now I 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 and 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 + H so 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 just going to comment this out too so basically we just have the header title so if we wanted to change a style like let's say header title and in all of these this text content enter text the stuff that I'm doing right now you can use with any selector not just document dot get element by ID in fact maybe I should have done all the selectors first and then showed you this stuff but you can use this with any with any selector ok 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 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 wanted I want to put that border on the header so what I would do if I wanted to use get element by ID we know that the header actually has an ID of main header so let's grab that instead or its main - 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 enter text enter HTML and then changing the styles with style dot whatever the CSS property all right 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 gonna do is look at another selector I'm gonna comment these out too so we're gonna 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 a 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 okay so we know that these list items have a class of Lists group item so let's say we'll put it in a variable say var items equals and then we're gonna say document dot 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 dot log console dot log items what do we get here so what it gives us is an HTML collection okay just like document dot all gives us and each one has an index okay and you can see if I highly if I hover over one it'll highlight in the 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 there's 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 are 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 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 what's a yellow and there we go okay 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 items dot style dot background color and set it to let's say light gray and save that's not going to work all right now this isn't gonna work because it's an 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 gonna say for we'll create a variable called I equals 0 and we're gonna say as long as I is less than items dot length okay dot length is a property it gets the 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 dot style dot background color equals our gray color and save all we need to actually comment this out because this is giving an error actually to 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 gonna do is I'm actually gonna copy this whole thing I'm gonna copy it and then I'm gonna comment it out okay well 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 gonna grab all the allies on the page and then let's console.log Li we can get each Li by its 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 dot length save let's save it and it does the same thing alright now if I were to add another list item here so let's add a list item and we'll just say item five and save now even though I don't have a class of list group item it still applies because it's an Li 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 alright 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 this grey background and all that is not applying to this because it doesn't have that class alright so hopefully that makes sense alright so let's get ELINT by tags name I'm not gonna 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 all right 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'll use it only for one item okay if you want to use more than one item then you're gonna use query selector all which I'm gonna go over in a second as well alright so and an only effect 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 gonna 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 gonna say let's save our header and we're gonna say document dot query selector 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 dot header you can use any CSS selector just like you could with jQuery okay so just replace the jQuery money sign like that with documents a document dot query selector 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 alright and then we could say header dot style dot border bottom will set it to solid four pixels and gray save and now you can see it has that that border alright so another thing we could select is let's grab the input we haven't done anything with that input form so let's save our input and let's set this to document dot query selector 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 this button this is actually an input as well it only grabbed the first one okay so it's gonna grab the first one by default now with query selector we can use any CSS selector so what I'm gonna do now is I'm gonna say var submit and let's set this to document dot query selector 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 well so we'll change it to send and save and now you can see we've actually changed the button to send alright so what about these list items what if we were to save our item and send it set it to document dot a query selector and we put in here a class of list what is it list group item all right and then let's say item dot color not color item dot style dot color equals red what happens it's gonna 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 seat the CSS last child okay so we'll save our and let's say last item I shall just copy this so we'll say last item and we'll select list group item : blast 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 n child - 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 got the the - 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 alright so what about query selector all let's take a look at that so query selector all works similar to like get elements by tag name get elements by class name it's going to grab more than one thing so what I'm gonna do here is create a variable let's see I think we have two title classes yeah we have h2 class title and h2 class title 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 gonna say class title all right and then let's go ahead and console dot log titles all right and I'm just gonna 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 zero is going to be the first title which is that add items and then one is the items and of course we can access these like this we could say titles 0 dot text content equals hello and we'll save and we'll change it that way all right now another thing that used to be really hard to do with vanilla JavaScript would be to let's say alternate let's say we want each other one to be gray to have a grey background but we can do that with query selector also what we'll do is we'll create a variable called odd alright and we'll set it to document dot query selector all and we're going to use the we're gonna say Li and let's use nth child and we'll pass in here odd okay now that 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 who will use a for loop and we'll say for VAR I equals 0 as long as I is less than odd dot length and let's see we just want to increment by 1 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 it's like 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 and 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 the selectors so I think that this is going to be a good place to stop for this video and we're gonna 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 like up how we can get parent nodes and child nodes how we can use events okay 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 than I want to do so I'm gonna stop the video here and I will see you in the next part

Channel: Traversy Media

Views: 760,458

Rating: 4.9546976 out of 5

Keywords: javascript, javascript crash course, dom, document object model, javascript dom, javascript tutorial, dom javascript, dom without jquery

Id: 0ik6X4DJKCc

Length: 39min 1sec (2341 seconds)

Published: Tue Sep 12 2017