loading...

An easy way of accessing elements of a webpage in browser

myogeshchavan97 profile image Yogesh Chavan Updated on ・1 min read

Many times when we’re writing JavaScript code, we want to quickly test if some element on the webpage is present or not or count the list of elements displayed.
For example,

To count the number of jobs displayed:

document.querySelectorAll('.job-item').length

To get the text of the button:

document.querySelector('.btn').innerHTML

But it's tedious to type document.querySelector or document.querySelectorAll every time to do something.

So Chrome developer tools provide an easier way.
Instead of document.querySelector we can use $ and instead of document.querySelectorAll we can use $$.

So no more need of typing the long text, just use $ or $$ and you’re done.

Check out the below gif to see that in action

Trick

Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox here.

Posted on by:

myogeshchavan97 profile

Yogesh Chavan

@myogeshchavan97

Full Stack Developer | JavaScript | React | Nodejs. Subscribe to get weekly newsletter with amazing tips, tricks and articles directly in your inbox https://subscribe-user.herokuapp.com/

Discussion

markdown guide