配列Form部品のうち入力がない要素の取得方法

やりたいこと

同じnameのinput要素が複数並んでいるときにvalueが設定されていないもののうち最初のものをquerySelectorで取得したい。
querySelectorAllを利用してNodeListとして取得したうえで絞り込むことはできるができればセレクタ一発でとりたい。

パターン①　属性セレクタでvalueを指定する

コード

セレクタ [value=""] もしくは :not([value]) を指定する

長所

valueが指定されていないというのが直感的にわかりやすい

短所

valueが指定されていないかvalue=""で明示されているかのいずれかしか取れない

See the Pen Untitled by ぼて (@uhziyfol-the-encoder) on CodePen.

パターン②　疑似クラス:invalidを利用する

方法

取得対象のinputタグにrequired属性を設定したうえで、セレクタ :invalid を指定する。

長所

パターン①のいずれにも対応できる。

短所

ほかにバリデーションを指定している場合などに利用できない。

See the Pen Untitled by ぼて (@uhziyfol-the-encoder) on CodePen.