Get started with viewing and changing the DOM

Complete these interactive tutorials to learn the basics of viewing and changing the DOM of a page using Microsoft Edge DevTools.

This tutorial assumes that you know the difference between the DOM and HTML. Navigate to Appendix: HTML versus the DOM for an explanation.

Open DOM examples

  1. Hold Control (Windows, Linux) or Command (macOS) and choose DOM Examples to open in a new tab.

    DOM Examples

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 are interested in a particular DOM node, Inspect is a fast way to open DevTools and investigate that node.

  1. Open DOM Examples.

  2. Under Inspect a Node, right-choose Michelangelo and choose Inspect.

    Inspect a node

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

      Highlight the Michelangelo node

      1. Choose the Inspect (Inspect) icon in the top-left corner of DevTools.

        The Inspect icon

  3. Under Inspect a Node, choose the Tokyo text. Now, <li>Tokyo</li> is highlighted in the DOM Tree.

Inspecting a node is also the first step towards viewing and changing the styles of a node. Navigate to Get Started With Viewing And Changing CSS.

Once you have selected a node in the DOM Tree, you may navigate the DOM Tree with your keyboard.

  1. Open DOM Examples.

  2. Under Navigate the DOM Tree with a Keyboard, right-choose Ringo and choose Inspect. <li>Ringo</li> is selected in the DOM Tree.

    Inspect the Ringo node

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

      Inspect the ul node

    2. Select the Left arrow key. The <ul> list collapses.

    3. Select the Left arrow key again. The parent of the <ul> node is selected. In this case it is the <div> with the ID navigate-the-dom-tree-with-a-keyboard-1.

    4. Select the Down arrow key 2 times so that you have re-selected the <ul> list that you just collapsed. It should look like this: <ul>... </ul>

    5. Select the Right arrow key. The list expands.

Scroll into view

When viewing the DOM Tree, you may find yourself interested in a DOM node that is not currently in the viewport. For example, suppose that you scrolled to the bottom of the page, and you are interested in the <h1> node at the top of the page. Scroll into view lets you quickly reposition the viewport so that you are able to review the node.

  1. Open DOM Examples.

  2. Under Scroll into View, right-choose Magritte and choose Inspect.

  3. Scroll to the bottom of the DOM Examples page.

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

  5. Hover on the <li>Magritte</li> node, open the contextual menu (right-click), and choose Scroll into view. Your viewport scrolls back up so that you may review the Magritte node. Navigate to Appendix: Missing options if you are not able to review the Scroll into view option.

    Scroll into view

Search for nodes

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

  1. Focus your cursor on the Elements tool.

  2. Select Control+F (Windows, Linux) or Command+F (macOS). 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.

    Highlight the query in the Search bar

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

Edit the DOM

You may edit the DOM on the fly and review how the changes affect the page.

Edit content

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

  1. Open DOM Examples.
  2. Under Edit Content, right-choose Michelle and choose Inspect.
    1. In the DOM Tree, double-click Michelle. In other words, double-click the text between <li> and </li>. The text is highlighted to indicate that it is selected.

      Edit the text

    2. Delete Michelle, type Leela, then select Enter to confirm the change. The text in the DOM changes from Michelle to Leela.

Edit attributes

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

  1. Open DOM Examples.

  2. Under Edit Attributes, right-choose Howard and choose Inspect.

  3. Double-click <li>. The text is highlighted to indicate that the node is selected.

    Edit the node

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

    Add a style attribute to the node

Edit node type

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

  1. Open DOM Examples.
  2. Under Edit Node Type, right-choose Hank and choose Inspect.
    1. Double-click <li>. The text li is highlighted.

    2. Delete li, type button, then select Enter. The <li> node changes to a <button> node.

      Change the node type to button

Reorder DOM nodes

Drag nodes to reorder them.

  1. Open DOM Examples.

  2. Under Reorder DOM Nodes, right-choose Elvis Presley and choose Inspect.

    Note

    It is the last item in the list.

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

      Drag the node to the top of the list

Force state

You are able to force nodes to remain in states including :active, :hover, :focus, :visited, and :focus-within.

  1. Open DOM Examples.
  2. Under Force state, hover on The Lord of the Flies. The background color becomes orange.
    1. Hover on The Lord of the Flies, open the contextual menu (right-click), and choose Inspect.
    2. Hover on <li class="demo--hover">The Lord of the Flies</li>, open the contextual menu (right-click), and choose Force State > :hover. Navigate to Appendix: Missing options if the option is not displayed. The background color remains orange even though you are not actually hovering over the node.

Hide a node

Select H to hide a node.

  1. Open DOM Examples.
  2. Under Hide a node, right-choose The Stars My Destination and choose Inspect.
    1. Select the H key. The node is hidden.

      What the node looks like in the DOM Tree after it is hidden

    2. Select the H key again. The node is shown again.

Delete a node

Select Delete to delete a node.

  1. Open DOM Examples.
  2. Under Delete a Node, right-choose Foundation and choose Inspect.
    1. Select the Delete key. The node is deleted.
    2. Select Control+Z (Windows, Linux) or Command+Z (macOS). 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 each one.

Reference the currently-selected node with $0

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

  1. Open DOM Examples.
  2. Under Reference the currently-selected node with $0, right-choose The Left Hand of Darkness and choose Inspect.
    1. Select the Escape key to open the Console Drawer.

    2. Type $0 and select 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

    3. Hover on the result. The node is highlighted in the viewport.

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

      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. Open DOM Examples.
  2. Under Store as global variable, hover on The Big Sleep, open the contextual menu (right-click), and choose Inspect.
    1. Hover on <li>The Big Sleep</li> in the DOM Tree, open the contextual menu (right-click), and choose Store as global variable. Navigate to Appendix: Missing options if the option is not displayed.

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

      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. Open DOM Examples.
  2. Under Copy JS path, hover on The Brothers Karamazov, open the contextual menu (right-click), and choose Inspect.
    1. Hover on <li>The Brothers Karamazov</li> in the DOM Tree, open the contextual menu (right-click), and choose Copy > Copy JS Path. A document.querySelector() expression that resolves to the node has been copied to your clipboard.

    2. Select Control+V (Windows, Linux) or Command+V (macOS) to paste the expression into the Console.

    3. Select Enter to evaluate the expression.

      The result of the Copy JS Path expression

Break on DOM changes

DevTools enables you to pause the JavaScript of a page 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. Open DOM Examples.
  2. Under Break on attribute modifications, right-choose Sauerkraut and choose Inspect.
    1. In the DOM Tree, hover on <li id="target">Sauerkraut</li>, open the contextual menu (right-click), and choose Break On > Attribute Modifications. Navigate to Appendix: Missing options if the option is not displayed.

      Break on attribute modifications

    2. In the next step you are going to be instructed to choose a button that pauses the code of the page. After the page is paused you are no longer able to scroll the page. You must choose Resume Script (Resume Script) in order to make the page scrollable again.

      Where to resume script running

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

    4. Choose Resume Script (Resume Script), as mentioned earlier.

Break on node removal

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

  1. Open DOM Examples.
  2. Under Break on Node Removal, right-choose Neuromancer and choose Inspect.
    1. In the DOM Tree, hover on <li id="target">Neuromancer</li>, open the contextual menu (right-click), and choose Break On > Node Removal. Navigate to Appendix: Missing options if the option is not displayed.
    2. Choose the Delete button above. DevTools pauses the page and highlights the code that caused the node to be removed.
    3. Choose Resume Script (Resume Script).

Break on subtree modifications

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

  1. Open DOM Examples.
  2. Under Break on Subtree Modifications, right-choose A Fire Upon The Deep and choose Inspect.
    1. In the DOM Tree, hover on <ul id="target">, which is the node above <li>A Fire Upon the Deep</li>, open the contextual menu (right-click), and choose Break On > Subtree Modifications. If the option is not displayed, navigate to Appendix: Missing options.
    2. Choose Add Child. The code pauses because a <li> node was added to the list.
    3. Choose Resume Script (Resume Script).

Next steps

That covers most of the DOM-related features in DevTools. You are able to discover the rest of the features by hovering on nodes in the DOM Tree, opening the contextual menu (right-click), and experimenting with the other options that were not covered in this tutorial. Navigate to Elements panel keyboard shortcuts.

Check out the Microsoft Edge DevTools homepage to discover everything else you are able to do with DevTools.

Appendix: HTML versus the DOM

The following section quickly explains the difference between HTML and the DOM.

When you use a web browser to request a page, the server returns HTML like the following code snippet

<!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 the following list.

html
head
title
body
h1
p
script

This tree of objects, or nodes, representing the content of the page 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 the following code snippet.

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 displays the following list.

html
head
title
body
p
script
p

The HTML for the page is now different than the 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.

Navigate to Introduction to the DOM to learn more.

Appendix: Missing options

Many of the instructions in this tutorial instruct you to hover on a node in the DOM Tree, open the contextual menu (right-click), and then choose an option from the context menu that pops up. If the specified option in the context menu is not displayed, try hovering away from the node text and opening the contextual menu (right-click).

Where to choose if all of the options are not displayed

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.