JavaScript DOM Tutorial | Document Object Model in JavaScript

hello and welcome to the dom today we are exploring the document object model let's get started today we start working with the document object model that is referred to as the dom capital d o m and i'll spell that out as well document object model and notice the second word object we've already covered objects in our javascript playlist and the document object model responds much like you would expect an object to with both properties and methods the first thing we're really going to look at are some methods because we want to select elements in the dot document now the document object model was not just designed for html but in this regard we will be looking at html pages so specifically the html dom and let's discuss how we select an element with an id first you can see i have a web page open and on this page i have 12 identical divs and i'm using flexbox for these divs so if i scrunch the page of course they flex and i could widen it out even further and it would go to four or more per line as well it's a totally flexible design for responsive design as far as that goes and i've got the console way over here on the far right as well so i'm going to write some code and the first one is to select the first view because i've actually created two views so this view you see here is a section that has these 12 divs and i'm going to define the first view in a variable called view one and i'm going to select that view with document dot get element by id and of course we only give a specific id to one element in our web page and i will choose view one because that is the id i gave this first view now if i log to the console view one we should see that element returned and that's what we see over here we've got a section and it has view one id and it also has a class view and you can see in the page as soon as i highlight that in the console it highlights the page since i have the dev tools open and we can break down the section by clicking the arrow and then it shows all 12 to 12 divs and it will highlight each one of those as i mouse over them and that's much like you would expect properties to do if we had a class when we clicked the arrow and it would show the individual properties of a class so that is how we select an element by the id now let's go ahead and look at another way to do that possibly a more popular way as i see many using this the query selector with the query selector it's not just meant to select elements by their id it can select by other methods so or by other means so when we do this we can't just say view two because we have the second view or view one we'd have to use the hashtag or pound symbol to indicate that it's an id so that is a main difference between the get element by id selector and the query selector so now i'm selecting the second view and i'll log it to the console as well i save our page now you can see we get the second view and it's not highlighted because it's not even showing over here on the page yet but it has id attribute and it has a class attribute and if we open it up it doesn't have all the divs it just has an h2 element inside of it saying my second view and so there's two different ways of course to select by id and we just displayed both of those now let's look at changing the style to actually show or hide the different views we have so this is how you could have a single page application or a spa that could actually have more than one view because you can hide the different views in this case at the top i have a nav element and it will always show but underneath that i have sections and we can show and hide those so i've got the display for view one and i'm going to set it to none and then for view two set the display and notice we're actually changing the css properties here by accessing the style property and then the display property of the style property and i'm going to set it to flex now we'll save our page and you can see we see the second view and the first view is no longer displayed if i change that and i set both to flex now we've got the first view and i can scroll and actually show you the second view before that i couldn't scroll so if i set the second one to none now there's no scrolling this is what is available and we could toggle between the two or we could have more views and we could show and hide those with a method or function we create and that would help us have a single page application with more than one view if we wanted to do that okay let's look at another way to select things on a page let's have views because we have the two views and we'll say document dot get elements that's a plural now instead of the get element get elements by class name and now we'll say view because remember both of these over here have the class view so we're going to select both of those and we'll log this to the console and you can see what is returned we get an html collection which is like an array but it's not exactly an array and inside this collection there are two items two elements and we see the first and the second one i'm highlighting the first view here and then there's the second view you see all these different possibilities for properties most of them are null but for the section notice also that it shows the id and then the dot in the class this is how they will display because they have an id attribute and then they have the class and if there was more than one class it would show each one it would say dot view dot whatever the next class is and so on so there we have an html collection with two elements inside of it let's look at another way to select the view so i'll say const same views say document.queryselector again but this is different we'll say all now we expect more than one we're going to select the classes so once again with the query selector we have to specify that it's a class just like we would in css with the period and just like we did up here with the query selector for an id we had to use the hashtag and now we'll log that to the console with same views we get a node list and what did i do wrong there is some reason our node list has no uh items at this point oh i said views there we go it's just view class i was thinking views now our node list has two elements there they both are notice the difference an html collection and a node list what could be different about those html collection actually has elements inside of it a node list has nodes and in the html dom nodes are everything nodes are white space nodes can be simply text inside of an element so there are more nodes than there are elements in a web page in the html dom recognizes all of those nodes so we do have to be aware of the difference between a node and an html element okay so that is how we select by class name we've looked at git element by id and get elements by class name we've looked at the query selector and the query selector all and i'm sure you're gathering that the query selector uses selectors much like our css does to identify the different elements on the page now let's look at these individual divs in our first view so i'm going to define divs and i'll set that equal to view 1 and then put my selector after that so then i'll put query selector all and i'm going to select the div and notice i don't have to put a hashtag or a period or anything i am just selecting the actual tag name here but i am starting it out with essentially the results from a previous query i don't have to say document i'm just looking within the first view that i've already selected so i'm starting the selector out with view one then using dot notation and saying query select or all and selecting all of the divs specifically within view one so now i will log those and you can see we get a node list with 12 divs now let's get the same divs in a different way say view one dot get elements by tag name this is another version of get elements and if i log those you'll see we get an html collection with 12 divs let me go ahead and open this up now as i highlight the divs you'll see them highlight on the web page and just mouse over each one and they light up so we know which one we're looking at and then they have all of the properties within them just like you would expect from an object so there are all the divs in the html collection we can do the same with the node list actually and they all highlight when we do that as well okay so now we have selected by tag name and we also built our selector on a previous selector so that really helps us out now let's get a little more specific with selectors so say we just want to select the even divs out of these 12 so we just want 2 4 6 and so on i'll start with view one once again because all the divs are within view one say query selector all and now we get more specific just like we would within css so i specify div then i'm going to use nth of type and i want just the even divs so i provide that extra information there with the two in and that's what i need now i need to log this to the console notice we get a node list back as we'd expect with query selector all and it has six divs now we can highlight those and the first one is the first even div it's number two then it should go to number four number 6 number 8 10 and 12. we selected just the even divs within our page and that is by knowing how to use our query selector and essentially if you know how to do that in css you know how to do that within the query selectors as well now what if we wanted to actually alter our page we were selecting these so what do we do with them it you know we did change the display property we had flex or none to either display our flexbox layout or to hide the views we don't want to see so we did alter our document in that regard there's you can really change just about anything you want to so let's do something else we'll say just like an array we'll use a for loop to work our way through these even divs we'll say while i is less than even divs.length and then we'll up our increment variable there we go so there's our for loop and now we'll programmatically select each of the even divs as the loop goes through with using the iterator there and we'll say style and then let's change the background color of our even divs and let's set it equal to dark blue that should stand out and we don't really need to do anything else i think that'll do the work for us we'll save that and look at that we've changed the background color to each one of the even divs in the view in view one and we could do other things as well so we could do this same even divs dot style and then we could refer to say the width and these divs are 100 pixels by 100 pixels so just 100 pixel squares let's set the width equal to 200 pixels and let's do the same to the height we save that and wow that changed our layout dramatically didn't it so we can squeeze that in single column i don't quite have enough room to squeeze it out let me see if we can just widen this out a little bit to see what it would look like there we go uh definitely looks interesting we may not want to keep that but we'll take a look at it at least got that back to where it was so i'll comment these out to get our even grid back just an example of how you can alter every little bit of the web page that you want to by altering the styles so you're changing the appearance let's look at changing maybe some text so now let's look at the nav bar we've got my page up in the nav bar and i'll set this variable equal to nav text and we'll say document.queryselector and we're going to choose the nav bar and then that's an h1 element so inside of the nav bar i want the h1 and now i can log that and we should get our h1 element in the console that is exactly what we got and as i mouse over that you can see my page highlighted in the nav bar that's our h1 so now i'll say nav text dot to start our next selector and we'll choose the text content and we'll change the text in that and we'll say hello world we save that and my page changes to hello world at the top of the page and since we logged that we got hello world right away as well even though the log was above that's interesting huh okay next let's define our nav bar itself let's see document dot query selector and now we're just selecting the nav so that's just the nav bar and now with this nav bar we can change the inner html now it is important to know how this is different from text content before we just change the text so that is really the text node that we're changing and it is not adding any html to the page however the inner html property will change the html if we insert it where we can actually insert html within our html property so let's do that and we'll add because the inner html by the way will overwrite everything we currently have in there so we need to put something like our hello world i'll just put hello so we know it's different and then i'm going to add a space and i'm going to add a paragraph and here in the paragraph i'm going to say this should align right and that is because of the flexbox layout that i have for the navbar i am using the justify content with the value set to space between so we'll take a look at that and after we do this i'll just save this and you can see that the hello was hello world changed to hello and the part the paragraph that says this should align right is now aligned right so if we log our nav nav is not defined oh i called it nav bar there we go nav bar let's log our nav bar here it is let's break this down and we've got two elements inside it that we just inserted we've got our h1 hello and we've got our paragraph that says this should align right now what if we wanted to change that alignment we can also do that by altering the style of the nav bar and it is a flex box and i have justified the content so we can justify the content in several ways knowing how or what properties it accepts so flex start should send everything to the left there we go flex in should send everything to the right sure does we were using space between what if we say space evenly and it spaces it out evenly of course from the sides as well so the reason i like space between is because it aligned things right and left which looks kind of good in a nav bar and you can see that so we've got hello on the left and this should align right on the right now let's talk about navigating the dom tree and this gets fairly interesting you don't have to get too complex with this that many times in your page but there could come a time where you need it so remember we have our even divs that i'm going to refer to we selected those earlier so i'll just log that once again to the console you see it's a node list with six different nodes in the list and now instead of just logging even divs i'll just log the first one and we're selecting it just like we would select an element in an array so you can see there we have a div and the style is background color dark blue we set that style and it has the number two in it for text content now this next version and i'm just going to highlight this copy and paste in the next version we're going to log the parent element using that property we can see what the parent element of our even div is and now you see the parent element is the full section itself it is the parent element of this div and we can also say pardon me we can also say parent elements so that once again is the section and then we can say children let's see all the children of that parent element and we get the full html collection of 12 divs those are all the children of the parent element and the parent element is the section so we've navigated from knowing what one div is to finding the parent element and now we're selecting all of the children or actually here we're displaying in the console all of the children but this is a way to navigate the dom tree and you can think of the dom as a tree because you start out with html is the main element and of course from there it goes down to usually have a head element and a body element so those would be the children of html and then they also have their own children and that navigates out kind of like you see the roots of a tree so many times it's referred to as the dom tree so besides children let me go ahead and i'm going to use this a few times so besides just children could highlight this and change it we can refer to some other properties here once we get to the parent element we can say child nodes notice that instead of an html collection like we got with children we got 25 child nodes now what's the difference the children are actual elements the child nodes they aren't just elements they are elements and also text nodes also any white space nodes or anything else that might exist we could easily guess that at least they're double because we have 12 elements and we have 12 text nodes and we probably have maybe one extra text note and that's what it looks like we start off with a text note as well we could look at each one of these there's the first div the next text node and so on so let's see what this first text node is we can look at the text content property and it looks like it's just a return so you can see that each one of these well it might not just be a return can i break that out let me see it i thought maybe i could open it up you can see they have all those different properties so we have 25 nodes whereas we only have 12 elements in the same spot okay besides child nodes we can actually check an element to see if it has child nodes with this method so has child nodes save that and it returns true because yes it has 25 child notes so we knew that was true but it was worth checking we could also just pull up the last child and you can see that is a text note that is not an element that is the last child of the parent element as you might guess we could also do last element child and that pulls up the very last element of the parent element and of course since there's last child there's first child there is uh did that wrong there's first element child save both of those and you can see they are different the first child is also text node but here's our first element whereas before we pulled up our last element and we could also just get a convenient well let's get rid of the parent element at this point and we're up there at the very first uh even element we're so we're back at number two and let's just select the next sibling this is a node and you can see the text there however you can see the pattern i'm going for here we could also pull up the next element sibling if we want to get to the next element oh and that says it's undefined because i put a k in there by a little typo there we go there's the next element sibling and notice that is not an odd one we had an odd this went to the very next element so now it selects number three and of course with next element and next sibling and next element sibling we could also change next to previous and we get both of those as well so now we got from number three previous we still a text node but now it's number one and that is a way to navigate the dom so you could go crazy with this actually you could choose next sibling or next element sibling and then chain another next element sibling and get different results and you can chain all of these together with that notation so you can navigate the dom in this manner and of course you try not to make it too complicated but if you need to you can certainly essentially crawl the page through these different nodes or elements as you navigate the dom tree before we finish we need to discuss adding to and taking away or removing from the dom we can create new elements that didn't exist and we can remove elements from the page let's make a few tweaks here as we go and we'll check into adding and removing the first thing we're going to do is hide our first view our view one so we'll set that display to none and we're going to show our second view so we'll set that display equal to flex and we'll save that so you can see that in action and now the second view is the view that is showing and now we will take view two and add a couple of more styles to it that it needs it needs a flex direction and we're going to set that to row now instead of column where it is essentially been at and we're also going to set the flex wrap style and notice none of these styles have hyphens like they would in css they go to camelcase in javascript so you need to remember that you cannot refer to the hyphenated styles in the same way that you would in css setting that to wrap and one more we've got style and we're going to set the margin equal to 10 picks and that should get us started okay now we really don't need this big my second view in the middle and no matter how many elements we have we can remove those and you can do it rather methodically with a loop we just need to say view to last child so while view two has a last child i'm going to refer to the parent here with view two and then last child and then remove so we're going to remove all children inside of the view 2 that we have selected now worth noting here this is a node we're removing we're not removing just elements we're removing all nodes so anything that currently exists inside of this view 2 which is a section element itself so as soon as we save that our h2 is gone and our second view is entirely empty and that comes in useful so that could be a function you would save and use in an application that is dynamically built when you need to clear out part of a section or an entire page and then add new content and right now we're going to add new content and we should probably make a function when we do that let me scroll down and get a little more view here let's call this function create divs now we're going to feed this function well here let me go ahead and start with an arrow function we're going to feed this function a parent element so i'll just call that parent and we're going to give it an iterator and i'll show you why moment because we're really going to put it inside of a loop to use this function so we've got a parent and an iterator and now inside the function we want to create a new div and to do that we're going to use document.create element and specify a div so that creates a new div element now we're going to access this new element and add some properties to it the content itself is going to be the iterator so we can number each different square we we create the next property we want to access is a style and we're going to set the background color let's set that equal to black that is the short notation for black there in the hex notation the next one is going to be the width and we want to create 100 pixel width and i should copy this first part so i can paste it each time 100 pixel height go ahead and do that because we're going to add just a few more the next one we want to add is margin we'll add 10 pixels margin to each square after that let's set the display of the squares themselves to flex and let's justify that content and we'll set that to center because we want the numbers in the center and now we'll align the items in the center and this is more the uh well we're centering vertically and horizontally here and this is the vertical alignment so center and then we need the parent element to append the new element too so we have our section element that is view 2 that's what we'll end up using but we're just referring to it because we're within the function so we refer to it as the parameter parent and we're going to append the new div we've just created and there is our function so let's try that out just one time so we'll go create divs and we're going to send in the view to as the parent and then for an iterator let's just put in a number so we'll put in 10 and let's save all of that and yep there we've got one div created and it's centered right in the middle of the page as well and then within that div our number is centered so not only did our flexbox center horizontally and vertical inside the div but we've also got that same style applied to the section so it took the div we created and centered it horizontally and vertically as well now when we add more divs and we can do that through a loop of course it will apply the flex styling that we previously saw in our view one so let's create that loop say four let i equal and let's start with one and then while i is less than or equal to 12 let's increase the iterator and then inside of our loop let's call this function create divs and we're going to always want the new div applied to view 2 but then we'll put i in here as our iterator and that looks pretty good to me let's save it and see what we get yep we got 12 divs and it applied the new styling so it should be a flex box and respond accordingly and so that is how you remove including all divs or nodes or whatever you want to remove that is a nice little thing you can save as a function to completely clear out a page or a section of a page and then with this you saw not only how we created a new element we modified many of the properties of the element and most of those we accessed the style property so we could style it accordingly to our page and then we appended the new element to its parent element and that's what made it show up on the page and then we went ahead and called this function we created within a loop so we could create 12 new divs and they would be spaced accordingly with the flexbox styling and that should wrap up this selectors and navigating the dom and creating and removing divs and anything else we covered and of course we're going to look forward to the next video where we tackle events and responding to events that happen on our page and that's how we can get a fully interactive application hi i'm dave and i hope you enjoyed this tutorial remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time

Channel: Dave Gray

Views: 2,676

Keywords: dom, document object model, dom javascript tutorial, dom in javascript, dom tutorial, document object model javascript, document object model tutorial, document object model dom, dom selectors

Id: WbG86sMd3SU

Length: 35min 39sec (2139 seconds)

Published: Wed Oct 14 2020

Reddit Comments

[u/DaveOnEleven]

In this video we'll dive into the DOM (Document Object Model) in JavaScript. We explore DOM selectors, modifying CSS with selectors, HTML Collections, Nodes and Nodelists, navigating the DOM tree, and both removing and creating elements and nodes in the DOM.

✅ Quick Concepts outline:

(0:13) The Document Object Model: DOM

(0:55) Selecting an element with an ID

(2:55) Selecting an element with a query selector

(4:00) Changing the CSS with the style property

(5:45) Selecting elements by class name

(7:05) Selecting elements with querySelectorAll()

(8:10) HTMLCollection vs NodeList

(9:00) Searching within the results of a previous selector

(10:15) Selecting elements by tag name

(11:20) Applying more specific DOM selectors

(13:05) Modifying CSS with a DOM selector

(16:30) Changing text inside of an element

(17:00) Changing the HTML within a parent element

(19:54) Navigating the DOM tree

(28:40) Removing all the nodes in a parent element

(30:00) Creating new elements

(30:43) Adding new property values to the element

(32:15) Appending the new element to the DOM

(33:30) Creating new elements with a loop

If you enjoy this video, check out the ones that follow it in the playlist. I’ll continue to add more. Glad to answer your questions, too.

JavaScript DOM Tutorial | Document Object Model in JavaScript: https://youtu.be/WbG86sMd3SU