【JavaScript】要素を取得する方法まとめ

2024 4/11

2021年7月14日 2024年4月11日

今回はJavaScriptで要素を選択、取得する方法を紹介します。

自分が毎回忘れてたので、探し回るのが大変なのでここにまとめました。

Web制作やフロントエンド開発で重宝すること間違いなしです。

今回は頻出の３つを取り上げましたので一緒にみていきましょう。

JavaScriptで要素を選択する方法

まず最初は複数のidをもつ要素が並ぶ中で、ひとつだけidを指定して取得する方法の紹介です。

ここで重要なポイントは下記のコードです。

document.getElementById("elm1")

JavaScriptで一番最初に学ぶんじゃない？っていうくらい基本のキですね。

()の中に指定のid名を入れることで該当の要素を取得できます。

.textContentは取得した要素の中のテキスト部分を抽出するために追記しています。

続いてはidではなくclassの場合のパターンです。

ここで紹介したいのは下記のコードです。

document.querySelector(".elm2")

document.querySelectorはidでもclassでも指定できるとても便利なメソッドです。

getElementByIdとの大きな違いは（）の中で指定するとき、

idなら必ず（”#elm1″）とすること、

classなら必ず（”.elm2″）とすることです。

この一文字忘れで全く要素が見つからない、取得できないという事もよくある話です。

これさえ気を付ければ要素の取得には万能です。

さて最後は同じclassを持つ複数の要素を選びたい時を想定したパターンです。

ここで登場するのは

document.querySelectorAll(".elm")

です。

querySelectorAllは（）内で指定した要素を配列のような状態で複数同時に取得できます。

そのため、各要素に何かしらの処理を適用するには↓のように

elms.forEach((item) => {
    // ここに処理
  });
};

forEachなどで処理を回していきましょう。

参考なったわ

よかったらシェアしてね！