Tip of the Day: Accessing and Inspecting DOM Elements with $0 | Inflectra

Tip of the Day: Accessing and Inspecting DOM Elements with $0

Modern browsers have incredibly powerful developer tools. Hit the F12 key and you get access to a wealth of great information and features. The dev tools are great for looking through the DOM and inspecting specific HTML elements. Want to do something on/with that element in JavaScript too? They have you covered. The secret is $0.

<joke>In fact, using $0 can save you more than $0 :-)</joke>

How it Works

Select an element in the "Elements" panel of the browser dev tools, or "Inspect Element" from the web page itself. This will select the item. The dev tools puts this helpful "== $0" next to the HTML element for you.

 

What is that for? Accessing that exact element in the console through JavaScript. Type "$0" in the console and press return. You get the element you just selected. Pretty neat huh?

 

Bonus tips

  • This works in IE, Safari, Edge, Chrome, and Firefox (though only Chrome shows you the "== $0" in the Elements panel
  • Edge, Chrome, and even IE have a history feature for the last 5 elements: $0 is the most recent element selected, $1 is the one before that, $2 the one before that, up to $4

tips browser dom