“querySelectorAll()” with multiple conditions in JavaScript

by

Is it possible to make a search by querySelectorAll using multiple unrelated conditions?

Yes, because querySelectorAll accepts full CSS selectors, and CSS has the concept of selector groups, which lets you specify more than one unrelated selector. For instance:

var list = document.querySelectorAll("form, p, legend");

…will return a list containing any element that is a form or p or legend.

CSS also has the other concept: Restricting based on more criteria. You just combine multiple aspects of a selector. For instance:

var list = document.querySelectorAll("div.foo");

…will return a list of all div elements that also (and) have the class foo, ignoring other div elements.

You can, of course, combine them:

var list = document.querySelectorAll("div.foo, p.bar, div legend");

…which means “Include any div element that also has the foo class, any p element that also has the bar class, and any legend element that’s also inside a div.”

More Related Contents:

  1. Changing CSS pseudo-element styles via JavaScript [duplicate]
  2. Using querySelector with IDs that are numbers
  3. How to get the second match with QuerySelector?
  4. querySelector search immediate children [duplicate]
  5. How to use querySelectorAll only for elements that have a specific attribute set?
  6. Using querySelectorAll(). Is the result returned by the method ordered?
  7. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  8. How to use a regular expression in querySelectorAll?
  9. Can I have an element with an ID that starts with a number?
  10. querySelector, wildcard element match?
  11. Good ways to improve jQuery selector performance?
  12. Javascript .querySelector find by innerTEXT
  13. Using querySelectorAll to retrieve direct children
  14. When should I use ?? (nullish coalescing) vs || (logical OR)?
  15. How to get nth-child selector to skip hidden divs [duplicate]
  16. How to select nth line of text (CSS/JS)
  17. Get unique selector of element in Jquery
  18. Get element’s CSS selector (when it doesn’t have an id)
  19. Get the DOM path of the clicked
  20. JavaScript if “x = (a || b || c)” statement not working
  21. jQuery vs document.querySelectorAll
  22. Get CSS path from Dom element
  23. .parents() without jquery – or querySelectorAll for parents [duplicate]
  24. Can I use a regular expression in querySelectorAll?
  25. IE8 does not support querySelectorAll
  26. Are data attribute css selectors faster than class selectors?
  27. How to create a collapsing tree table in html/css/js?
  28. Precedence: Logical or vs. Ternary operator
  29. CSS: Select element only if a later sibling exists
  30. iOS8 Safari after a pushState the :nth-child() selectors not works

Leave a Comment