How to get element with a certain attribute and without another with vanilla js?

Question

I am trying to get an element that has an attribute of title="some title" but there are multiple ones that come back and I'm to get the first one that has no style attribute.

I tried adding the :not[style] to my select it as an additional argument but it did not work.

document.querySelector(':not([style])', 'not[title="Add to Bag"]');

the element I'm looking for should be:

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>

Answer 1

Combine the two selectors - '[title="Add to Bag"]:not([style])' :

 const els = document.querySelectorAll('[title="Add to Bag"]:not([style])'); console.log('Number of buttons found: ', els.length); console.log(els[0]);

 <button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button> <button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag" style="color: red;">Add to Bag</button>