Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Navigate the DOM Tree with a keyboard

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

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

George

Ringo

Paul

John

Figure 4. Inspecting the Ringo node

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

Figure 5. Inspecting the ul node

Press the Left arrow key. The <ul> list collapses.

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.

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>

Press the Right arrow key. The list expands.

Scroll into view

When viewing the DOM Tree, sometimes you'll find yourself interested in a DOM node that's
not currently in the viewport. For example, suppose that you scrolled to the bottom of the
page, and you're interested in the <h1> node at the top of the page. Scroll into view
lets you quickly reposition the viewport so that you can see the node.

Reorder DOM nodes

Right-click Elvis Presley below and select Inspect. Notice that it's the last item
in the list.

Stevie Wonder

Tom Waits

Chris Thile

Elvis Presley

In the DOM Tree, drag <li>Elvis Presley</li> to the top of the list.

Figure 11. Dragging the node to the top of the list

Force state

You can force nodes to remain in states like :active, :hover, :focus,
:visited, and :focus-within.

Hover over The Lord of the Flies below. The background color becomes orange.

The Lord of the Flies

Crime and Punishment

Moby Dick

Right-click The Lord of the Flies above and select Inspect.

Right-click <li class="demo--hover">The Lord of the Flies</li> and select Force
State > :hover. See Appendix: Missing options if you don't see this option.
The background color remains orange even though you're not actually hovering over the node.

Hide a node

Press H to hide a node.

Right-click The Stars My Destination below and select Inspect.

The Count of Monte Cristo

The Stars My Destination

Press the H key. The node is hidden.

Figure 12. What the node looks like in the DOM Tree after it's hidden

Press the H key again. The node is shown again.

Delete a node

Press Delete to delete a node.

Right-click Foundation below and select Inspect.

The Illustrated Man

Through the Looking-Glass

Foundation

Press the Delete key. The node is deleted.

Press Control+Z or Command+Z (Mac).
The last action is undone and the node reappears.

Access nodes in the Console

DevTools provides a few shortcuts for accessing DOM nodes from the Console, or getting
JavaScript references to them.

Reference the currently-selected node with $0

When you inspect a node, the == $0 text next to the node means that you can reference this
node in the Console with the variable $0.

Right-click The Left Hand of Darkness below and select Inspect.

The Left Hand of Darkness

Dune

Press the Escape key to open the Console Drawer.

Type $0 and press the Enter key. The result of the expression shows that
$0 evaluates to <li>The Left Hand of Darkness</li>.

Figure 13. The result of the first $0 expression in the Console

Hover over the result. The node is highlighted in the viewport.

Click <li>Dune</li> in the DOM Tree, type $0 in the Console again, and then press
Enter again. Now, $0 evaluates to <li>Dune</li>.

Figure 14. The result of the second $0 expression in the Console

Store as global variable

If you need to refer back to a node many times, store it as a global variable.

Right-click The Big Sleep below and select Inspect.

The Big Sleep

The Long Goodbye

Right-click <li>The Big Sleep</li> in the DOM Tree and select Store as global
variable. See Appendix: Missing options if you don't see this option.

Type temp1 in the Console and then press Enter. The result of the expression
shows that the variable evaluates to the node.

Figure 15. The result of the temp1 expression

Copy JS path

Copy the JavaScript path to a node when you need to reference it in an automated test.

Right-click The Brothers Karamazov below and select Inspect.

The Brothers Karamazov

Crime and Punishment

Right-click <li>The Brothers Karamazov</li> in the DOM Tree and select
Copy > Copy JS Path. A document.querySelector() expression that resolves to the
node has been copied to your clipboard.

Press Control+V or Command+V (Mac) to
paste the expression into the Console.

Press Enter to evaluate the expression.

Figure 16. The result of the Copy JS Path expression

Break on DOM changes

DevTools allows you to pause a page's JavaScript when the JavaScript modifies the DOM.

Break on attribute modifications

Use attribute modification breakpoints when you want to pause the JavaScript that causes
any attribute of a node to change.

Right-click Sauerkraut below and select Inspect.

[This section requires a browser that supports JavaScript and iframes.]

In the DOM Tree, right-click <li id="target">Sauerkraut</li> and select Break On >
Attribute Modifications. See Appendix: Missing options if you can't see this
option.

Figure 17. Break on attribute modifications

In the next step you're going to be instructed to click a button that pauses the page's code.
Once the page is paused you won't be able to scroll the page. You'll need to click Resume
Script Execution in order to make
the page scrollable again.

Figure 18. Where to resume script execution

Click the Set Background button above. This sets the style attribute of the node to
background-color:thistle. DevTools pauses the page and highlights the
code that caused the attribute to change.

Click Resume Script Execution, as mentioned earlier.

Break on node removal

If you want to pause when a particular node is removed, use node removal breakpoints.

Right-click Neuromancer below and select Inspect.

[This section requires a browser that supports JavaScript and iframes.]

In the DOM Tree, right-click <li id="target">Neuromancer</li> and select Break On >
Node Removal. See Appendix: Missing options if you can't see this option.

Click the Delete button above. DevTools pauses the page and highlights the
code that caused the node to be removed.

Click Resume Script Execution.

Break on subtree modifications

After you put a subtree modification breakpoint on a node, DevTools pauses the page
when any of the node's descendants are added or removed.

Right-click A Fire Upon The Deep below and select Inspect.

[This section requires a browser that supports JavaScript and iframes.]

In the DOM Tree, right-click <ul id="target">, which is the node above
<li>A Fire Upon the Deep</li>, and select Break On > Subtree Modifications.
See Appendix: Missing options if you can't see this option.

Click Add Child. The code pauses because a <li> node was added to the list.

Click Resume Script Execution.

Next steps

That covers most of the DOM-related features in DevTools. You can discover the rest of them
by right-clicking nodes in the DOM Tree and experimenting with the other options that weren't
covered in this tutorial. See also Elements panel keyboard shortcuts.

This tree of objects, or nodes, representing the page's content is called the DOM.
Right now it looks the same as the HTML, but suppose that the script referenced at the
bottom of the HTML runs this code:

That code removes the h1 node and adds another p node to the DOM. The complete DOM now looks
like this:

html
head
title
body
p
script
p

The page's HTML is now different than its DOM. In other words, HTML represents
initial page content, and the DOM represents current page content. When JavaScript
adds, removes, or edits nodes, the DOM becomes different than the HTML.

Appendix: Scroll into view

This is a continuation of the Scroll into view section. Follow the
instructions below to complete the section.

The <li>Magritte</li> node should still be selected in your DOM Tree. If not, go back to
Scroll into view and start over.

Right-click the <li>Magritte</li> node and select Scroll into view. Your viewport scrolls
back up so that you can see the Magritte node.
See Appendix: Missing options if you can't see the Scroll into view option.

Figure 19. Scroll into view

Appendix: Missing options

Many of the instructions in this tutorial instruct you to right-click a node in the DOM Tree
and then select an option from the context menu that pops up. If you don't see the specified
option in the context menu, try right-clicking away from the node text.