querySelectorAll - おはし

querySelectorAllについてのおまとめ

こんなインプット要素を持つページがあったとして…

<!DOCTYPE html>
  <body>
    <div>
      <input type="text" id="id" />
      <input type="text" id="name" />
    </div>
  </body>
</html>

querySelectorAllで値を取得すると、nodeListが返ってくる

const getInput = document.querySelectorAll("input");
 NodeList(2) [input#id, input#name]

forEachで回す

これは元々備わっていますね

getInput.forEach(value=>console.log(value.id))
 id
 name

mapは備わっていませんが、スプレッド構文で展開したものを配列にすると、mapで回せます

[...getInput].map(value=>value.id)
 ['id', 'name']

idと入力値のオブジェクトを作りたいときは、Object.fromEntries()が使えそうです。

Object.fromEntries() は、[値,キー]のリストをオブジェクトにできます。

Object.fromEntries([["id",1],["name","hasi"]])
 {id: 1, name: 'hasi'}

mapと組み合わせてオブジェクトにしてみます。

Object.fromEntries([...getInput].map(value=>[value.id,value.value]))
{id: 'あ', name: 'い'}

他にも書き方はありそうですね。

記事書いてる途中、こんな配列を処理したことなかったっけな…？これどうやってObjectにするのかな？って思ったけど、良い書き方が思い浮かばなかった。

obj = [{id: 1},{name: 'hasi'}]
0: {id: 1}
1: {name: 'hasi'}

一応書いてみたけど、なんじゃこりゃ…。

Object.fromEntries(obj.map(value=>[Object.keys(value),Object.values(value)].flat()))
{id: 1, name: 'hasi'}

今度調べておこうか…。
ちなみに、前処理した気がすると思っていたのは完全に勘違いだったのでした。30分ぐらい考えてしまった。