Menu
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.
The querySelectorAll() method in HTML is used to return a collection of an element's child elements that match a specified CSS selector(s), as a static NodeList object. The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers.
Since nodeList selected by querySelectorAll has an array-like structure so you can directly apply forEach method with it and pass element as the first element in the callback function.
About the differences, there is an important one in the results between querySelectorAll and getElementsByClassName : the return value is different. querySelectorAll will return a static collection, while getElementsByClassName returns a live collection.
Is it possible to make a search by
querySelectorAllusing 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."
According to the documentation, just like with any css selector, you can specify as many conditions as you want, and they are treated as logical 'OR'.
This example returns a list of all div elements within the document with a class of either "note" or "alert":
var matches = document.querySelectorAll("div.note, div.alert");
source: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Meanwhile to get the 'AND' functionality you can for example simply use a multiattribute selector, as jquery says:
https://api.jquery.com/multiple-attribute-selector/
ex. "input[id][name$='man']" specifies both id and name of the element and both conditions must be met. For classes it's as obvious as ".class1.class2" to require object of 2 classes.
All possible combinations of both are valid, so you can easily get equivalent of more sophisticated 'OR' and 'AND' expressions.
With pure JavaScript you can do this (such as SQL) and anything you need, basically:
<html>
<body>
<input type='button' value='F3' class="c2" id="btn_1">
<input type='button' value='F3' class="c3" id="btn_2">
<input type='button' value='F1' class="c2" id="btn_3">
<input type='submit' value='F2' class="c1" id="btn_4">
<input type='submit' value='F1' class="c3" id="btn_5">
<input type='submit' value='F2' class="c1" id="btn_6">
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var arrFiltered = document.querySelectorAll('input[value=F2][type=submit][class=c1]');
arrFiltered.forEach(function (el)
{
var node = document.createElement("p");
node.innerHTML = el.getAttribute('id');
window.document.body.appendChild(node);
});
}
</script>
</body>
</html>Yes, querySelectorAll does take a group of selectors:
form, p, legend
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With