document.querySelector() combine class names and attribute both

Question

How can I combine both class names and element attributes in a document.querySelector() call.

let's say my element is as below:

<div role="button" class="fj2rt Gdrwg"></div>

I want to pass both class names and attribute in the document.querySelector() call for example:

let btn = document.querySelector('.fj2rt.Gdrwg [role="button"]';

Derek Wang · Accepted Answer · 2020-10-02 07:21:10Z

5

No space needed between the role name and class name.

So document.querySelector('.fj2rt.Gdrwg [role="button"]'; should be replaced with document.querySelector('.fj2rt.Gdrwg[role="button"]';.

I have attached working example.

let btn = document.querySelector('.fj2rt.Gdrwg[role="button"]');
console.log(btn);

<div role="button" class="fj2rt Gdrwg"></div>

answered Oct 2, 2020 at 7:21

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Can you pls approve my question if it works well on you?

have to wait another 3 mins to do that according to stackoverflow :)