querySelector()とgetElementByClassName()の違い

◆◆querySelector()とgetElementByClassName()◆◆

DOM操作を学習したときに、つまづいたこの2つ。
getElementById()の使用が多かったため、いざクラス名で要素を取得しようと
したときに再確認したのでまとめます。

◆◆querySelector()◆◆

◆querySelector()とは

HTML要素を取得するためのメソッドです。
CSSセレクターで要素を取得しますので、カッコ内には『#id名』や『.クラス名』
などで記述をします。
マッチするCSSセレクターが複数ある場合は、最初にマッチした要素が
取得されます。

私は最初にこの説明を読んでもピンとはこなかったのですが、
1ページ中に1つだけのid名と違って、クラス名は1ページ中に複数ある場合が
あります。
なのでクラス名で要素を取得する場合は、マッチするCSSセレクターが複数ある状況が
発生するわけです。

◆使用例

HTML

    <ul id="list">
      <li class="todo">買い物をする</li>
      <li class="todo">洗濯をする</li>
      <li class="todo">掃除をする</li>
    </ul>

JavaScript

const todo = document.querySelector(".todo")

console.log(todo)
// <li class="todo">買い物をする</li>

◆◆getElementByClassName()◆◆

◆getElementByClassName()とは

querySelectorと同じように、HTML要素を取得するためのメソッドです。
カッコ内はクラス名をそのまま記述することで、指定されたクラス名を持つ全ての
要素を配列風オブジェクト(HTMLCollection)で取得できます。

◆使用例

HTML

    <ul id="list">
      <li class="todo">買い物をする</li>
      <li class="todo red">洗濯をする</li>
      <li class="todo">掃除をする</li>
    </ul>

JavaScript

const todo = document.getElementsByClassName("todo")

console.log(todo)
// HTMLCollection(3)
// 0:li.todo
// 1:li.todo.red
// 2:li.todo

配列風オブジェクトには、for文やforEach()メソッドが使えます。
※forEach()は手を加える必要があります。

インデックス番号を加えると、それぞれの要素にアクセスできます。
また、複数のクラスを持つ要素の取得もできます。

JavaScript

const todo1 = document.getElementsByClassName("todo")[0]
console.log(todo1)
// <li class="todo">買い物をする</li>

const todo2 = document.getElementsByClassName("todo red")
console.log(todo2)
// HTMLCollection(1)
// 0:li.todo

const todo3 = document.getElementsByClassName("todo red")[0]
console.log(todo3)
// <li class="todo red">洗濯をする</li>

要素が1つしかなくても、インデックス番号での指定がなければHTMLCollectionで
返されます。

理解しづらくしているのはクラス名が複数使用されるもので、指定する必要が
あるからでしょうか。
指定の仕方もいろいろありますので、理解のためにも後日まとめようと思います。