+ 6

[ANSWERED] How do I exclude or filter some of the elements collected by `querySelectorAll` method

Assuming we have 10 buttons in some page, how do we exclude or prevent some of them from being collected by `querySelectorAll` method. Is there any specifier that I can use, maybe in the argument string passed during the call to the `querySelectorAll`?

20th Jun 2020, 9:27 AM
Ipang
7 ответов
20th Jun 2020, 10:10 AM
Taste
Taste - avatar
+ 5
Depends on the criteria you want to filter the "some". It can be filtered by specific attribute eg input[type="range"], button[disabled] or some pseudo element eg li:nth-child(2n+1) Please read through the Mozilla doc, it explains most of the possibility on setting css parameters of querySelctorAll method. If you know css well, it should not be an issue to use querySelctorAll. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
20th Jun 2020, 10:03 AM
Calviղ
Calviղ - avatar
+ 4
other way around Ore's solution is using :not pseudo class ex. excluding any button with .bad class button:not(.bad)
20th Jun 2020, 10:05 AM
Taste
Taste - avatar
+ 4
Ore , Calviղ and Taste Thank you very much guys 🙏 I think the :not pseudo kinda be the thing that I was looking for : )
20th Jun 2020, 11:40 AM
Ipang
+ 3
Give a class attribute to the elements you need. Afterwards you can use a class (.) selector to select what you need
20th Jun 2020, 9:54 AM
Ore
Ore - avatar
+ 3
Taste I am not aware that you can use pseudo selectors in vanilla js. Can you show me an example?
20th Jun 2020, 10:07 AM
Ore
Ore - avatar
+ 1
Ore JavaScript and querySelctorAll cannot access pseudo elements, but it can access pseudo class. ::before, ::after are pseudo elements, whereas :not, :focus, :active ... are pseudo class.
20th Jun 2020, 11:21 AM
Calviղ
Calviղ - avatar