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"]';

Answer 1

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>