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

はじめに
●JavaScript getElementByIdとは
- ○getElementByIdの基本
●getElementByIdの使い方
●getElementByIdの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、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>