Practice: Inspecting DOM "Elements" using the Developer Console

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:

  1. Collapse the left navigation pane on this page by selecting the hamburger menu icon on the top left.
  2. Next, you'll inspect the DOM elements on this page by displaying the Developer Console in your browser. 
  3. The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac.
  4. Finally, select the Elements tab.

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.

  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.