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).
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.
document. querySelector(selectors); It returns the first element which matches the selector. querySelectorAll() Method: The querySelectorAll() method returns all the elements within the document which matches the specified CSS selector(s).
querySelector() , document. querySelectorAll( ), Element. closest() , and Element. matches() methods all accept CSS selectors are their argument.
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"
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