8.3 DOM Traversal

Hi, folks. In this lesson we're going to take a look at the different ways in which we can move around a webpage programatically. Starting at one element, and navigating through the tree like dome structure to other elements in the documents. One property that elements have is the child nodes property. And we can use this to access all of the element's child elements. So, this property contains a Node list, which contains all child Nodes of all types. So, let's select the list element from the index page. So, we can select the list from the index page using the getElements/Tagname method, but as this method returns a node list we need to just get the element itself from within that node list. And as there is any one less on the page, that will be the first item in the list and that is item zero. So, we pass zero with square brackets, and that will give us back the first on ordered list, founder of the page. So, now let's inspect the length of the Node list that the UI element has. So, we can see there are three items in the list and we have requested the length of the child nodes property. We actually get back seven even though there are three list items, the line breaks in between each list item are also classed as child nodes. And so, these are included within the child nodes connection. This can be very confusing. So, instead of using child nodes, if we're only interested in working with the elements children of another elements, we can just use children instead of child nodes. This property is also a collection, but it only contains genuine elements. It doesn't include other nodes, like whitespace, or line breaks, or comments. So, now we see three as we were probably expecting the first time. If we want to get just the first, or last child of an element, we can use the first child, or last child properties. And as before when we use the child Nodes property. The first child and last child properties may, or may not point to genuine elements. In this case they're both text Nodes. So, once again, if we only want to consider actual HTML elements, we need to use first element child, or last element child instead. And this time we actually get the list item. So, these properties allow us to travel down the DOM tree from a parent to his children. If we want to access the parents of an element, we can use the parent node property instead. This gives us the body element in this case, because the unordered list is a direct child of the body. Now, notice that this didn't give us any weird text, or comment nodes, or anything like that. Generally, only actual HTML elements can have children. So, even know there is a parent element property, generally, it's fine to use parentNode. The last few properties that we have for DOM traversal, are the next sibling and previous sibling properties. And once again, because next sibling, or previous sibling don't just work with HTML elements, they work with other types of node as well. In this case, we see those pesky test nodes once again. So, as with the other methods, we can use next element sibling, or previous element sibling if we're only interested in working with actual HTML elements. And this time, we get the nodes that we were properly expecting. So, in this lesson, we looked at the different properties we have for traversing the DOM tree from one element to another. We saw that there are several different ways of moving down through the DOM tree and accessing the children of an element using either childNodes children. And then, we can get just the first, or last child of an element using either first child, or last child, or firstElementChild and lastElementChild. We covered moving upwards through the DOM with the parentNode property and moving left, or right through the DOM with the next sibling, previous sibling, nextElementSibling. And previous element siblings properties. In the next lesson, we're going to look at how we can add and remove elements from the page. Thanks for watching.