Practice: Inspecting DOM "Elements" using the Developer Console
Completion requirements
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:
- Collapse the left navigation pane on this page by selecting the
icon on the top left. - Next, you'll inspect the DOM elements on this page by displaying the Developer Console in your browser.
- The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac.
- 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.
When you're interested in a particular DOM node, Inspect is a fast way to open DevTools and investigate that node.
-
Right-click Michelangelo below and select Inspect.
- Michelangelo
- Raphael
<li>Michelangelo</li> is highlighted in the DOM Tree.
- Click the Inspect inspect icon in the top-left corner of DevTools.
- Click the Tokyo text below.
- Tokyo
- Beirut
Now,
<li>Tokyo</li> is highlighted in the DOM Tree.