JavaScriptでID取得！初心者向け3ステップ解説と10の使い方例

はじめに
●JavaScriptでIDを取得する方法
●JavaScriptでIDを取得する使い方の例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでIDを取得する方法や使い方を習得できるようになります。

初心者の方でもわかりやすく、具体的なサンプルコードを交えて解説していきます。

IDを取得することで、様々な処理や操作が可能になり、ウェブページをより魅力的にカスタマイズできます。

この記事では、JavaScriptでIDを取得する方法を3ステップで解説し、10個の使い方の例を紹介します。

●JavaScriptでIDを取得する方法

まずは、JavaScriptでIDを取得する方法をステップごとに見ていきましょう。

○ステップ1：HTML要素の準備

HTML要素にIDを設定します。

例として、段落要素にID「sample」を設定したコードです。

<p id="sample">これはサンプルテキストです。</p>

○ステップ2：JavaScriptでIDを取得する

JavaScriptのgetElementById()メソッドを使って、IDで指定した要素を取得します。

下記のコードでは、ID「sample」の要素を取得しています。

let sampleElement = document.getElementById('sample');

○ステップ3：実行

取得した要素を使って、実際に操作や処理を行います。具体的な使い方は次の節で紹介します。

●JavaScriptでIDを取得する使い方の例

ここでは、JavaScriptでIDを取得した後にできる操作や処理の例を10個紹介します。

それぞれのサンプルコードには、詳細な説明を加えています。

○サンプルコード1：要素の内容を変更する

このコードでは、innerHTMLプロパティを使って、要素の内容を変更しています。

この例では、「sample」IDの要素のテキストを「変更されました！」に変更しています。

let sampleElement = document.getElementById('sample');
sampleElement.innerHTML = '変更されました！';

○サンプルコード2：クリックイベントを追加する

このコードでは、addEventListener()メソッドを使って、要素にクリックイベントを追加しています。

この例では、ID「button」のボタン要素がクリックされたときにアラートを表示します。

<button id="button">クリックしてください</button>

let buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function () {
  alert('ボタンがクリックされました！');
});

○サンプルコード3：要素のスタイルを変更する

このコードでは、styleプロパティを使って要素のスタイルを変更しています。

この例では、ID「sample」の要素のフォントサイズを20pxに変更しています。

let sampleElement = document.getElementById('sample');
sampleElement.style.fontSize = '20px';

○サンプルコード4：フォーム入力値の取得

このコードでは、valueプロパティを使ってフォーム入力値を取得しています。

この例では、ID「input」のテキストボックスの入力値を取得し、アラートで表示しています。

<input type="text" id="input">
<button onclick="showInputValue()">表示</button>

function showInputValue() {
  let inputElement = document.getElementById('input');
  alert(inputElement.value);
}

○サンプルコード5：要素を非表示にする

このコードでは、styleプロパティを使って要素を非表示にしています。

この例では、ID「sample」の要素を非表示にしています。

let sampleElement = document.getElementById('sample');
sampleElement.style.display = 'none';

○サンプルコード6：IDを持つ要素を取得して繰り返し処理

このコードでは、複数のIDを持つ要素を取得し、繰り返し処理を行っています。

この例では、ID「box1」「box2」「box3」の要素の背景色を赤に変更しています。

<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>

const ids = ['box1', 'box2', 'box3'];

ids.forEach(id => {
  let boxElement = document.getElementById(id);
  boxElement.style.backgroundColor = 'red';
});

○サンプルコード7：条件による要素の表示・非表示

このコードでは、チェックボックスの状態に応じて要素の表示・非表示を切り替えています。

この例では、ID「checkbox」のチェックボックスがチェックされている場合にID「sample」の要素を表示し、チェックされていない場合に非表示にしています。

<input type="checkbox" id="checkbox" onclick="toggleVisibility()">
<p id="sample">サンプルテキスト</p>

function toggleVisibility() {
  let checkbox = document.getElementById('checkbox');
  let sampleElement = document.getElementById('sample');
  sampleElement.style.display = checkbox.checked ? 'block' : 'none';
}

○サンプルコード8：要素の追加・削除

このコードでは、要素を追加・削除する方法を紹介しています。

この例では、ボタンをクリックすることでリスト要素を追加・削除できるようにしています。

<button onclick="addItem()">追加</button>
<button onclick="removeItem()">削除</button>
<ul id="list"></ul>

function addItem() {
  let listElement = document.getElementById('list');
  let newItem = document.createElement('li');
  newItem.textContent = '新しいアイテム';
  listElement.appendChild(newItem);
}

function removeItem() {
  let listElement = document.getElementById('list');
  if (listElement.lastChild) {
    listElement.removeChild(listElement.lastChild);
  }
}

○サンプルコード9：クラス名を切り替える

このコードでは、classListプロパティを使ってクラス名を切り替える方法を紹介しています。

この例では、ボタンをクリックすることでID「sample」の要素のクラス名を「highlight」と切り替えることができます。

<button onclick="toggleHighlight()">ハイライト切り替え</button>
<p id="sample">サンプルテキスト</p>

function toggleHighlight() {
  let sampleElement = document.getElementById('sample');
  sampleElement.classList.toggle('highlight');
}

○サンプルコード10：Ajaxでデータ取得

このコードでは、Ajaxを使って外部からデータを取得する方法を紹介しています。

この例では、JSON形式のデータを取得し、ID「result」の要素に表示しています。

<button onclick="fetchData()">データ取得</button>
<div id="result"></div>

async function fetchData() {
  let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  let data = await response.json();
  let resultElement = document.getElementById('result');
  resultElement.textContent = JSON.stringify(data);
}