CODEWITHSUNDEEP
javascriptnode.js
klaurtar1
klaurtar1

Reputation: 788

CSS selector for exact class name?

I am creating a data scraper and I need to collect a certain class in a nodelist:

let renewButtons = document.querySelectorAll('a._7s5_._3-95._4jy0._4jy3._517h._51sy._42ft')

These renewButtons are enabled and clickable buttons. My issue arises with the disabled buttons on the page. Their class names are:

_7s5_ _3-95 _4jy0 _4jy3 _517h _51sy _42ft _42fr

which is the same class as the enabled buttons except for the _42fr class added at the end. Everytime I querySelectorAll I get a nodelist of both enabled and disabled buttons. Is there a way to specify selecting only the enabled buttons? (selecting a class that matches exactly and only the specified classes)

Upvotes: 0

Views: 480

Answers (2)

Matvii Hodovaniuk
Matvii Hodovaniuk

Reputation: 513

You could use :enabled in your query selector like in an example below:

// will console only enabled `.btn` elements
console.log(document.querySelectorAll(".btn:enabled"))
<button class="btn">Enabled</button>
<button class="btn disabled" disabled>Disabled</button>

Upvotes: 0

MKougiouris
MKougiouris

Reputation: 2861

You can try the use of pseudo selectors. These are not actualy selectors, but consider them like "meta" selectors that each browser usually knows how to handle.

In your case you would use the :disabled selector.

Take a look here and here for more info on this, hope this helps!

Upvotes: 1

Related Questions