JavaScript DOM Crash Course - Part 2

[Music] alright guys so in the last video we left off after looking at all the different selectors so we looked at the document dot get element by ID get elements by class name get elements by tag name query selector and query selector also now we're gonna talk about traversing the Dom so basically kind of moving up and down looking at parent nodes child nodes and siblings so if we look at the index.html here when we talk about a parent node basically what that means is let's let's take this h2 for example so this h2 has a parent of this div right here with the idea of main this is this is the h2 parent because it's inside of it okay now this h2 is a child of the div so that's a child and then we also have siblings and this form here is a sibling of the h2 because they're on the same level neither one of them are inside of each other so they're siblings so I'm gonna show you how to query parents and siblings and children and all that alright so let's go back into dom j s and all this code up here is all the stuff from part one so first thing we're gonna look at is parent nodes or parent we have we have a couple different methods we're going to use so I'm gonna grab this item list right here all these list items so I'm gonna create a variable and I'm gonna call it item list and I'm gonna set it to document dot and I'm gonna use query selector and we'll just grab the ID of items okay because it's a ul with the ID of items and that's what I'm grabbing so let's take a look at the parent node okay so we're gonna use the parent the parent node method our Pam sorry parent node property so we're gonna console dot log and let's say item list dot parent node you see it actually comes up here so let's go ahead and save that and see what it gives us so it gives us the div with the ID of main so let's take a look at the HTML and we have our UL with the idea of items that's what we're selecting and then the parent node if you pre go above h2 is not the parent node that's a sibling the form is a sibling h2 is a sibling the div here is actually the parent because it's inside of the div all right so that's what it's giving us now we can use this as a selector if we wanted to so if I wanted to grab this and say like let's say item list parent node dot style dot background color equals and we'll say light gray all right so what do you think this is going to change this is going to change the parent node which is the div with the ID of main so let's save and there we go so now we have the gray background on the the main the div with the idea of main and if we look down here in the console it's logging in and it now has that background color now we can keep going we can chain these things so if we want to let's say grab this console log and let's say parent node dot parent node so what do you think that this is going to give us we know that the div with the idea of main is the parent node of the items what's the parent node of the div with the idea of main so let's check it out and I think it's gonna be the container so let's see let's go ahead and save and we get the div with the class of container all right and we can keep going we can say what's the parent nodes that and we get the body okay so we think we can just keep chaining these on all right now I'm just going to comment this stuff out and next thing we're gonna look at is parent element so parent element is basically the same thing actually know what I'll do is just copy this because for what we're doing it is essentially the same thing so if I were to change element so say element parent element let's say we should get the same thing and save and we get the same exact thing we're getting the gray background we're console logging down here so parent node and parent element for the most part can be used can they can be interchangeable all right so what about children so we're gonna look at we're gonna look at a property called child nodes so it's a child nodes and let's do a console dot log geez I can't type console dot log and we're gonna take that item list which is the UL and we're gonna say dot child nodes I cannot type on this keyboard so let's take a look at what we get here so what we're getting is a node list okay some basically an array and it's giving us all these different nodes are all these different items here we have 0 1 2 and notice that this 0 is actually a text node okay so the text node is actually the it just represents whitespace okay so it represents if there's a line break or anything like that so if we look in our HTML here this is what it's grabbing now it's getting each list item but it's also getting this text node in between which is actually the line break if I were to go ahead and let's just get rid of all line breaks basically put all these el eyes on one line and save and then take a look oh I guess we have we still have it here and here so now if I save that then it doesn't have any text notes it's just all the list items so that is kind of a pain in the ass so I would not suggest using child nodes let me just get this back to her I need it what I would suggest using is children okay so you have child nodes you also have a property called children so let's look at that so if we say console dot log and we say item list dot children and save let's take a look at this and now it's just the list items it's just the elements it's not gonna look at the line breaks as text nodes and put that into this collection alright notice it's also an HTML collection it's no longer a node list okay so there are some differences now if we wanted to access a specific child like let's say this one right here which is item two has the index of one I'm sure you guys if you guys have been following along you probably know how we can do that we can say item list dot children and we can put in our brackets and we'll select the one element and then you'll see it's listing out item two okay and if we wanted to do something with that we could take it and let's say dot background color and we'll set that equal to yellow let's see that didn't work oh if we got style and there we go so we can use that all right so we also have a property called first child so let's say first child and we're going to console dot log the item list and we're gonna call first child all right now you probably think you know what this is gonna give us you probably think it's gonna give us this item one but let's go ahead and save and it doesn't it gives us the text node okay just like with the child nodes this is going to include any whitespace any line breaks or anything if I were to go and get rid of that line break right there or just that space and save then it'll give us the first one okay so to me first child is is kind of useless at least for what I've used it from what I've been to what I do so there's another method called first element child which is probably what you want to use so it's a first element child and we're gonna just console.log the item list dot first element child and then that will give us the actual li alright and we can take that first element child and let's say dot text content and we'll change that to let's say hello one save and you can see that the first one is now hello one and then we also have last child and last element child which does the same thing so I'm just going to copy that block its comment all this out and let's change this to last child and last child element our last element child so let's first see what last child gives us we'll go ahead and save that it gives us that last text node and let's go ahead and save this and we just need to change this to last element child and we'll change this text to let's say hello for all right so now you can see that it's logging us the last li and then it's also changing the text content to hello for all right so first child last child first element child last element child next thing we're going to look at is siblings okay so up to this point we've been looking at parent parents and children now let's look at siblings so let's say we want to get the next sibling okay that's actually a method so we're going to console dot log and let's grab the item list and you can test this out on any element you want I just chose the item list but let's say dot next next sibling and save and again it's going to give us the text node okay so just like with first first child last child next sibling we also have next element sibling so it's say next element sibling go ahead and change this to next element sibling and why did that happen item list our next element sibling Oh does it not have any yes see it okay so it's null because it doesn't actually have a next sibling if I were to put let's say a span here let's save that and then you can see it's the span okay so I just chose something that doesn't actually have a next sibling all right let's see what else are we gonna look at we're also gonna look at previous sibling so behind console dot log and let's say item list dot previous sibling see what that gives us again it's going to give us the text node and I'm sure you already guessed that we have previous element sibling as well okay so that's going to give us the h2 because before the UL it does sibling before it is the h2 and of course if we wanted to do something with that we could take it and let's say dot style dot color and we'll set that to let's say green and there we go so you can see you can select anything you want and you can do whatever you want with it with JavaScript you don't need jQuery I know I sound very anti jQuery I just think that like I said the analogy that I like is is using a sledgehammer to kill a mosquito you don't need it it'll work but you don't need it and it adds that extra it adds that extra file to your to your page and slows just slows you down that much now don't get me wrong there's there's a lot of really nice jQuery plugins for things like you know hardcore animation like when you scroll down a page and you want certain things to pop out at certain spots I mean you can do that kind of stuff in JavaScript but there are really nice jQuery plugins that will save you a lot of time and it's a lot less code so I'm not saying don't use jQuery for anything I'm just saying for simple Dom manipulation there's really no need for it alright guys so what I want to do now is I want to get into actually creating stuff creating Dom elements from JavaScript and inserting them because right now up to this point we've just been selecting them we've been changing the content and stuff like that but I want to show you how we can actually create elements and insert them alright so we're gonna look at let's see we're gonna look at a method called create element alright so let's go ahead and let's create a div so we'll create a variable I'll call it new div not new deck new div I don't need a new deck I don't think and we'll say document dot create element should I edit that out so create element div and what we'll do is add a class to that actually let's console.log at first so we'll just say new div and you can see we just have a single div so we can take this div and we can do different things with it let's say we want to add a class to it so we'll go ahead and we'll say new div dot and we'll use class name okay so class name and we'll just set it to hello save and now we're logging it again and you can see it has a class of hello if we wanted to add an ID to it then we could say actually let me put a comment here we'll say add class and then we'll say add ID so we'll take our new div and and we're gonna say dot ID equals and we'll say hello one save and now you can see it as a class of hello and an ID of hello one now if we wanted to create another attribute on to it like let's say a title let's say add attribute we can say new div dot set attribute set attribute and it's going to take in one parameter is going to be the actual attribute you want let's say we want to add a title and then the next one will be the value we'll just say hello div let's save and now you can see it has a title on it so what if we want to insert something in here because right now we just have just the div tag we don't have any content inside of it so for that we're going to have to create a text node so we're going to take actually we're going to create a new variable here and we're gonna call this new div text and we're gonna set this to document dot create text node okay and then in here we can put whatever we want let's just say hello world all right so now we have this this div text what we want to do now is append it to our divs all right so let's say add text to div so we'll say new div and we'll say append child okay because it's gonna be a child of the new div and we're gonna pass in our new div text all right so now it's safe and console.log and you'll see that now hello world is inside of that div so we've constructed this all from JavaScript all right now what I want to do is I want to insert it into the Dom because right now it's just it's just it's just existing inside of our JavaScript it's not actually in the Dom all right so what I'm gonna do is we need to figure out where we want to put it so I'm gonna say I want to grab the header container if we look at the HTML inside the header we have the class container because I want to put it I want to put it right here all right well right below this div so let's create a variable and we'll just call it container of course you could call it anything you want and we're going to use the document dot query selector and inside here we'll say in the header we want the container class alright and then I'm also going to grab the h1 the header h1 so we'll set that to document dot query selector let's grab the header h1 alright and then what we'll do is let's see we'll take our container and we're gonna say dot insert before okay and that's exactly what it's gonna do it's gonna insert before and it's gonna take in two parameters one is gonna be what we're inserting which is new div and then one is gonna be what we're inserting before which is gonna be the h1 all right so let's go ahead and save that and there it is there's our hello world if we go ahead and we inspect it you'll see that it has all of the as the class the ID the title and it has the text that we constructed in the JavaScript all right whoops what I do so if we wanted to change let's say we wanted to change the font size we could simply go in here and say new div dot style dot font size and we'll set it to let's say 30 pixels save and we can treat it just like any other div element okay so it's now part of the Dom I'm sorry I said div element I mean Dom element all right so I think I'm gonna stop the video here guys because in the next video I want to start to get into events right now we've just been selecting things from our JavaScript and we've just been kind of you know adding styles and changing text but I want to add some interactivity which is something we haven't done yet so in the next video we're gonna get into using events both click events keyboard events and then I think we'll do one more video after that and we'll turn this into an actual application where we can add items and we'll add them to the Dom to the lists right here and then we'll add a delete button we'll be able to clear them out so we'll create a little application at the end I didn't really plan on doing that but I think that that's a good idea you guys can let me know what you think all right so thanks for watching and I will see you in the next part

Channel: Traversy Media

Views: 370,770

Keywords: javascript, javascript dom, dom, document object model

Id: mPd2aJXCZ2g

Length: 21min 21sec (1281 seconds)

Published: Tue Sep 12 2017