【JavaScript】DOM操作の書き方と使い方の基本

JavaScriptでWebページを動的に操作する「DOM操作」の基本を初心者向けに解説します。IDやクラス名、CSSセレクタを使ってHTML要素を取得する方法から、取得した要素のテキストや見た目を変更したり、新しい要素を追加・削除したりする具体的な使い方までをサンプルコード付きで学びます。

作成日: 2025年12月21日更新日: 2025年12月21日

開発環境

OS: Windows10
Editor: Visual Studio Code
JavaScript: ES6以降

JavaScriptのDOM基本操作

DOMとは、Document Object Model（ドキュメント・オブジェクト・モデル）の略称です。これは、HTMLドキュメントをJavaScriptのようなプログラミング言語で扱えるようにするための取り決めのことです。 Webページを構成している見出し、段落、ボタンといった一つ一つのHTML要素を、プログラムが操作できる「オブジェクト」という形式で表現した構造になっています。

JavaScriptでWebページの要素に何らかの操作（例えばテキストの変更、色の変更、要素の追加など）を行いたい場合、最初に「どの要素を操作するのか」を特定し、プログラムで扱えるように「取得」しなければなりません。 Webページには多数のHTML要素が存在するため、JavaScriptに対して操作対象を明確に指示する必要があるのです。

したがって、DOM操作における最初の、そして最も重要なステップは、目的のHTML要素を取得することです。この取得というプロセスを経て初めて、その要素に対してテキストを変更したり、スタイルを適用したり、削除したりといった具体的な操作を実行できるようになります。

この記事では、JavaScriptを使ってWebページの見た目や内容を動的に変更する方法、いわゆる「DOM操作」の基本を学びます。DOM（Document Object Model）とは、ブラウザがHTML文書を解釈し、JavaScriptから操作できるようにツリー構造に変換したものです。この仕組みを利用することで、Webページをインタラクティブに動かすことができます。

まずは、操作の対象となるHTMLファイルを見てみましょう。

サンプルコード

javascript/chapter19/index.html

このHTMLファイルには、見出し（h1）、リスト（ul）、段落（p）など、JavaScriptで操作するための基本的な要素が配置されています。idやclassは、特定の要素をJavaScriptから見つけ出すための「目印」として機能します。一番下の<script>タグで、これから説明する2つのJavaScriptファイルを読み込んでいます。


1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7    <style>
8      .highlight {
9        background-color: yellow;
10      }
11      .active {
12        font-weight: bold;
13      }
14    </style>
15  </head>
16
17  <body>
18    <!-- IDで取得 -->
19    <h1 id="title">JavaScriptチュートリアル</h1>
20
21    <!-- querySelector用 -->
22    <h2 class="subtitle">サブタイトル</h2>
23
24    <!-- クラスで取得 -->
25    <ul id="list">
26      <li class="item">A</li>
27      <li class="item">B</li>
28      <li class="item">C</li>
29    </ul>
30
31    <!-- タグ名で取得 -->
32    <p>段落1</p>
33    <p>段落2</p>
34
35    <!-- querySelectorAll用 -->
36    <button>ボタン1</button>
37    <button>ボタン2</button>
38
39    <!-- 属性操作用 -->
40    <a href="https://example.org" target="_blank">リンク</a>
41
42    <!-- フォーム操作用 -->
43    <form>
44      <label for="name-input">名前：</label>
45      <input type="text" id="name-input" />
46    </form>
47
48    <script src="./script01.js" defer></script>
49    <script src="./script02.js" defer></script>
50  </body>
51</html>
52

javascript/chapter19/script01.js

このスクリプトでは、HTML文書の中から特定の要素を見つけ出し、取得するための様々な方法を解説します。要素を操作するためには、まず対象となる要素を正確に特定することが第一歩となります。

getElementById: IDを元に、単一の要素を取得します。最も高速で一般的な方法です。
getElementsByClassName: 同じクラス名を持つ要素をすべて取得します。結果は「HTMLCollection」という配列に似た形で返ってきます。
getElementsByTagName: 指定したタグ名の要素をすべて取得します。こちらも結果は「HTMLCollection」です。
querySelector: CSSセレクタを使って、条件に一致する最初の1つの要素を取得します。ID、クラス、タグ名など柔軟な指定が可能です。
querySelectorAll: CSSセレクタを使って、条件に一致するすべての要素を取得します。結果は「NodeList」という形で返ってきて、forEachメソッドで繰り返し処理ができます。


1// --------------------------------------------
2// HTMLの要素を取得する方法
3// --------------------------------------------
4
5// 1. IDで取得（もっともよく使う）
6const title = document.getElementById("title");
7// <h1 id="title">見出し</h1> などに対応
8
9// 2. クラス名で取得（複数あってもOK）
10const items = document.getElementsByClassName("item");
11// HTMLCollection（配列っぽい）で返ってくる
12// 例: <li class="item">A</li>, <li class="item">B</li>
13// forEachは使えないので注意
14
15// 3. タグ名で取得
16const paragraphs = document.getElementsByTagName("p");
17// <p>タグをすべて取得
18// forEachは使えないので注意
19
20// 4. CSSセレクタで1つだけ取得（querySelector）
21const subtitle = document.querySelector(".subtitle");
22// 最初に見つかった要素だけ取得（ID, class, タグなど自由に指定OK）
23
24// 5. CSSセレクタですべて取得（querySelectorAll）
25const allButtons = document.querySelectorAll("button");
26// NodeList（forEachで回せる）で返ってくる

javascript/chapter19/script02.js

このスクリプトでは、script01.jsの方法で取得したHTML要素に対して、具体的にどのような操作ができるのかを解説します。テキストの書き換えから、新しい要素の追加・削除まで、Webページを動的に作り変えるための基本的なテクニックです。

テキストの変更: textContentは安全にテキストのみを、innerHTMLはHTMLタグを含めて内容を変更します。
スタイルの変更: styleプロパティを使い、CSSを直接書き換えることができます。
クラスの操作: classListを使い、CSSクラスの追加・削除・切り替えを行います。スタイル管理がしやすくなります。
属性の操作: setAttributeやgetAttributeで、hrefなどのHTML属性を操作します。
イベントの追加: addEventListenerで、クリックなどのユーザー操作をきっかけに処理を実行させます。
要素の追加・削除: createElementで新しい要素を作り、appendで追加、removeで削除します。
フォーム要素の値の操作: valueプロパティで、入力フォームの値を取得・設定します。


1// --------------------------------------------
2// JavaScriptでDOM要素を操作する基本
3// --------------------------------------------
4
5// 1. テキストの変更
6const heading = document.getElementById("title");
7heading.textContent = "新しいタイトルに変更！";
8// → テキストだけを変更（HTMLタグはそのまま文字として扱う）
9
10heading.innerHTML = "<span style='color:red;'>赤い文字</span>";
11// → HTMLとして扱って変更（タグごと解釈される）
12// ※ innerHTMLはXSS（クロスサイトスクリプティング）の原因になることがあるので注意！
13
14// 2. スタイルの変更
15heading.style.color = "blue";
16heading.style.fontSize = "24px";
17// → 直接インラインスタイルを指定して見た目を変える
18
19// 3. クラスの操作
20heading.classList.add("highlight");
21// → クラスを追加
22
23heading.classList.remove("highlight");
24// → クラスを削除
25
26heading.classList.toggle("active");
27// → クラスがなければ追加、あれば削除（ON/OFF切替に便利）
28
29// 4. 属性の操作
30const link = document.querySelector("a");
31
32link.setAttribute("href", "https://example.com");
33// → 属性を追加または上書き
34
35link.getAttribute("href");
36// → 現在のhrefの値を取得
37
38link.removeAttribute("target");
39// → 属性を削除
40
41// 5. イベントの追加（イベントリスナー）
42heading.addEventListener("click", function () {
43  alert("タイトルがクリックされました！");
44});
45
46// 6. 要素の追加
47const list = document.getElementById("list");
48
49const newItem = document.createElement("li"); // 要素を新しく作成
50newItem.textContent = "新しい項目";
51// list.appendChild(newItem); // 最後に追加
52list.append(newItem); // appendChildより柔軟で、文字列も追加できる
53
54// 7. 要素の削除
55list.removeChild(list.firstElementChild); // 最初の子要素を削除
56list.firstElementChild.remove();  // より簡単な方法（新しめの書き方）
57
58// 8. フォーム要素の値を操作
59const input = document.getElementById("name-input");
60
61input.value = "初期値";
62// → テキストボックスに値をセット
63
64const currentValue = input.value;
65// → 入力された値を取得

おわりに

今回は、JavaScriptでWebページを動的に操作するDOM操作の基本を解説しました。まず、getElementByIdやquerySelectorといったメソッドを使い、操作の対象となるHTML要素を正確に取得することが全ての基本となります。次に、取得した要素に対してtextContentでテキストを変更したり、classListでスタイルを適用したり、addEventListenerでイベントを追加する方法を学びました。これらの基本操作を組み合わせることで、ユーザーの動きに反応するインタラクティブなWebページを作成できるようになります。