初心者必見！JavaScript DOM操作の基本と応用10選

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

はじめに

この記事を読めば、JavaScript DOM操作の基本から応用までを理解し、実践できるようになります。

初心者の方でも分かりやすいように、サンプルコード付きで解説していきますので、ぜひ最後までお読みください。

●JavaScript DOMとは？

JavaScript DOM（Document Object Model）とは、Webページの構造をプログラムから操作できるようにする仕組みです。

これにより、JavaScriptを使ってHTML要素の追加、削除、属性やスタイルの変更などが可能になります。

○DOMの基本

DOMは、Webページをツリー構造（親子関係）で表現します。

ツリーの各要素は「ノード」と呼ばれ、これらのノードを操作することで、Webページの内容を動的に変更できます。

●JavaScript DOM操作の基本方法

ここでは、JavaScript DOM操作の基本的な方法を5つのサンプルコードで紹介します。

○サンプルコード1：要素の取得

このコードでは、getElementByIdを使ってIDで要素を取得し、innerHTMLでその要素の内容を表示しています。

document.getElementById("sample").innerHTML = "こんにちは、世界！";

○サンプルコード2：要素の追加

このコードでは、createElementで新しい要素を作成し、appendChildでそれを追加しています。

const newElement = document.createElement("p");
newElement.innerHTML = "新しい要素です";
document.body.appendChild(newElement);

○サンプルコード3：要素の削除

このコードでは、removeChildを使って指定した要素を削除しています。

const targetElement = document.getElementById("sample");
targetElement.parentElement.removeChild(targetElement);

○サンプルコード4：要素の属性操作

このコードでは、getAttributeとsetAttributeを使って、要素の属性を取得・設定しています。

const targetElement = document.getElementById("sample");
const attributeValue = targetElement.getAttribute("data-example");
targetElement.setAttribute("data-example", "新しい値");

○サンプルコード5：要素のスタイル操作

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

const targetElement = document.getElementById("sample");
targetElement.style.color = "red";
targetElement.style.fontSize = "24px";

●JavaScript DOM操作の応用例

ここでは、JavaScript DOM操作の応用例を5つのサンプルコードで紹介します。

○サンプルコード6：クリックイベントで要素の表示・非表示切り替え

このコードでは、クリックイベントを利用して、要素の表示・非表示を切り替える方法を紹介しています。

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

document.getElementById("toggleButton").addEventListener("click", function() {
  const targetElement = document.getElementById("target");
  if (targetElement.style.display === "none") {
    targetElement.style.display = "block";
  } else {
    targetElement.style.display = "none";
  }
});

○サンプルコード7：ドラッグアンドドロップ機能

このコードでは、ドラッグアンドドロップ機能を実装する方法を紹介しています。

この例では、マウスで要素をドラッグし、別の場所にドロップできるようにしています。

const draggableElement = document.getElementById("draggable");
draggableElement.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
});

const dropZone = document.getElementById("dropzone");
dropZone.addEventListener("dragover", function(event) {
  event.preventDefault();
});
dropZone.addEventListener("drop", function(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  const draggedElement = document.getElementById(data);
  this.appendChild(draggedElement);
});

○サンプルコード8：フォーム入力値の取得とバリデーション

このコードでは、フォームの入力値を取得し、バリデーションを行う方法を紹介しています。

この例では、フォームの送信ボタンをクリックした際に、入力内容の正しさをチェックしています。

document.getElementById("submit").addEventListener("click", function(event) {
  event.preventDefault();

  const emailInput = document.getElementById("email");
  const email = emailInput.value;
  
  if (email.includes("@")) {
    console.log("正しいメールアドレスです");
  } else {
    console.log("メールアドレスが正しくありません");
  }
});

○サンプルコード9：タブ切り替え機能

このコードでは、タブを切り替える機能を実装する方法を紹介しています。

この例では、タブをクリックすることで、それぞれのコンテンツが表示されるようになっています。

document.querySelectorAll(".tab-button").forEach(function(button) {
  button.addEventListener("click", function() {
    const targetTabContentId = this.dataset.target;
    
    document.querySelectorAll(".tab-content").forEach(function(content) {
      content.style.display = "none";
    });
    document.getElementById(targetTabContentId).style.display = "block";
  });
});

○サンプルコード10：アコーディオンメニューの実装

このコードでは、アコーディオンメニューを実装する方法を紹介しています。

この例では、タイトルをクリックすると、対応するコンテンツが展開・縮小する動作を実現しています。

document.querySelectorAll(".accordion-title").forEach(function(title) {
  title.addEventListener("click", function() {
    const content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
});

●注意点と対処法

JavaScript DOM操作では、次のような注意点があります。

要素がまだ読み込まれていない場合、操作できないためエラーが発生することがあります。
これを防ぐため、DOMContentLoadedイベントを利用して、すべての要素が読み込まれた後に操作を行うようにしましょう。
複数の要素に対して同じ操作を行う場合は、querySelectorAllを使って複数の要素を取得し、forEachで繰り返し処理を行います。
ただし、パフォーマンスが重要な場合は、forループを使用することを検討してください。