Get Started With Viewing And Changing The DOM

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. See Appendix: HTML versus the DOM for an explanation.

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. Right-click Michelangelo below and select Inspect.

    • Michelangelo
    • Raphael

    Inspecting a node
    Figure 1. Inspecting a node

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

    Highlighting the Michelangelo< node
    Figure 2. Highlighting the Michelangelo node

  2. Click the Inspect Inspect icon in the top-left corner of DevTools.

    The Inspect icon
    Figure 3. The Inspect icon

  3. Click the Tokyo text below.

    • Tokyo
    • Beirut

    Now, <li>Tokyo</li> is highlighted in the DOM Tree.

Inspecting a node is also the first step towards viewing and changing a node's styles. See Get Started With Viewing And Changing CSS.

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.

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

    • George
    • Ringo
    • Paul
    • John

    Inspecting the Ringo node
    Figure 4. Inspecting the Ringo node

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

    Inspecting the ul node
    Figure 5. Inspecting the ul node

  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.

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.

  1. Right-click Magritte below and select Inspect.

    • Magritte
    • Soutine
  2. Go to the Appendix: Scroll into view section at the bottom of this page. The instructions continue there.

After completing the instructions at the bottom of the page you should jump back up to here.

You can search the DOM Tree by string, CSS selector, or XPath selector.

  1. Focus your cursor on the Elements panel.
  2. Press Control+F or Command+F (Mac). The Search bar opens at the bottom of the DOM Tree.
  3. Type The Moon is a Harsh Mistress. The last sentence is highlighted in the DOM Tree.

    Highlighting the query in the Search bar
    Figure 6. Highlighting the query in the Search bar

As mentioned above, the Search bar also supports CSS and XPath selectors.

Edit the DOM

You can edit the DOM on the fly and see how those changes affect the page.

Edit content

To edit a node's content, double-click the content in the DOM Tree.

  1. Right-click Michelle below and select Inspect.

    • Fry
    • Michelle
  2. In the DOM Tree, double-click Michelle. In other words, double-click the text between <li> and </li>. The text is highlighted blue to indicate that it's selected.

    Editing the text
    Figure 7. Editing the text

  3. Delete Michelle, type Leela, then press Enter to confirm the change. The text above changes from Michelle to Leela.

Edit attributes

To edit attributes, double-click the attribute name or value. Follow the instructions below to learn how to add attributes to a node.

  1. Right-click Howard below and select Inspect.

    • Howard
    • Vince
  2. Double-click <li>. The text is highlighted to indicate that the node is selected.

    Editing the node
    Figure 8. Editing the node

  3. Press the Right arrow key, add a space, type style="background-color:gold", and then press Enter. The background color of the node changes to gold.

    Adding a style attribute to the node
    Figure 9. Adding a style attribute to the node

Edit node type

To edit a node's type, double-click the type and then type in the new type.

  1. Right-click Hank below and select Inspect.

    • Dean
    • Hank
    • Thaddeus
    • Brock
  2. Double-click <li>. The text li is highlighted.

  3. Delete li, type button, then press Enter. The <li> node changes to a <button> node.

    Changing the node type to button
    Figure 10. Changing the node type to button

Reorder DOM nodes

Drag nodes to reorder them.

  1. 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

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

    Dragging the node 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.

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

    • The Lord of the Flies
    • Crime and Punishment
    • Moby Dick

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

  3. 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.

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

    • The Count of Monte Cristo
    • The Stars My Destination
  2. Press the H key. The node is hidden.

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

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

Delete a node

Press Delete to delete a node.

  1. Right-click Foundation below and select Inspect.

    • The Illustrated Man
    • Through the Looking-Glass
    • Foundation
  2. Press the Delete key. The node is deleted.

  3. 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.

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

    • The Left Hand of Darkness
    • Dune
  2. Press the Escape key to open the Console Drawer.

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

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

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

  5. 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>.

    The result of the second $0 expression in the Console
    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.

  1. Right-click The Big Sleep below and select Inspect.

    • The Big Sleep
    • The Long Goodbye
  2. 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.

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

    The result of the temp1 expression
    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.

  1. Right-click The Brothers Karamazov below and select Inspect.

    • The Brothers Karamazov
    • Crime and Punishment
  2. 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.

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

    The result of the Copy JS Path 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.

  1. Right-click Sauerkraut below and select Inspect.

  2. 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.

    Break on attribute modifications
    Figure 17. Break on attribute modifications

  3. 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 Resume Script Execution in order to make the page scrollable again.

    Where to resume script execution
    Figure 18. Where to resume script execution

  4. 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.

  5. Click Resume Script Execution 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.

  1. Right-click Neuromancer below and select Inspect.

  2. 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.

  3. Click the Delete button above. DevTools pauses the page and highlights the code that caused the node to be removed.
  4. Click Resume Script Execution 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.

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

  2. 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.

  3. Click Add Child. The code pauses because a <li> node was added to the list.
  4. Click Resume Script Execution 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.

Check out the Chrome DevTools homepage to discover everything else you can do with DevTools.

See Community if you want to contact the DevTools team or get help from the DevTools community.

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

Appendix: HTML versus the DOM

This section quickly explains the difference between HTML and the DOM.

When you use a web browser to request a page like https://example.com the server returns HTML like this:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

The browser parses the HTML and creates a tree of objects like this:

html
  head
    title
  body
    h1
    p
    script

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:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

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.

See Introduction to the DOM to learn more.

Appendix: Scroll into view

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

  1. The <li>Magritte</li> node should still be selected in your DOM Tree. If not, go back to Scroll into view and start over.
  2. 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.

    Scroll into view
    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.

Where to click if you're not seeing all the options
Figure 20. Where to click if you're not seeing all the options