Can I put logical operators in document.querySelectorAll? If so, how?
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"
querySelectorAll with multiple conditions
Is it possible to make a search by
querySelectorAll
using 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
."
Logical and and logical or don't work
.src
property will return your actual file source like file:///home/user/Documents/rockpaper/rock.png
So what you have to do is this:
function checkForWinner(me, opponent) {
let meSrc = me.getAttribute("src");
let opponenentSrc = opponent.getAttribute("src");
if (meSrc == opponenentSrc) {
console.log('draw')
} else if (
meSrc == elements[0] && opponenentSrc == elements[2] ||
meSrc == elements[1] && opponenentSrc == elements[0] ||
meSrc == elements[2] && opponenentSrc == elements[1]
) {
console.log('win')
} else {
console.log('lose')
}
}
Queryselectall for selecting invalid input types
Put quotes around the value of the type
attribute in your selector.
Note: "text num" is not a valid value for the type attribute of an input. The original selector without the quotes did not work because the value contains a space.
console.log([...document.querySelectorAll('input[type="text"], input[type="text num"], textarea')]);
<input type="text" id="532523" name="safgafg">
<input type="text" id="453462" name="sdhfd">
<input type="text num" id="2354614" name="fghjsfga">
<textarea></textarea>
<div></div>
document.querySelectorAll with conditions inside :not not working
Try this
document.querySelectorAll("#someID:not(.classNameOne) >
div, .classNameTwo > div, div[class*=-something] > div ");
Related Topics
Check If Window Is Already Open Window.Open
How to Set Mousemove Update Speed
Changing Data Content on an Object Tag in HTML
How to Disable JavaScript Function Calls from the Browser Console
How to Dynamically Adjust CSS Stylesheet Based on Browser Width
D3 Bar Graph Example Not Working Locally
How to Detect When a New Element Has Been Added to the Document in Jquery
How to Add a List of Images to the Document from an Array of Urls
Issue with Comparing Two Numbers in JavaScript
Find Selected Item in Datalist in HTML
Specify Parent Divs Opacity But Make It Not Affect Children HTML Elements
Getelementbyclass().Setattribute Doesn't Work
CSS Position Absolute Making the Textbox Go Down
Jquery Event Not Triggering for Dom Elements Created After Page Load
What Is <Router-View :Key="$Route.Fullpath">
Canvas.Todataurl() Security Error the Operation Is Insecure
How to Pass Styles to Child Component and Use It as Scoped Style in Vue