Access to DOM elements in the console - A step-by-step guide

In this guide, you will learn how to access DOM elements in the Console of Chrome Developer Tools. This is especially important for web developers working with HTML and JavaScript elements. In the video tutorial, you will learn many useful tips and tricks for easily selecting and manipulating DOM elements.

Key Findings

• You can directly access DOM elements using global variables, console functions, and shortcuts.
• You will also learn how to inspect and manipulate past selections.

Step-by-Step Guide

First, make sure you have the Chrome Developer Tools open. You can do this by right-clicking on a webpage and selecting "Inspect" or by using the keyboard shortcut Ctrl + Shift + I.

Now let's see how you can access a specific DOM element.

If you have a DOM element on your page, such as one with the ID "App," you can address this element directly through the console. All elements with an ID are globally available in the window object.

You can easily call this ID by entering window.App in the console. This will display the corresponding DOM element, allowing you to expand it to access its sub-elements and attributes.

Let's say you need to call a function of a video that is present on your page. You could do that with play, provided that the element supports this method.

To see all properties and functions of a DOM element, there is the console.dir() function. If you enter console.dir(window.App), you will get a clear representation of all the properties and methods of the DOM element.

If an element doesn't have an ID, you can still access it by using document.querySelector(). This also works for the entire document.body if you want to access it.

For more specific selections, you can use document.querySelector() or document.querySelectorAll() to get a list of elements that match the given selector.

These lists can be treated like arrays, so you can convert them using Array.from() to work with their elements.

A useful shortcut you can use in the console is $0. This allows you to access the currently selected DOM element in the Elements tab. If you enter $0 and press return, you will see which element is currently highlighted.

In addition, $1, $2, etc. have been introduced to access previous selections. $1 is the element you selected before choosing the current one.

These shortcuts make it easier to access multiple selected elements and make working in the console more efficient.

Remember that while using console.dir() and similar functions, caution is advised. These should primarily be used for debugging purposes and not in production code.

You can now easily access DOM elements that are currently selected without needing specific IDs or complex selectors for that.

Summary

In this tutorial, we have learned various methods to access DOM elements in the Console of Chrome Developer Tools. You have learned how to use IDs, functions, and selectors to manipulate elements on your website.