読み込み中...

初心者必見!JavaScript getElementByIdの使い方を10選で徹底解説

初心者向けJavaScript getElementByIdの使い方を徹底解説 JS
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのgetElementByIdを使いこなせるようになります。

初心者向けに、分かりやすく詳しく徹底解説しますので、ぜひ最後までお付き合いください。

●JavaScript getElementByIdとは

getElementByIdは、JavaScriptでHTML要素を取得するためのメソッドです。

指定したID属性の値を持つHTML要素を返します。

これを使うことで、HTML内の要素を操作したり、スタイルを変更することができます。

○getElementByIdの基本

getElementByIdは、documentオブジェクトのメソッドとして使用します。

var element = document.getElementById("elementId");

このコードでは、”elementId”というIDを持つ要素を取得し、変数elementに格納しています。

●getElementByIdの使い方

さまざまな使い方がありますので、いくつか例を紹介します。

○サンプルコード1:要素のテキストを変更する

このコードでは、getElementByIdを使って要素のテキストを変更する方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素のテキストが変わります。

<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
  var element = document.getElementById("demo");
  element.innerHTML = "こんにちは、世界!";
}
</script>
</head>
<body>

<p id="demo">クリック前のテキスト</p>

<button onclick="changeText()">テキストを変更する</button>

</body>
</html>

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

このコードでは、getElementByIdを使って要素のスタイルを変更する方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素の背景色が変わります。

<!DOCTYPE html>
<html>
<head>
<script>
function changeBackground() {
  var element = document.getElementById("demo");
  element.style.backgroundColor = "red";
}
</script>
</head>
<body>

<div id="demo" style="width: 200px; height: 200px;">クリックで背景色が変わる</div>

<button onclick="changeBackground()">背景色を変更する</button>

</body>
</html>

○サンプルコード3:イベントリスナーを追加する

このコードでは、getElementByIdを使ってイベントリスナーを追加する方法を紹介しています。

この例では、ボタンがクリックされると、アラートが表示されるようにしています。

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
  var btn = document.getElementById("myButton");
  btn.addEventListener("click", function() {
    alert("ボタンがクリックされました");
  });
};
</script>
</head>
<body>

<button id="myButton">クリックする</button>

</body>
</html>

○サンプルコード4:フォームの値を取得する

このコードでは、getElementByIdを使ってフォームの値を取得する方法を紹介しています。

この例では、ボタンをクリックすると、入力されたテキストをアラートで表示します。

<!DOCTYPE html>
<html>
<head>
<script>
function showValue() {
  var input = document.getElementById("textInput");
  alert("入力された値: " + input.value);
}
</script>
</head>
<body>

<input type="text" id="textInput">
<button onclick="showValue()">値を表示する</button>

</body>
</html>

●getElementByIdの応用例

○サンプルコード5:要素の表示・非表示を切り替える

このコードでは、getElementByIdを使って要素の表示・非表示を切り替える方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素が表示・非表示に切り替わります。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleVisibility() {
  var element = document.getElementById("target");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}
</script>
</head>
<body>

<div id="target">表示・非表示を切り替える要素</div>
<button onclick="toggleVisibility()">切り替える</button>

</body>
</html>

○サンプルコード6:要素をクローンする

このコードでは、getElementByIdを使って要素をクローンする方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素が複製され、その下に追加されます。

<!DOCTYPE html>
<html>
<head>
<script>
function cloneElement() {
  var element = document.getElementById("target");
  var clonedElement = element.cloneNode(true);
  element.parentNode.insertBefore(clonedElement, element.nextSibling);
}
</script>
</head>
<body>

<div id="target">クローンされる要素</div>
<button onclick="cloneElement()">要素をクローンする</button>

</body>
</html>

○サンプルコード7:要素を動的に追加する

このコードでは、getElementByIdを使って新しい要素を動的に追加する方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素の下に新しいリスト項目が追加されます。

<!DOCTYPE html>
<html>
<head>
<script>
function addListItem() {
  var ulElement = document.getElementById("myList");
  var newListItem = document.createElement("li");
  newListItem.textContent = "新しいリスト項目";
  ulElement.appendChild(newListItem);
}
</script>
</head>
<body>

<ul id="myList">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
</ul>
<button onclick="addListItem()">リスト項目を追加する</button>

</body>
</html>

○サンプルコード8:要素の属性を変更する

このコードでは、getElementByIdを使って要素の属性を変更する方法を紹介しています。

この例では、ボタンをクリックすると、画像のsrc属性が切り替わります。

<!DOCTYPE html>
<html>
<head>
<script>
function changeImage() {
  var imgElement = document.getElementById("myImage");
  imgElement.setAttribute("src", "new_image.jpg");
}
</script>
</head>
<body>

<img id="myImage" src="old_image.jpg">
<button onclick="changeImage()">画像を変更する</button>

</body>
</html>

○サンプルコード9:要素のクラスを切り替える

このコードでは、getElementByIdを使って要素のクラスを切り替える方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素のクラスが切り替わります。

<!DOCTYPE html>
<html>
<head>
<style>
  .red { background-color: red; }
  .blue { background-color: blue; }
</style>
<script>
function toggleClass() {
  var element = document.getElementById("target");
  element.classList.toggle("red");
  element.classList.toggle("blue");
}
</script>
</head>
<body>

<div id="target" class="red" style="width: 100px; height: 100px;"></div>
<button onclick="toggleClass()">クラスを切り替える</button>

</body>
</html>

○サンプルコード10:複数の要素を一括操作する

このコードでは、複数の要素を一括操作する方法を紹介しています。

この例では、ボタンをクリックすると、指定した要素のテキストが一括で変更されます。

<!DOCTYPE html>
<html>
<head>
<script>
function changeTextAll() {
  var elements = document.getElementsByClassName("changeText");
  for (var i = 0; i < elements.length; i++) {
    elements[i].textContent = "テキストが変更されました";
  }
}
</script>
</head>
<body>

<p class="changeText">テキスト1</p>
<p class="changeText">テキスト2</p>
<p class="changeText">テキスト3</p>
<button onclick="changeTextAll()">全てのテキストを変更する</button>

</body>
</html>

●注意点と対処法

getElementByIdを使用する際には、下記の注意点を把握しておくことが重要です。

  1. ID属性は一意である必要があります。
    複数の要素に同じIDを設定してしまうと、予期しない動作が発生する可能性があります。
  2. 要素がページ上に存在しない場合、getElementByIdはnullを返します。
    そのため、要素が存在することを確認してから操作を行うようにしましょう。

●カスタマイズ方法

getElementByIdを用いて、さまざまなカスタマイズが可能です。

例えば、下記のようなカスタマイズが考えられます。

  • 要素の背景色やフォントサイズを変更する。
  • 要素内のテキストや画像をランダムに切り替える。
  • ユーザーが入力した情報に基づいて、要素の内容を動的に変更する。

まとめ

この記事では、getElementByIdを使用した要素の操作方法や応用例について説明しました。

JavaScriptを用いて、ページ上の要素にアクセスし、操作することができます。

注意点を理解し、カスタマイズのアイデアを活用して、独自のウェブページを作成してみましょう。