Practice: Inspecting DOM "Elements" using the Developer Console

Once you've selected a node in the DOM Tree, you can navigate the DOM Tree with your keyboard.

1. Right-click Ringo below and select Inspect. <li>Ringo</li> is selected in the DOM Tree.

   • George
   • Ringo
   • Paul
   • John  

   

2. Press the Up arrow key 2 times. <ul> is selected. 

   

3. Press the Left arrow key. The <ul> list collapses.
4. Press the Left arrow key again. The parent of the <ul> node is selected. In this case it's the  <li>  node containing the instructions for step 1.

5. Press the Down arrow key 2 times so that you've re-selected the <ul>  list that you just collapsed. It should look like this:  <ul>...</ul>
6. Press the Right arrow key. The list expands.