プログラミング

【初心者向け】ゼロから学ぶ！JavaScriptのid・class取得テクニック

【初心者向け】ゼロから学ぶ！JavaScriptのid・class取得テクニック

JavaScriptを学ぶ上で、HTML要素を取得し操作することはとても重要です。本記事では、初心者向けに id や class を使って要素を取得する方法をわかりやすく解説します。これからプログラミングを始める方にも理解しやすいように、基本的な概念から具体的なコード例まで詳しく紹介していきます。

目次

JavaScriptでid・classを取得する基本を学ぼう

JavaScriptを使うと、Webページ上のさまざまな要素を取得・操作できます。その中でも、特定の要素を選択する方法として id や class を利用することはとても重要です。

この記事では、JavaScriptの id・class取得方法 を初心者向けにわかりやすく解説します。これからJavaScriptを学ぶ方や、Webサイトを操作したい方にとって役立つ内容となっています。

idとclassとは？

JavaScriptで要素を取得する前に、まず id と class の違いを理解しておきましょう。

HTMLの「id」と「class」の違いについて詳しく知りたい方は、こちらの記事で分かりやすく解説しています。初心者向けに基本から応用まで丁寧に説明しているので、ぜひチェックしてみてください！

HTMLとCSSの「id」と「class」の違いを徹底解説！初心者でもすぐに理解できる使い方
関連記事HTMLとCSSの「id」と「class」の違いを徹底解説！初心者でもすぐに理解できる使い方

idとは？

id（アイディー） は、HTML要素に対して 一意（ユニーク） な識別子を与えるための属性です。

例：idを持つHTML要素

<div id="example">この要素はid="example"を持っています</div>

この id="example" を持つ要素は ページ内に1つだけ 存在することが推奨されています。

classとは？

class（クラス） は、同じスタイルや動作を適用したい 複数の要素 に対して使うことができる属性です。

例：classを持つHTML要素

<div class="item">クラスの例1</div>
<div class="item">クラスの例2</div>
<div class="item">クラスの例3</div>

このように class="item" を持つ要素は 複数存在 することができます。

JavaScriptでidを取得する方法

JavaScriptでは、idを使って要素を取得する方法として getElementById() を使用します。

getElementById() の基本

const element = document.getElementById("example");
console.log(element); // id="example" の要素が取得される

サンプルコード：取得したidの要素を変更する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>idの取得</title>
</head>
<body>
    <div id="example">変更前のテキスト</div>
    <button onclick="changeText()">変更する</button>
    
    <script>
        function changeText() {
            const element = document.getElementById("example");
            element.textContent = "変更後のテキスト";
        }
    </script>
</body>
</html>

説明

  1. document.getElementById("example") で id=”example” の要素を取得。
  2. element.textContent = "変更後のテキスト"; でテキストを変更。
  3. ボタンをクリックすると、表示が変更される。

JavaScriptでclassを取得する方法

複数の要素を取得したい場合、getElementsByClassName() を使用します。

getElementsByClassName() の基本

const elements = document.getElementsByClassName("item");
console.log(elements); // クラス「item」を持つすべての要素が取得される

サンプルコード：取得したclassの要素を変更する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>classの取得</title>
</head>
<body>
    <div class="item">アイテム1</div>
    <div class="item">アイテム2</div>
    <div class="item">アイテム3</div>
    <button onclick="changeText()">すべて変更</button>
    
    <script>
        function changeText() {
            const elements = document.getElementsByClassName("item");
            for (let i = 0; i < elements.length; i++) {
                elements[i].textContent = "変更されたアイテム";
            }
        }
    </script>
</body>
</html>

説明

  1. document.getElementsByClassName("item") でクラス「item」を持つ全ての要素を取得。
  2. for 文を使い、すべての要素の textContent を変更。
  3. ボタンをクリックすると、すべての item 要素が変更される。

querySelectorとquerySelectorAllを使う方法

より柔軟な要素の取得方法として、querySelector() と querySelectorAll() があります。

querySelector()（最初の要素を取得）

const element = document.querySelector(".item");
console.log(element); // 最初の class="item" の要素が取得される

querySelectorAll()（すべての要素を取得）

const elements = document.querySelectorAll(".item");
console.log(elements); // すべての class="item" の要素が取得される

まとめ

今回は、JavaScriptで id や class を取得する基本的な方法を解説しました。

  • getElementById() → idを持つ要素を取得
  • getElementsByClassName() → 特定のクラスを持つすべての要素を取得
  • querySelector() → CSSセレクタを使って最初の要素を取得
  • querySelectorAll() → CSSセレクタを使ってすべての要素を取得

JavaScriptでの要素取得は、Webページを動的に操作するうえで基本となるスキルです。初心者の方も、ぜひ実際にコードを書いて試してみてください！