Get started with viewing and changing the DOM

Kayce Basques

Sofia Emelianova

Watch the video and complete these interactive tutorials to learn the basics of viewing and changing a page's DOM with Chrome DevTools.

This tutorial assumes that you know the difference between the DOM and HTML. Get a referesher in the appendix: HTML versus the DOM.

View DOM nodes

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

Inspect a node

When you're interested in a particular DOM node, Inspect is a fast way to open DevTools and investigate that node.

1. In the following list, right-click Michelangelo. From the menu, select Inspect.

   • Michelangelo
   • Raphael The Elements panel of DevTools opens. <li>Michelangelo</li> is highlighted in the DOM Tree.