JavaScriptのDOM操作とは？初心者向けにHTMLを書き換える方法を解説

JavaScriptを学び始めると、よく出てくるのがDOM操作です。

DOM操作とは、JavaScriptを使ってHTMLの内容や見た目を変更することです。

たとえば、次のようなことができます。

ボタンを押したら文字を変える
HTMLの要素を追加する
HTMLの要素を削除する
CSSのclassを追加する
入力フォームの内容を取得する
画面にメッセージを表示する

HTMLとCSSだけでもWebページは作れます。

ただし、クリックしたら表示が変わる、入力した内容を画面に出す、といった動きを作るにはJavaScriptのDOM操作が必要です。

この記事では、JavaScript初心者向けに、DOM操作の基本を実際にコードを書きながら解説します。

この記事には広告が含まれます。

DOM操作とは
今回作るもの
作業用フォルダを作る
Visual Studio Codeでフォルダを開く
index.htmlを作る
style.cssを作る
script.jsを作る
画面を確認する
HTML要素を取得する
1. 画面で確認する
textContentで文字を書き換える
1. 画面で確認する
styleで見た目を変える
1. 画面で確認する
classListでclassを追加する
1. 画面で確認する
classList.toggleでclassを切り替える
1. 画面で確認する
入力フォームの値を取得する
1. index.htmlを書き換える
2. style.cssを書き換える
3. script.jsを書き換える
4. 画面で確認する
入力が空のときの処理を追加する
1. 画面で確認する
HTML要素を追加する
1. index.htmlを書き換える
2. style.cssを書き換える
3. script.jsを書き換える
4. 画面で確認する
HTML要素を削除する
1. 画面で確認する
DOM操作でよく使う書き方
JavaScriptが動かないときに確認するところ
DOM操作を学ぶと作れるもの
学習に使う教材について
まとめ

DOM操作とは

DOM操作とは、JavaScriptからHTMLを操作することです。

たとえば、HTMLに次のような文章があるとします。

<p class="message">こんにちは</p>

JavaScriptを使うと、この文章を別の文字に変更できます。

const message = document.querySelector(".message");

message.textContent = "こんばんは";

このように、JavaScriptでHTMLの要素を取得して、文字や見た目を変えることをDOM操作と呼びます。

今回作るもの

今回は、DOM操作の練習として次のようなページを作ります。

ボタンを押したら文字を変える
ボタンを押したら色を変える
入力した文字を画面に表示する
リストに項目を追加する
classを追加して見た目を変える

いきなり大きなアプリを作るのではなく、DOM操作でよく使う基本だけを順番に確認します。

作業用フォルダを作る

まず、練習用のフォルダを作ります。

デスクトップやドキュメントなど、自分が分かりやすい場所にフォルダを作ってください。

フォルダ名は、たとえば次のようにします。

dom-practice

このフォルダの中に、次の3つのファイルを作ります。

dom-practice
├── index.html
├── style.css
└── script.js

それぞれのファイルの役割は次の通りです。

index.html：ページの内容を書くファイル
style.css：見た目を整えるファイル
script.js：JavaScriptを書くファイル

Visual Studio Codeでフォルダを開く

次に、Visual Studio Codeで先ほど作ったフォルダを開きます。

Visual Studio Codeを開く
「ファイル」をクリックする
「フォルダーを開く」をクリックする
dom-practiceフォルダを選ぶ

フォルダを開いたら、左側のファイル一覧から新しいファイルを作っていきます。

index.htmlを作る

まず、index.htmlを作ります。

dom-practiceフォルダの中に、index.htmlという名前のファイルを作ってください。

作成したら、次のコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作の練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>DOM操作の練習</h1>

  <p class="message">ここに文字が表示されます。</p>

  <button class="change-text-button">文字を変える</button>
  <button class="change-color-button">色を変える</button>

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

このHTMLでは、見出し、文章、2つのボタンを用意しています。

最後にある次の1行で、JavaScriptファイルを読み込んでいます。

<script src="script.js"></script>

style.cssを作る

次に、style.cssを作ります。

dom-practiceフォルダの中に、style.cssという名前のファイルを作ってください。

作成したら、次のコードを書きます。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

h1 {
  font-size: 28px;
}

.message {
  font-size: 20px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  margin-right: 8px;
  font-size: 16px;
  cursor: pointer;
}

.active {
  color: #ffffff;
  background-color: #007acc;
  padding: 10px;
}

.activeは、あとでJavaScriptから追加するclassです。

script.jsを作る

次に、script.jsを作ります。

dom-practiceフォルダの中に、script.jsという名前のファイルを作ってください。

まずは、JavaScriptが読み込まれているか確認するために、次のコードを書きます。

console.log("JavaScriptが読み込まれました");

画面を確認する

ここまでできたら、画面を確認します。

まず、3つのファイルを保存してください。

index.htmlを保存する
style.cssを保存する
script.jsを保存する

保存したら、index.htmlをブラウザで開きます。

dom-practiceフォルダを開く
index.htmlをダブルクリックする
Google Chromeでページを開く

画面に次のように表示されればOKです。

DOM操作の練習
ここに文字が表示されます。
文字を変える
色を変える

次に、Google Chromeの開発者ツールを開きます。

Windows：F12キーまたは Ctrl + Shift + I
Mac：command + option + I

開発者ツールを開いたら、Consoleをクリックします。

Consoleに次の文字が表示されていれば、JavaScriptファイルは読み込まれています。

JavaScriptが読み込まれました

HTML要素を取得する

DOM操作では、まずHTMLの要素をJavaScriptで取得します。

今回は、文章とボタンを取得します。

script.jsの中身を、次のコードに書き換えてください。

const message = document.querySelector(".message");
const changeTextButton = document.querySelector(".change-text-button");
const changeColorButton = document.querySelector(".change-color-button");

console.log(message);
console.log(changeTextButton);
console.log(changeColorButton);

document.querySelector()は、HTMLの要素を取得するときに使います。

たとえば、HTMLには次の文章があります。

<p class="message">ここに文字が表示されます。</p>

この要素をJavaScriptで取得するには、次のように書きます。

const message = document.querySelector(".message");

class名を指定するときは、先頭に.をつけます。

HTMLのclass名：message
JavaScriptで指定：.message

画面で確認する

script.jsを書き換えたら、ファイルを保存します。

そのあと、ブラウザを更新してください。

Windows：Ctrl + R
Mac：command + R

開発者ツールのConsoleに、取得したHTML要素が表示されればOKです。

<p class="message">ここに文字が表示されます。</p>
<button class="change-text-button">文字を変える</button>
<button class="change-color-button">色を変える</button>

textContentで文字を書き換える

次に、文章の中身を書き換えます。

文字を書き換えるときは、textContentを使います。

script.jsの中身を、次のコードに書き換えてください。

const message = document.querySelector(".message");
const changeTextButton = document.querySelector(".change-text-button");
const changeColorButton = document.querySelector(".change-color-button");

changeTextButton.addEventListener("click", function () {
  message.textContent = "JavaScriptで文字を書き換えました。";
});

このコードでは、「文字を変える」ボタンをクリックしたときに、文章の中身を変更しています。

文字を書き換えているのは、次の部分です。

message.textContent = "JavaScriptで文字を書き換えました。";

画面で確認する

script.jsを保存します。

ブラウザを更新してから、「文字を変える」ボタンをクリックしてください。

画面の文章が次のように変わればOKです。

JavaScriptで文字を書き換えました。

styleで見た目を変える

次に、JavaScriptからCSSを変更してみます。

script.jsの中身を、次のコードに書き換えてください。

const message = document.querySelector(".message");
const changeTextButton = document.querySelector(".change-text-button");
const changeColorButton = document.querySelector(".change-color-button");

changeTextButton.addEventListener("click", function () {
  message.textContent = "JavaScriptで文字を書き換えました。";
});

changeColorButton.addEventListener("click", function () {
  message.style.color = "red";
});

追加したのは、次の部分です。

changeColorButton.addEventListener("click", function () {
  message.style.color = "red";
});

style.colorを使うと、文字の色をJavaScriptから変更できます。

画面で確認する

script.jsを保存します。

ブラウザを更新してから、「色を変える」ボタンをクリックしてください。

文章の文字色が赤くなればOKです。

classListでclassを追加する

JavaScriptでは、CSSのclassを追加して見た目を変えることもできます。

先ほどstyle.cssに、次のclassを書いていました。

.active {
  color: #ffffff;
  background-color: #007acc;
  padding: 10px;
}

このactiveというclassを、JavaScriptから追加します。

script.jsの中身を、次のコードに書き換えてください。

const message = document.querySelector(".message");
const changeTextButton = document.querySelector(".change-text-button");
const changeColorButton = document.querySelector(".change-color-button");

changeTextButton.addEventListener("click", function () {
  message.textContent = "JavaScriptで文字を書き換えました。";
});

changeColorButton.addEventListener("click", function () {
  message.classList.add("active");
});

classを追加しているのは、次の部分です。

message.classList.add("active");

classList.add()を使うと、HTML要素にclassを追加できます。

画面で確認する

script.jsを保存します。

ブラウザを更新してから、「色を変える」ボタンをクリックしてください。

文章に背景色がつき、文字が白くなればOKです。

classList.toggleでclassを切り替える

classList.add()は、classを追加するだけです。

クリックするたびにclassをつけたり外したりしたい場合は、classList.toggle()を使います。

script.jsの中身を、次のコードに書き換えてください。

const message = document.querySelector(".message");
const changeTextButton = document.querySelector(".change-text-button");
const changeColorButton = document.querySelector(".change-color-button");

changeTextButton.addEventListener("click", function () {
  message.textContent = "JavaScriptで文字を書き換えました。";
});

changeColorButton.addEventListener("click", function () {
  message.classList.toggle("active");
});

変更したのは、次の部分です。

message.classList.toggle("active");

toggleを使うと、classがついていないときは追加し、すでについているときは外します。

画面で確認する

script.jsを保存します。

ブラウザを更新してから、「色を変える」ボタンを何回かクリックしてください。

クリックするたびに、見た目が切り替わればOKです。

入力フォームの値を取得する

次に、入力フォームの値を取得します。

ここからは、先ほどのコードに追記するのではなく、index.htmlとscript.jsの中身を書き換えます。

index.htmlを書き換える

index.htmlの中身を、次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入力フォームのDOM操作</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>入力フォームのDOM操作</h1>

  <input type="text" class="name-input" placeholder="名前を入力してください">
  <button class="show-button">表示する</button>

  <p class="result"></p>

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

style.cssを書き換える

style.cssの中身を、次のコードに書き換えてください。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

input {
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

script.jsを書き換える

script.jsの中身を、次のコードに書き換えてください。

const nameInput = document.querySelector(".name-input");
const showButton = document.querySelector(".show-button");
const result = document.querySelector(".result");

showButton.addEventListener("click", function () {
  result.textContent = nameInput.value + "さん、こんにちは。";
});

入力欄の値は、valueで取得できます。

nameInput.value

このコードでは、入力した名前を使って、画面に文章を表示しています。

画面で確認する

3つのファイルを保存します。

ブラウザを更新して、画面に次の内容が表示されるか確認してください。

入力フォームのDOM操作
名前を入力してください
表示する

入力欄に名前を入力して、「表示する」ボタンをクリックしてください。

たとえば「太郎」と入力した場合、次のように表示されればOKです。

太郎さん、こんにちは。

入力が空のときの処理を追加する

今のコードでは、入力欄が空でもボタンを押せます。

次は、入力欄が空の場合にメッセージを表示するようにします。

script.jsの中身を、次のコードに書き換えてください。

const nameInput = document.querySelector(".name-input");
const showButton = document.querySelector(".show-button");
const result = document.querySelector(".result");

showButton.addEventListener("click", function () {
  if (nameInput.value === "") {
    result.textContent = "名前を入力してください。";
  } else {
    result.textContent = nameInput.value + "さん、こんにちは。";
  }
});

ifを使うと、条件によって処理を分けることができます。

入力欄が空かどうかを確認しているのは、次の部分です。

if (nameInput.value === "") {
  result.textContent = "名前を入力してください。";
}

画面で確認する

script.jsを保存します。

ブラウザを更新してから、入力欄を空のまま「表示する」ボタンをクリックしてください。

次の文章が表示されればOKです。

名前を入力してください。

次に、入力欄に名前を入れて、もう一度「表示する」ボタンをクリックしてください。

入力した名前を使った文章が表示されればOKです。

HTML要素を追加する

DOM操作では、すでにあるHTMLを書き換えるだけでなく、新しいHTML要素を追加することもできます。

ここでは、入力した文字をリストに追加するページを作ります。

ここからは、先ほどのコードに追記するのではなく、3つのファイルの中身をすべて書き換えます。

index.htmlを書き換える

index.htmlの中身を、次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リスト追加のDOM操作</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>リスト追加のDOM操作</h1>

  <input type="text" class="item-input" placeholder="項目を入力してください">
  <button class="add-button">追加する</button>

  <ul class="item-list"></ul>

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

style.cssを書き換える

style.cssの中身を、次のコードに書き換えてください。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

input {
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

.item-list {
  margin-top: 20px;
}

.item-list li {
  margin-bottom: 8px;
}

script.jsを書き換える

script.jsの中身を、次のコードに書き換えてください。

const itemInput = document.querySelector(".item-input");
const addButton = document.querySelector(".add-button");
const itemList = document.querySelector(".item-list");

addButton.addEventListener("click", function () {
  const itemText = itemInput.value;

  if (itemText === "") {
    return;
  }

  const li = document.createElement("li");
  li.textContent = itemText;

  itemList.appendChild(li);

  itemInput.value = "";
});

新しいHTML要素を作っているのは、次の部分です。

const li = document.createElement("li");

document.createElement()を使うと、新しいHTML要素を作れます。

作ったliに文字を入れているのが、次の部分です。

li.textContent = itemText;

リストに追加しているのが、次の部分です。

itemList.appendChild(li);

appendChild()を使うと、指定した要素の中に新しい要素を追加できます。

画面で確認する

3つのファイルを保存します。

ブラウザを更新して、画面に次の内容が表示されるか確認してください。

リスト追加のDOM操作
項目を入力してください
追加する

入力欄に文字を入力して、「追加する」ボタンをクリックしてください。

入力した文字が下にリストとして追加されればOKです。

たとえば、入力欄に「HTML」と入力して追加すると、画面に次のように表示されます。

HTML

続けて「CSS」「JavaScript」と入力すると、リストに項目が増えていきます。

HTML要素を削除する

次に、追加したリストをクリックしたら削除できるようにします。

script.jsの中身を、次のコードに書き換えてください。

const itemInput = document.querySelector(".item-input");
const addButton = document.querySelector(".add-button");
const itemList = document.querySelector(".item-list");

addButton.addEventListener("click", function () {
  const itemText = itemInput.value;

  if (itemText === "") {
    return;
  }

  const li = document.createElement("li");
  li.textContent = itemText;

  li.addEventListener("click", function () {
    li.remove();
  });

  itemList.appendChild(li);

  itemInput.value = "";
});

追加したのは、次の部分です。

li.addEventListener("click", function () {
  li.remove();
});

remove()を使うと、HTML要素を削除できます。

このコードでは、追加されたリスト項目をクリックすると、その項目が削除されます。

画面で確認する

script.jsを保存します。

ブラウザを更新して、入力欄に文字を入力し、「追加する」ボタンをクリックしてください。

リストに追加された項目をクリックして、画面から消えればOKです。

DOM操作でよく使う書き方

ここまで出てきたDOM操作をまとめると、次のようになります。

書き方	内容
`document.querySelector()`	HTML要素を取得する
`textContent`	文字を取得・変更する
`value`	入力フォームの値を取得・変更する
`addEventListener()`	クリックなどの操作に反応させる
`classList.add()`	classを追加する
`classList.toggle()`	classの追加・削除を切り替える
`document.createElement()`	新しいHTML要素を作る
`appendChild()`	HTML要素を追加する
`remove()`	HTML要素を削除する

最初から全部覚える必要はありません。

まずは、querySelectorで要素を取得して、textContentで文字を変えるところから練習すると進めやすいです。

JavaScriptが動かないときに確認するところ

JavaScriptが動かないときは、次の点を確認してください。

ファイルを保存してからブラウザを更新したか
script.jsのファイル名が間違っていないか
index.htmlとscript.jsが同じフォルダにあるか
HTMLでscript.jsを読み込んでいるか
class名がHTMLとJavaScriptで同じか
開発者ツールのConsoleにエラーが出ていないか

特に多いのは、class名の間違いです。

HTMLで次のように書いている場合、

<p class="message">ここに文字が表示されます。</p>

JavaScriptでは、次のように書きます。

const message = document.querySelector(".message");

HTMLではmessageなのに、JavaScriptで別の名前を書いていると、要素を取得できません。

DOM操作を学ぶと作れるもの

DOM操作を学ぶと、Webページに動きをつけられるようになります。

たとえば、次のようなものを作れます。

ボタンを押すと文字が変わるページ
入力内容を画面に表示するフォーム
項目を追加できるリスト
クリックすると開閉するQ&A
タブをクリックすると内容が切り替わる画面
ハンバーガーメニュー
簡単なToDoリスト

JavaScriptでWebページを動かすときは、DOM操作がよく使われます。

HTML/CSSの次にJavaScriptを学ぶなら、まずDOM操作に慣れておくと、その後の練習が進めやすくなります。

学習に使う教材について

JavaScriptのDOM操作は、実際にコードを書きながら学ぶと理解しやすいです。

HTML、CSS、JavaScriptを別々に調べながら進めることもできますが、Webアプリケーション作成まで流れを見たい場合は、本を使う方法もあります。

『作りながら学ぶWebプログラミング実践入門』では、HTML、CSS、JavaScriptだけでなく、Node.js、Express、SQLite3まで扱っています。

最初にHTMLとCSSでWebページの基本を学び、そのあとJavaScriptでページに動きをつける流れになっています。

さらに、Node.jsやExpressを使ったサーバー側の処理、SQLiteを使ったデータベースの基本にも進みます。

最後には、ログイン管理やタスクの作成・取得・更新・削除ができるTodo管理アプリケーションを作る内容になっています。

JavaScriptのDOM操作だけで終わらず、将来的にWebアプリケーション作成まで進みたい場合は、このような本を使って全体の流れを確認するのもありです。

作りながら学ぶWebプログラミング実践入門一冊で理解するHTML、CSS、JavaScript、Node.js

作りながら学ぶWebプログラミング実践入門一冊で理解するHTML、CSS、JavaScript、Node.js [ 掌田津耶乃 ]

価格:2948円
(2026/6/21 10:44時点)
感想(0件)

まとめ

DOM操作とは、JavaScriptを使ってHTMLを操作することです。

DOM操作を使うと、次のようなことができます。

HTMLの文字を書き換える
CSSのclassを追加する
入力フォームの値を取得する
新しいHTML要素を追加する
HTML要素を削除する

JavaScript初心者は、まず次の順番で練習すると分かりやすいです。

document.querySelector()でHTML要素を取得する
textContentで文字を書き換える
addEventListener()でクリック処理を書く
classListでclassを操作する
valueで入力内容を取得する
createElement()でHTML要素を作る
appendChild()でHTML要素を追加する
remove()でHTML要素を削除する

最初は、ボタンを押したら文字を変えるだけで十分です。

そこから、入力フォームやリスト追加の練習に進むと、JavaScriptでHTMLを書き換える基本が身につきます。