JavaScriptでIDやCLASSを取得する方法

2021年10月28日

みなさんこんばんは！

ヒロポンです！

今回はJavaScriptでIDやCLASSの要素を取得する方法について書いていこうと思います！

JavaScriptでIDを取得するには、getElementByIdを使う

まずはJavaScriptでID要素を取得する方法ですが、これは割とシンプルです

getElementById

を使いましょう。

具体的にHTMLに以下のようなコードがあった場合、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myId">こんにちは</div>
</body>
</html>

getElementByIdを使って要素を取得するには、以下のようにします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myId">こんにちは</div>
<script>
    let target = document.getElementById('myId')
</script>
</body>
</html>

上の例では、myIdというId要素を取得し、targetという変数に入れています。

ではこの取得した要素targetに処理をしたい場合。

今回の場合divのbackgroundを黒にして、高さと横幅を360pxにしてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myId">こんにちは</div>
<script>
    let target = document.getElementById('myId')
    target.style.height = '360px';
    target.style.width = '360px';
    target.style.background = 'black';
</script>
</body>
</html>

このコードを実行すると、背景が黒の高さ360px横幅360pxのdiv要素ができるはずです。

JavaScriptでId要素を取得するのは、以上のように簡単なのですが、Class要素を取得する場合少しむずかしくなります。

JavaScriptでClassを取得するには、getElementsByClassNameを使う

では続いてJavaScriptでClass要素を取得する方法について書いていきます。

前提知っておいてほしいのは、HTMLファイルにIDは1つしか存在できませんが、CLASSは複数存在できるいうことです。

それにより、ID要素を取得した場合は、targetという変数をそのまま使えましたが、CLASSはちょっとやり方が変わります。

では以下のようなHTMLファイルのMyclassというclass要素を取得してみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="myclass" >おはようございます。</div>
<div class="myclass">こんにちは</div>
<div class="myclass">こんにちは</div>
</body>
</html>

使い方は基本的にgetElementByIdと同じです。

以下のような書き方でClass要素は取得できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="myclass" >おはようございます。</div>
<div class="myclass">こんにちは</div>
<div class="myclass">こんにちは</div>
<script>
    let targets = document.getElementsByClassName('myclass')
</script>
</body>
</html>

ただ注意してほしいのは、Class要素というのは同じHTMLファイルの中でも複数存在できます。

ということは上記の場合３つのクラス要素がtargetsの中に入っているということになりますね。

ではこのクラス要素に順に処理をする場合はどうするのか？

以下のようにします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="myclass" >おはようございます。</div>
<div class="myclass">こんにちは</div>
<div class="myclass">こんにちは</div>
<script>
    var targets = document.getElementsByClassName('myclass')
    for(let i = 0;i < targets.length;i++){
        var target = targets[i]
        target.style.background = 'blue';
        target.style.height = '300px';
        target.style.width = '300px';
    }
</script>
</body>
</html>

さきほど書いたとおり、getElementByClassNameは複数の要素を取得してきます。

なのでtargetsという変数は配列形式で作られています。

ではこの要素に順に処理をしていくには、どうするのか？

targetsの要素をfor文を使って、順に取り出しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="myclass" >おはようございます。</div>
<div class="myclass">こんにちは</div>
<div class="myclass">こんにちは</div>
<script>
        let targets = document.getElementsByClassName('myclass');

        for(let i = 0; i < targets.length; i++){
            let target = targets[i]
            target.style.width = '300px';
            target.style.height = '300px';
            target.style.background = 'blue';
        }
</script>
</body>
</html>

これでtargetの中に入っている配列の要素に対し、順に処理ができたかと思います。

今回は以上！