querySelector VS getElementById

ご挨拶

初めまして、情報系の学部１年の者です。何かしら記事を書きたいなと思ったのと、コードを書いていて個人的に気になったことをメモがわりに利用していきたいなと思い書きました。何もかもが初心者なのでご容赦ください。また指摘や訂正などあればコメントをよろしくお願いいたします、自身の学習に役立てたいと考えています。m(_ _)m

結論

querySelectorではid、classやその他のセレクターを指定でき、DOMツリー内で上から最初に一致するセレクターから取得し、かつ取得する要素の範囲も指定できます。要素がネストされている場合の対策もされていて、その範囲もまた指定できます。この点でgetElementByIdより柔軟なメソッドであると言えます。getElementyByIdはidのみ取得し、idは文書内で一意であるため、可読性の面からは優秀だと感じます。また、getElementByIdは指定したidを持つ要素の子要素は全てを取得するため、柔軟さの面ではやはりquerySelectorに劣ると言えると考えます。Reactの始めのお作法のように、rootというidを指して使いたい場合にはgetElementByIdが光るのかなと思いました。

---

querySelectorやgetElementByIdで取得した要素がformだった場合に、elementsプロパティを持ち、このプロパティに配列のようにアクセスすることができます。

sample.js

<form action="/sample" method="POST" id="this">
    <input type="text" name="item1">
    <input type="text" name="items2">
    <button type="submit">送信</button>
</form>
<script>
    const formEl1 = document.querySelector("form");
    formEl1.addEventListener("submit", function (event) {
      event.preventDefault();
      const item1 = formEl1[0].value;
      const item2 = formEl1[1].value;
      console.log(item1, item2) // => 各々inputに入力し送信した値
    });
</script>

この方法での子要素の取得は推奨されていないようです。
以下に記述した方法の方が良いのかも.(?)

<form action="/sample" method="POST" id="this">
    <input type="text" name="item1">
    <input type="text" name="items2">
    <button type="submit">送信</button>
</form>
<script>
    const formEl1 = document.querySelector("form");
    formEl1.addEventListener("submit", function (event) {
      event.preventDefault();
      const item1 = formEl1.elements["item1"].value;
      const item2 = formEl1.elemtns["item2"].value;
      console.log(item1, item2) // => 各々inputに入力し送信した値
    });
</script>

追記

ありがたいことにコメントを頂きました。詳しくはコメント欄に記載の通りです。
上に記述した例の場合だと以下のscriptの方が適切という指摘を頂きました。
純粋に自分の知識不足です。学びになりました。ありがとうございます🙏

modified.js

const formEl1 = document.querySelector("form");
formEl1.addEventListener("submit", function (event) {
  event.preventDefault();
  const formData = new FormData(event.target, event.submitter);
  const item1 = formData.get("item1");
  const item2 = formData.get("item2");
  console.log(item1, item2) // => 各々inputに入力し送信した値
});