Javascript 如何仅对具有特定属性集的元素使用 querySelectorAll？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10777684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use querySelectorAll only for elements that have a specific attribute set?
提问by Soryn
I'm trying to use document.querySelectorAllfor all checkboxes that have the valueattribute set.
我正在尝试document.querySelectorAll用于所有value设置了属性的复选框。
There are other checkboxes on the page that do not have valueset, and the value is different for each checkbox. The ids and names are not unique though.
页面上还有其他没有value设置的复选框，每个复选框的值都不一样。id 和名称不是唯一的。
Example:
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
例子：
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
How do I select just those checkboxes that have values set?
如何只选择那些设置了值的复选框？
回答by Joseph
You can use querySelectorAll()like this:
你可以这样使用querySelectorAll()：
var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');
This translates to:
这转化为：
get all inputs with the attribute "value" and has the attribute "value" that is not blank.
获取具有属性“value”的所有输入，并且具有非空白的属性“value”。
In this demo, it disables the checkbox with a non-blank value.
在这个演示中，它禁用带有非空值的复选框。
回答by mattdlockyer
Extra Tips:
额外提示：
Multiple "nots", input that is NOT hidden and NOT disabled:
多个“nots”，未隐藏且未禁用的输入：
:not([type="hidden"]):not([disabled])
Also did you know you can do this:
你也知道你可以这样做：
node.parentNode.querySelectorAll('div');
This is equivelent to jQuery's:
这相当于 jQuery 的：
$(node).parent().find('div');
Which will effectively find all divs in "node" and below recursively, HOT DAMN!
这将有效地以递归方式找到“节点”及以下的所有 div，该死的！
回答by Punnerud
With your example:
以你的例子：
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
Replace $$ with document.querySelectorAll in the examples:
在示例中将 $$ 替换为 document.querySelectorAll：
$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230
Use the examples directly with:
直接使用示例：
const $$ = document.querySelectorAll.bind(document);
Some additions:
一些补充：
$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()
