読み込み中...

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

初心者向けJavaScript DOM操作解説 JS
2023.05.03
この記事は約8分で読めます。

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

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

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

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

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

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

はじめに

この記事を読めば、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操作では、次のような注意点があります。

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

●カスタマイズ方法

JavaScript DOM操作は非常に柔軟で、様々なカスタマイズが可能です。

例えば、アニメーション効果を追加したり、条件に応じて操作を実行するようにすることができます。

また、イベントリスナーを使って、ユーザー操作に応じて動的に変化するコンテンツを実現することもできます。

まとめ

この記事では、JavaScript DOM操作の基本から応用までをサンプルコードを用いて解説しました。

これらの知識を活用することで、Webページをよりインタラクティブにし、ユーザー体験を向上させることができます。

最後までお読みいただき、ありがとうございました。