As we continue to look at the DOM, this article contains an interactive tutorial to show how to view and interact with the DOM using the Developer Console. We are using the Chrome browser, but it will work the same in other browsers. This exercise does not count towards your grade. It is just for practice!
Before starting this tutorial:
The tutorial demonstrates how to inspect the <ul> and <li> elements on the page, navigate the DOM tree using the keyboard, and inspect the properties of DOM objects. Close the Dev Console when you are finished with the tutorial.
Once you've selected a node in the DOM Tree, you can navigate the DOM Tree with your keyboard.
Right-click Ringo below and select Inspect. <li>Ringo</li>
is selected in the DOM Tree.
<ul>
is selected.
<ul>
list collapses.<ul>
node is selected. In this case it's the
<li>
node containing the instructions for step 1.
<ul>
list that you just collapsed. It should look like this:
<ul>...</ul>