Print bookPrint book

Practice: Inspecting DOM "Elements" using the Developer Console

Site: Saylor Academy
Course: PRDV401: Introduction to JavaScript I
Book: Practice: Inspecting DOM "Elements" using the Developer Console
Printed by: Guest user
Date: Saturday, May 18, 2024, 4:47 PM

Description

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.

Table of contents

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.

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

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


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

  2. Click the Tokyo text below.
        • Tokyo
        • Beirut
    Now, <li>Tokyo</li> is highlighted in the DOM Tree.

    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  

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

    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.

     

    We've used the console.log method to display messages in the Console panel of the Developer Console.  The console.dir method displays the properties for a specific object. The JavaScript language uses this information to access and manipulate objects. This method is also useful when debugging an application. 

    This example shows how to view the “properties” and “methods” associated with the Document object such as BaseURI.

     

    Console API reference

     

    console.dir(object)

    Log level: Info

    Prints a JSON representation of the specified object.

     

    console.dir(document.head);

     


    Figure 4. The result of the console.dir() example above.