JavaScript「クラス名から中身を取得する方法」

タグについたクラス名で取得しよう

こんにちは、徳です。

デジタルDIYができるようコーディング・プログラミング・画像加工・動画編集などを本やYouTubeで勉強しています。

現在は初心者なので、とにかくゆっくり進んでいくと思います。

また、「間違っていること」や「こうした方が良いよ」などがあれば、コメントなどしていただけたら幸いです。

では、いきましょう！

JavaScript

今回は、

クラス名から中身を取得する方法

を紹介させていただきます。

JavaScriptでは、HTML内の要素を変更することでWebページに動きをつけることができます。

DOM操作の流れとしては、

このように、先にHTMLの中にある要素を変数に入れる必要があります。

その一つの方法が、

クラス名から中身を取得すること

です。

それではよろしくお願いします。

クラス名から中身を取得する

クラス名から中身を取得するとは

クラス名から中身を取得するとは、

タグについたクラス名から中身をJavaScriptで取り出して変数に代入する

ということです。

なぜ取得する必要があるの?

JavaScriptではDOM操作と言って、HTMLの中身を変えることでWebページに動くをつけることができます。

しかし、JavaScriptで値を変えるには変数に代入する必要があります。

なぜなら、変数に代入できれば他の値を代入して戻すことでコードが変わるからです。

つまり、

このようにすることでHTMLが変わります。

どんなときに使用するの?

クラス名から中身を取得するのは、

HTMLからクラス名で中身を取得したいとき

に使用します。

使うメソッド

id名から中身を取得するには、

• document.querySelector()メソッド
• document.getElementsByClassName()メソッド

を使用します。

document.querySelector()メソッド

書き方

let 変数名 = document.querySelector(".クラス名");

document.getElementsByClassName()メソッド

書き方

let 変数名 = document.getElementsByClassName("クラス名");

クラス名は複数ある可能性があるため、こちらは配列に入ります。

そのため、一つを指定するときはインデックス番号も指定しましょう。

例

document.querySelector()メソッド

let ele = document.querySelector(".name");

console.log(ele);

document.getElementsByClassName()メソッド

let ele = document.getElementsByClassName("name");

console.log(ele[0]);

まとめ

今回は、

クラス名から中身を取得する方法

について紹介させていただきました。

こちらは、DOM操作でHTMLのタグの要素を変数に代入するために使用します。

DOM操作は、JavaScriptでのメインの使い方になるので使いながら慣れていきましょう。

最後まで読んでいただき、ありがとうございました。