Can I put logical operators in document.querySelectorAll? If so, how?

Question

Let's say I want to find all div elements and span inside p.

Is it possible to get all what I want in a single querySelectorAll invocation?

Conceptually it should be something like document.querySelectorAll("div | p span") (where | means or).

@RayonDabre That is wrong. That will select `span` elements inside `p` and all `div` elements throughout the DOM. — Rajaprabhu Aravindasamy, Apr 11 '16 at 09:37

score 37 · Accepted Answer · answered Apr 11 '16 at 09:38

37

Yes. You can use the same logical operators allowed in CSS:

OR: chain selectors with commas

document.querySelectorAll('div, p span');
// selects divs, and spans in ps

AND: chain selectors without whitespace

document.querySelectorAll('div.myClass');
// selects divs with the class "myClass"

NOT: :not()-selector

document.querySelectorAll('div:not(.myClass)');
// selects divs that do not have the class "myClass"

answered Apr 11 '16 at 09:38

KWeiss

1

You made a typo on the last one. Should be `document.querySelectorAll('div:not(.myClass)');` – Jose Rui Santos Apr 11 '16 at 09:43

1 Answers1