Getting the First and Last Child

I wanna show you two properties for this final video. 0:00 First, element child which gives you the first child element of a selected element 0:03 and a last element child which gives you the last. 0:08 Just as we saw earlier with traversing to the next sibling, these properties have 0:11 older or better supported cousins called Called firstChild and lastChild. 0:14 However, those means of traversal can be tricky to deal with as they 0:18 don't always return HTML elements. 0:21 firstElementChild and lastElementChild should seem fairly straightforward after 0:24 the traversing we've been doing so 0:28 let's work on a few examples just to see them in action. 0:30 Let's traverse from the ul element to its first and last child elements. 0:33 Then we can change the background color of each and 0:38 this will just quickly demonstrate that we have traversed correctly. 0:41 So first, we'll create two new Constants, firstListItem and lastListItem. 0:44 FirstListItem traverses from the ul element to the first child and 0:55 remember the ul is stored in the constant listUl. 1:00 So you can just type listUl.firstElementChild. 1:04 And lastListItem traverses to the lastChild. 1:11 So let's say listUl.lastElementChild. 1:15 And now, 1:21 we can change the background color of each one to a color via a style property. 1:22 We'll turn them different colors to be able to tell that we've selected each one 1:27 individually. 1:30 You can use any color you like for this. 1:43 So I'm going to use light sky blue for firstListItem and 1:45 light steel blue for lastListItem. 1:49 Let's save our file. 1:53 And refresh the browser and 1:55 we can see that our change of background color worked, nice. 1:56 This change in background colors isn't really that useful in our application. 2:00 But you'll at least got to practice with traversal through a first and 2:03 last child element. 2:07 If you'd like a challenge you can do on your own, 2:08 you could use these properties to build a feature for this app. 2:10 For example, notice when I click on the Up button of the top list item, 2:13 nothing happens, because they can't go up any further than the top, right? 2:18 So using first element, child, you could remove the Up button here. 2:22 So the app doesn't have a nonfunctional button. 2:26 Likewise, the bottom most list item doesn't need a Down button and 2:29 this problem might seem simple to solve but 2:34 you might find there's a little more to it once you start building this feature. 2:36 Just keep in mind, that as each list item shifts position, 2:40 it's buttons may or may not need to be updated. 2:44 And don't forget to share and talk about your solutions in the Treehouse community. 2:47 You've learned a lot about how to control web pages with JavaScript. 2:52 You can select elements on the page, traverse to other elements in the DOM, set 2:56 listeners on elements, and make changes to the DOM and response to user interaction. 3:00 You even wrote a simple list making application that could easily be built out 3:04 even further if you want to practice with the skills you've learned. 3:08 Remember, we're here to help so 3:12 if you have questions about anything covered in this course. 3:14 Feel free to reach out to the Treehouse staff or other students in the community. 3:16 Thanks, everyone. 3:20