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

javascript css dom selector selectors-api
Just a learner picture Just a learner · Apr 11, 2016 · Viewed 7.1k times · Source

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") (if | means or).

Answer

KWeiss picture KWeiss · Apr 11, 2016

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"

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Check if an element contains a class in JavaScript?

Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class? Currently, I'm doing this: The issue is that if I change the HTML to this... <div id="test" class="class1 class5">&…

Read More
Uncaught TypeError: Cannot read property 'top' of undefined

I apologize if this question has already been answered. I've tried searching for solutions but could not find any that suited my code. I'm still new to jQuery. I have two different types of sticky menus for two different pages. …

Read More