How to Put Logical Operators in Document.Queryselectorall? If So, How

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



Leave a reply



Submit