Chrome Devtool Tips – Accessing DOM Elements

Chrome Dev tool is one of the best tools to develop and debug a web site or application. It provides various shortcuts that web developer can leverage them for quick access of its features.

I am going to write a series of tips that covers all shortcuts and useful features of Chrome Dev tool. In this tip, we are going to start with accessing currently selected dom element in the console without using document.getElement* or document.query* functions.

Dev tool provides short formed expressions to access last five selected tags in the Elements tab and those expressions are $0-$4.

1. $0 – Currently selected element.
2. $1 – Previously selected element.
3. $2 – 3rd element in the history of selection.
4. $3 – 4^th element in the history of selection.
5. $4 – 5^th element in the history of selection.

Before using these expressions, open the Elements tab and select any five elements that you like and then use these expressions in the console. Basically, these expressions will return a DOM object for corresponding HTML element and you can access all DOM attributes and methods.

Example:

You can find the next tip from here.