Do You Know The Difference?

do you know the difference between children and child nodes when you're trying to get the children of an element or how about next sibling or next element sibling you may use both of these interchangeably but by doing so you're opening yourself up to huge bugs because there are actually massive differences between these and i'm going to explain that in this video [Music] welcome back to web dev simplified my name's kyle and my job is to simplify the web for you so you can start building your dream project sooner and to start with that i'm going to be teaching you the differences between elements and nodes because most people don't realize the difference and it can drastically change how you write your code now before i get started i do want to mention that i have a full cheat sheet on dom traversal which goes over elements nodes and all of the different job traversal methods which one returns elements in which will return nodes this is going to be linked down in the description below for you but for now i just want to cover the topic of elements versus nodes so an element in a node are very similar in that a node represents anything inside of an html document so all your elements you know you have your spans your divs your bodies and so on those are all nodes every single comment in your html is a node every single piece of text is its own node a node is essentially every single small broken down piece of your html document an element on the other hand is a special type of node an element is only html element so it's going to be like spans divs a tags and so on but it doesn't include text it doesn't include comments and all those other things so an element is just a special type of a note and now since an element is the same thing as a node just an additional type of it all the same properties and methods that are available on a node are going to be available on an element but an element has some additional properties and methods on it that nodes don't have since nodes are just a little bit more basic now when it comes to which one to use i always recommend using elements instead of nodes and that's just because elements are really what you care about you don't care about comments when you're writing your javascript you care about the actual html elements so 99.9 of the time you want to use elements instead of using nodes now before i start talking about html collections and node list which are super important i first want to show you some examples of what i'm talking about so in order to explain these concepts i just want to take a look at a really simple document we have a div called with the classic grandparent we have two parent divs one just has the text parent one and one has a bunch of things inside of it that have children so let's say that we want to select parent one for example we could just say we want const parent one is going to be equal to document.query selector and we want to get dot parent one just like that let's just make sure i spell const correctly and we can console.log parent one and you'll see that it shows up over here we have our div with parent one well now we know that we can access different nodes and elements so let's say that we want to get the parent of parent one we can just say console.log parent one dot parent and we can either get the parent element or the parent node if we say parent element you can see it gives us our grandparent and if we say parent node you can see it's also going to give us the grandparent and that's because the parent of this parent one here is our grandparent element and since it's an element it doesn't matter if we use parent node or parent element it's going to return to us the exact same thing which is this element right here but what happens if we try to get the children if we just type in children you'll see we get an empty html collection which i'm going to cover in a little bit but if i change this to say child nodes you're going to notice instead we now have a node list with one element in it and that element is our text as you can see it's our text that is our parent one text right here now the reason for this is that child nodes return to us all the nodes that are children of this element and as we know text is an actual node while children that property returns to us only elements and inside of parent one there are no elements it's just the text node that's why children is a blank array while child nodes gives us an array with text inside of it now let's say that we wanted to get parent two let's just change this to parent two here real quick and we get the children nodes you'll now notice we have a bunch of additional stuff we have text we have comments we have more text we have spans we have more text and all these texts that are in between here is because we have a new line here for example i put enter inside of here so there's a new line in between our text and our comment and between our comment our span there's a new line in between our span and our closing div there's a new line so all these new lines are additional pieces of text if we were to change this to just children for example though all we get is that one single span which is the child so it's really important to be able to understand the differences between these and every single html method that you can think of is going to have two versions one for getting the elements and one for getting the nodes and all of those are going to be listed in the cheat sheet i have linked down below so i highly recommend you download that and look through all of the different methods because i can't cover them all in this video now jumping back here we can talk about the differences between html collections and node list because you noticed when we used the children and the children node methods we're actually getting returned an html collection or a node list and again the difference between them is very similar a node list returns all of the nodes so it's going to be things like text comments and so on while html collection returns to us only the elements that are there that we want to deal with so again an html collection is very similar to a node list except for it just only contains elements now another thing important to notice is that you have array methods like map for each reduced filter things that you use all the time well an html collection doesn't have any of them so if you get an html collection you can't use for each on it while a node list does have the for each method it's the only array method it does have which makes it a little bit easier to work with now another important thing to note that most people don't realize is this live updates an html collection always live updates and that means let's say that you get an array of all of your different elements with the class parent and it's going to give you an html collection and then let's say you add a new element into your page that has the class parent well this html collection that you grabbed automatically updates itself and adds that new element onto it while with a node list sometimes it live updates and sometimes it doesn't it really depends on the method that you use and this cheat sheet is going to explain exactly which ones live update and which ones don't now because of that live update i actually recommend not using html collections because this live update kind of is hard to work around while with a node list it's going to be static sometimes and i would recommend using the static node list and some of the node lists that you actually work with only return elements if i scroll down here a little ways actually go over here you can see things like query selector all it returns to a node list and it's a static node list so it's not going to update with a live collection but an important note is it only returns elements so things like query selector all in query selector are really great because it returns to a node list which is the best to work with it's static which is great and it only contains elements so it's very similar to an html collection it just doesn't live update itself and query selector down here only returns elements which is really great these other ones for example using git elements by class name or get elements by tag name they return an html collection which i find much harder to work with and let me show you exactly what i'm talking about the differences between these two now to demonstrate this example i want to just change this document query selector here i want to get elements by class name i want to get them by the class name of parent because we have two elements with that so we're going to get all of our parents and we're just going to log them out to our screen as you can see here we get an html collection which has parent one and parent two inside of it now let's say that i come down here and i say you know what we're going to say document.append child instead of appending this to the child we're actually going to append it to our grandparent so let's just say const grandparent is equal to document.queryselector and we want to get our grandparent just like that so we'll say grandparent we're going to append a new child to that in this child we'll just say const child equals document dot create element it's going to be a div and we're going to say child dot class list dot and we want to add in the classlist of parent we're essentially just adding a new parent inside of the grandparent so if we save this and i just do a console log of my parents down here again you're going to notice my parents list automatically updated you can see it has the div parent inside of it that we just added that third parent and that's because this get elements by class name returns to us an html collection which automatically live updates itself so even though i selected my elements up here and never selected them again even after adding my parent i never changed my selection it automatically updated my array here sometimes you may want that but generally this leads to bugs it's really hard to deal with so instead if we change this to query selector all we just change it to dot parent here now this is going to get all the parents on the page but it's never going to live update so you can see when i log out my parents the second time it does not include that new parent because this is a static list that does not live update so i would need to reselect my parents by just copying this down here and doing another selector now if i reselect them it's getting that new parent but it doesn't automatically live update which in my opinion is much preferred now knowing which methods and properties do what inside of javascript is almost impossible to memorize so i highly recommend you download my full cheat sheet it'll be linked down below and it'll make doing this so much easier with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 29,839

Keywords: webdevsimplified, node vs element, js node vs element, javascript node vs element, js, javascript, javascript node, javascript element, js node, js element, js dom, javascript dom, dom traversal, js dom traversal, javascript dom traversal

Id: rhvec8cXLlo

Length: 8min 46sec (526 seconds)

Published: Tue Oct 26 2021