JavaScriptを使った動的なデータ操作とDOMの操作方法

keigo_fujiwara

2025年1月9日 23:39

DOMとは？

DOM（Document Object Model）は、Webページの構造をプログラムで操作できるようにしたインターフェースです。JavaScriptを使うことで、ページの内容やスタイルを動的に変更することができます。

DOMの基本的な役割

HTML構造を操作する： 要素の取得、変更、削除
インタラクションを追加する： イベントリスナーを使って動きを追加
データを動的に反映する： 入力フォームやAPIから取得したデータを表示

1. JavaScriptを使ったDOM操作

1.1 要素の取得

DOM要素を取得するためには、以下のメソッドを使用します。

// IDで要素を取得
const heading = document.getElementById('main-heading');

// クラス名で要素を取得
const items = document.getElementsByClassName('item');

// セレクタで要素を取得
const button = document.querySelector('.btn');

1.2 要素の変更

取得した要素の内容や属性を変更できます。

// テキストの変更
heading.textContent = '新しい見出し';

// スタイルの変更
heading.style.color = 'blue';

// 属性の変更
button.setAttribute('disabled', true);

1.3 要素の作成と追加

新しい要素を作成してページに追加します。

// 新しいリストアイテムを作成
const newItem = document.createElement('li');
newItem.textContent = '新しいアイテム';

// リストに追加
const list = document.getElementById('my-list');
list.appendChild(newItem);

1.4 要素の削除

不要な要素を削除するには、以下の方法を使います。

// 要素の削除
list.removeChild(list.lastElementChild);

2. 実践例：動的なリストの作成

以下のコードは、ボタンをクリックして新しいリストアイテムを追加する例です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <title>動的リストの作成</title>
</head>
<body>
  <ul id="dynamic-list">
    <li>アイテム1</li>
    <li>アイテム2</li>
  </ul>
  <button id="add-item">アイテムを追加</button>

  <script src="app.js"></script>
</body>
</html>

JavaScriptコード（app.js）

const button = document.getElementById('add-item');
const list = document.getElementById('dynamic-list');

button.addEventListener('click', () => {
  const newItem = document.createElement('li');
  newItem.textContent = `アイテム${list.children.length + 1}`;
  list.appendChild(newItem);
});

3. 効率的なDOM操作のコツ

必要な要素のみ操作する： DOM操作はコストが高いため、対象を限定する。
ドキュメントフラグメントを使用する： 複数の要素を一度に追加する際に効率的。
イベントのデリゲーションを活用する： 親要素にイベントリスナーを追加して子要素を操作。

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    alert(event.target.textContent);
  }
});

まとめ

JavaScriptのDOM操作を理解することで、Webページを動的にカスタマイズするスキルを習得できます。この記事で紹介した基本操作や実践例を活用して、自分のプロジェクトに取り入れてみてください。

次回は、JavaScriptによる非同期処理とAPIの活用方法を解説します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集