Question:
How to use querySelectorAll()" with multiple conditions in JavaScript?

Problem:

Is it possible to make a search by querySelectorAll() using multiple unrelated conditions? If yes, how? And, how to specify whether those are AND or OR criteria?

For example:

How to find all forms, ps and legends with a single querySelectorAll() call? Possible?


Solution:

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."


Suggested blogs:

>How to route between different components in React.js?

>How to save python yaml and load a nested class?-Python

>How to send multiple HTML form fields to PHP arrays via Ajax?

>What is data binding in Angular?

>What is microservice architecture, and why is it better than monolithic architecture?

>What is pipe in Angular?

>What makes Python 'flow' with HTML nicely as compared to PHP?

>What to do when MQTT terminates an infinite loop while subscribing to a topic in Python?

>Creating custom required rule - Laravel validation


Ritu Singh

Ritu Singh

Submit
0 Answers