Learning about what a developer knows about reading, writing, and modifying the DOM is a good to way gauge their level of skill.
- [Instructor] The DOM, or Document Object Model, is one of the most fundamental components of any web application. Now understanding what a developer knows about reading, writing, and modifying the DOM is a good way to gauge their level of skill, but it's also important for every developer to understand how to access, modify, and even remove elements within the DOM. So let's take a look at some definitions, and then we'll dig into some code. The DOM is the structure that gives you access to all the content within a website.
It returns an element if that element has an ID attribute that you specify. It's the oldest and most compatible of old DOM selection methods, but the problem is that elements don't always have IDs for you to access. So there's a couple of methods that let you grab elements by either class name or also by tag name. Now, they're pretty self explanatory. The difference is that these will return a list-like array of nodes, and you'll need to loop through them to get to individual elements.
There's also a couple of modern ways to access nodes, and this is one way to tell developers that have been around for a while, and developers with more up to date knowledge. All developers should be aware of querySelector, and qeuerySelecterAll. The main difference is that querySelector returns the first matching element, and querySelectorAll returns a list-like object of all the elements that match the criteria. If you use something like Jquery, then querySelector and querySelectorAll is pretty much like using the dollar sign selector in Jquery.
Once you have the nodes, you'll be able to do something with them. So for example, you can append regular HTML text to the nodes using the innerHTML property. You can also create nodes manually, and you should have some experience doing this using createElement. You can also insert a node inside another node with the appendChild method. And once you have a series of nodes, you can even add events using the addEventListener method. Now in an interview, you may be asked to show how well you understand the DOM by putting together an example of creating, manipulating, and even deleting nodes.
So let's take a look at how that would work. Now here I have a pretty empty looking page right now. You can see that in my HTML I have a single div right here with a class called boxes, so this is the element that I will be targeting to inset some new nodes into. Now if you take a look at my CSS, I have some very simple code that will create some boxes with a gray background, as well as with a width of 100 and a height of 100 pixels.
Now we'll want to just go to the script dot js file, and edit some of the content right here. So what I have right here is an array of colors, and this is really just to make my boxes look a little bit more interesting. And right here I'm going through all of those different colors, and I'm creating more boxes than colors. It just cycles through the different colors, so if I create like 20 boxes and I only have eight colors, after the eighth color is used it'll just go back to the first one, and so on and so forth.
Alright, so it's time to start working with our DOM elements. So what I'm going to do is create a couple of variables here. The first one will be my element. This is where I'm going to create a DOM element from scratch, and the other one is going to be the node where I'm going to put the elements in. So I'll call that my node, and I'm going to set that to document, because that's the root node. And then I'll do a query selector to select a specific element.
And in here I can just use sort of CSS notation and target the element with a class of boxes. So what that will do, if you remember the HTML has a div with a class of boxes, I'm targeting this element and creating a node so I can do things with it. Alright, once I do that I can start generating my element. So I'm going to come over here inside my loop, and say, my element is going to be a new element. So to do that I'll use document create element.
And the element that I want to create is going to be a div here. So once I have an element I can start adding things to it, and there's a couple ways you can do that. For example, I can say, add a class name to this element, and I'll add a class of box. So remember, in my style dot CSS file I have this element, or this box class, created, which makes the shape of the boxes. And you may be wondering why I'm not using the word class.
So my element. And we will add a style attribute here. So this is just like adding the style attribute in HTML. So we can put any sort of regular CSS in here, and what I'll do is set the background color. And I'm going to concatenate with the plus sign and look at my colors array. And then inside that I'll ask for the current color. Alright, so this should create our boxes.
Let's go ahead and save this. Now this should create our boxes. So if you look at how I'm doing this array, right now I'm asking for 20 of these elements. However, the boxes are not going to be in the DOM unless we append them. So we need to sort of tie these two things together. We need to say that, I'm going to take my node which is my target, and then I'm going to append a child into that node, and it's going to be my element. So if I save that, I should see a bunch of boxes here.
Now they're not the right color, because I forgot a colon right here. So this is just regular CSS. Let's go ahead and save that. And you should see all of the boxes come up, and as soon as you run out of colors, it should start up again. So it doesn't matter how many boxes you feed to this right here, it should always cycle through the different colors. Let's see how we can add an event to do something interesting with these boxes. So in addition to sort of modifying elements, we can also delete them if we need to.
And to do that I'm going to add an event listener to my node. So I'll say my node add event listener. And the event that I want to sort of listen for is the click event, and then I want to create a function. And this function is going to receive an event. Now, if I want to remove an element, there's something a little bit interesting about how you have to do it.
To remove an element you have to actually target the parent element of the thing that you want to remove. So, what we have to do here is say e dot target and get parent node of the current item, and then we can use the remove child property, and then do the target of that element. So we can just say e target right here. We can ask for the target of the click, so the event will have that information.
And we need to make sure that we add the keyword here of false so that it bubbles properly. So, let's go ahead and save this. And now when we click on any one of these boxes, it will remove that box. Now the interesting thing is that I don't need to have this event listener in the loop. We can actually move this to the outside of the loop. So let's go ahead and target that. Here's the for statement, and I'm going to put that right here.
Move that outside. So once it finishes loading, you just see all the boxes, and this will still work. Now the reason why that works is, because I'm actually targeting not the individual boxes, I'm targeting the container of all the boxes which is my node, so I can use one event to target all of the clicks inside this div with a class of boxes. So this is something you should be able to do and understand pretty well as an aspiring front-end developer.
If you want to learn more about events as well as the DOM. Here's a few courses that you should take a look at as well as the definition of the document object model. Now if you have some ideas for this weekly series, and maybe you want to share with me some questions or problems that you've been asked, or have been asked, in interviews, connect with me on Linkedin, or just about any social media network like Twitter, or Github, at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.