JavaScript document初心者向け10選解説！

はじめに

この記事を読めば、JavaScript documentを使った基本操作や応用例を理解し、実践できるようになります。

JavaScript初心者の方でも分かりやすいように、サンプルコードと詳細な説明を用意しています。

それでは、一緒にJavaScript documentを学んでいきましょう！

●JavaScript documentとは

JavaScript documentは、Webページ上のHTML要素を操作するためのオブジェクトです。

このオブジェクトを使って、要素の取得、追加、削除、属性の操作など、さまざまな処理が行えます。

○基本的な概念

JavaScript documentオブジェクトは、HTML文書の構造や内容を表現します。

これを利用することで、JavaScriptからHTML要素にアクセスし、操作が可能になります。

●JavaScript documentの使い方

ここでは、JavaScript documentの基本的な使い方を、サンプルコードと共に紹介します。

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

このコードでは、document.getElementByIdメソッドを使って、指定したid属性を持つ要素を取得しています。

この例では、id属性が”sample”の要素を取得し、コンソールに表示しています。

// id属性が"sample"の要素を取得
const element = document.getElementById("sample");
console.log(element);

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

このコードでは、document.createElementメソッドとappendChildメソッドを使って、新しい要素を作成し、既存の要素に追加しています。

この例では、新しいp要素を作成し、テキスト内容を設定して、body要素に追加しています。

// p要素を作成
const newElement = document.createElement("p");
newElement.textContent = "新しい要素です。";

// body要素に追加
document.body.appendChild(newElement);

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

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

この例では、id属性が”sample”の要素を削除しています。

// 削除対象の要素を取得
const targetElement = document.getElementById("sample");

// 親要素から削除
targetElement.parentElement.removeChild(targetElement);

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

このコードでは、要素の属性を操作するために、setAttributeメソッドとgetAttributeメソッドを使用しています。

この例では、id属性が”sample”の要素にclass属性を設定し、その後class属性の値を取得して表示しています。

// 要素を取得
const element = document.getElementById("sample");

// class属性を設定
element.setAttribute("class", "sampleClass");

// class属性を取得
const className = element.getAttribute("class");
console.log(className);

●JavaScript documentの応用例

JavaScript documentを利用して、さまざまなWebページ上の機能を実現できます。

ここでは、いくつかの応用例をサンプルコードとともに紹介します。

○サンプルコード5：アコーディオンメニュー

このコードでは、クリックイベントを使ってアコーディオンメニューを実装しています。

この例では、メニューのヘッダーをクリックすると、対応するコンテンツが表示・非表示が切り替わる機能を提供しています。

// ヘッダー要素を取得
const headers = document.querySelectorAll(".header");

// クリックイベントを設定
headers.forEach((header) => {
  header.addEventListener("click", () => {
    // 対応するコンテンツ要素を取得
    const content = header.nextElementSibling;

    // コンテンツの表示・非表示を切り替え
    content.style.display = content.style.display === "none" ? "block" : "none";
  });
});

○サンプルコード6：モーダルウィンドウ

このコードでは、モーダルウィンドウを表示・非表示にする機能を実装しています。

この例では、ボタンをクリックするとモーダルウィンドウが表示され、閉じるボタンをクリックすると非表示になります。

// ボタンとモーダル要素を取得
const openButton = document.getElementById("openButton");
const modal = document.getElementById("modal");
const closeButton = document.getElementById("closeButton");

// モーダルを表示するイベントを設定
openButton.addEventListener("click", () => {
  modal.style.display = "block";
});

// モーダルを非表示にするイベントを設定
closeButton.addEventListener("click", () => {
  modal.style.display = "none";
});

○サンプルコード7：スライドショー

このコードでは、setInterval関数を使って一定時間ごとに画像を切り替えるスライドショーを実装しています。

この例では、3秒ごとに画像が切り替わり、最後の画像まで到達したら最初に戻る機能を提供しています。

const images = document.querySelectorAll(".slide");
let currentIndex = 0;

function showSlide(index) {
  // すべての画像を非表示にする
  images.forEach((image) => {
    image.style.display = "none";
  });

  // 指定されたインデックスの画像を表示する
  images[index].style.display = "block";
}

// スライドショーを開始
showSlide(currentIndex);
setInterval(() => {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  showSlide(currentIndex);
}, 3000);

○サンプルコード8：ドラッグ&ドロップ

このコードでは、マウスイベントを利用してドラッグ&ドロップ機能を実装しています。

この例では、ドラッグ可能な要素をマウスでクリックし、ドロップエリアにドロップする操作を可能にしています。

const draggable = document.getElementById("draggable");
const dropArea = document.getElementById("dropArea");

// ドラッグ開始時のイベント
draggable.addEventListener("mousedown", (event) => {
  event.preventDefault();

  // ドラッグ中のイベント
  document.addEventListener("mousemove", onMouseMove);

  // ドラッグ終了時のイベント
  document.addEventListener("mouseup", onMouseUp);
});

function onMouseMove(event) {
  draggable.style.left = `${event.clientX - draggable.offsetWidth / 2}px`;
  draggable.style.top = `${event.clientY - draggable.offsetHeight / 2}px`;
}

function onMouseUp(event) {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);

  // ドロップ判定
  const dropRect = dropArea.getBoundingClientRect();
  const draggableRect = draggable.getBoundingClientRect();

  if (
    draggableRect.left >= dropRect.left &&
    draggableRect.right <= dropRect.right &&
    draggableRect.top >= dropRect.top &&
    draggableRect.bottom <= dropRect.bottom
  ) {
    // ドロップ成功時の処理
    alert("ドロップ成功！");
  }
}

○サンプルコード9：リアルタイム検索機能

このコードでは、入力イベントを使ってリアルタイム検索機能を実現しています。

この例では、テキストボックスに入力された文字に基づいて、リストから該当する項目を絞り込んで表示する機能を提供しています。

const input = document.getElementById("searchInput");
const listItems = document.querySelectorAll(".list-item");

// 入力イベントの設定
input.addEventListener("input", (event) => {
  const searchText = event.target.value.toLowerCase();

  listItems.forEach((item) => {
    const itemText = item.textContent.toLowerCase();

    if (itemText.includes(searchText)) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  });
});

○サンプルコード10：簡単なゲームの作成

このコードでは、キーボードイベントを利用して簡単なゲームを作成しています。

この例では、矢印キーでプレイヤー（要素）を動かし、画面内を移動する機能を提供しています。

const player = document.getElementById("player");
let playerX = 0;
let playerY = 0;

// キーボードイベントの設定
document.addEventListener("keydown", (event) => {
  const key = event.key;

  switch (key) {
    case "ArrowUp":
      playerY -= 10;
      break;
    case "ArrowDown":
      playerY += 10;
      break;
    case "ArrowLeft":
      playerX -= 10;
      break;
    case "ArrowRight":
      playerX += 10;
      break;
  }

  player.style.transform = `translate(${playerX}px, ${playerY}px)`;
});

●注意点と対処法

JavaScript documentを使用する際には、次のような注意点がありますので、注意して下さい。

ページが完全に読み込まれるまで要素にアクセスできないため、DOMContentLoadedイベントを使ってページの読み込みが完了したタイミングで処理を開始することが推奨されます。
複数の要素を操作する際には、querySelectorAllで取得したNodeListをforEachなどのループで処理することができますが、NodeListは動的でないため、要素の追加・削除が反映されません。
そのため、要素の追加・削除を行う場合は注意が必要です。