web-dev-qa-db-ja.com

特定の属性が設定されている要素に対してのみquerySelectorAllを使用する方法は？

value属性が設定されているすべてのチェックボックスにdocument.querySelectorAllを使用しようとしています。

ページにはvalueが設定されていない他のチェックボックスがあり、値はチェックボックスごとに異なります。ただし、IDと名前は一意ではありません。

例：<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

値が設定されているチェックボックスのみを選択するにはどうすればよいですか？

javascriptcss-selectorsselectors-api
88
Soryn

次のようにquerySelectorAll()を使用できます。

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

これは次のように変換されます：

属性「値」を持つすべての入力を取得し、属性「値」が空白ではありません。

このデモでは 、空白以外の値のチェックボックスを無効にします。

172
Joseph

追加のヒント：

複数の「nots」、非表示ではなく無効になっていない入力：

:not([type="hidden"]):not([disabled])

また、これを行うことができることを知っていました：

node.parentNode.querySelectorAll('div');

これはjQueryと同等です。

$(node).parent().find('div');

これにより、「node」以下のすべてのdivが再帰的に効率的に検索されます。HOTDAMN！

17
mattdlockyer

あなたの例では：

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

例の$$を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

次の例を直接使用します。

const $$ = document.querySelectorAll.bind(document);

いくつかの追加：

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()
3
Punnerud