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.

Complete these interactive tutorials to learn the basics of viewing and changing a page's DOM using Chrome DevTools. This tutorial assumes that you know the difference between the DOM and HTML. 


View DOM nodes

The DOM Tree of the Elements panel is where you do all DOM-related activities in DevTools.


Source: Kayce Basques, https://developer.chrome.com/docs/devtools/dom/
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 License.