JavaScript
PR

【JavaScript 3-1】DOM操作の入口｜HTMLを書き換える最小の流れ（初心者向け）

JS3-1.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 3-1「DOM操作の入口」です。
ここでは、JavaScriptでHTMLの要素を見つけて、
文字や表示を変える流れを整理します。
すでに何度か出てきた getElementById や textContent を、
ここで一度まとめて見直します。

ここまでのJavaScriptでは、
ボタンを押したり、条件で表示を変えたり、配列やオブジェクトを使ったりしてきました。

その中で何度も出てきたのが、

– HTMLの要素を見つける
– 文字を書き換える
– 表示を変える

という流れです。

このように、
JavaScriptからHTMLに働きかける操作を、
よく **DOM操作** と呼びます。

今回は、
難しい言葉を広げすぎず、
**HTMLを書き換える最小の流れ**
としてDOM操作を整理していきます。

Q
「DOM操作は“HTMLをJavaScriptから触る”ための入口です」

最初はこの理解で大丈夫です。

・HTMLに id をつける
・JavaScriptでその id を探す
・見つけた要素の文字を変える
・必要なら class をつけ外しをして表示を変える

たとえば、

const message = document.getElementById(“message”);

と書くと、
HTMLの中から id=”message” の要素を探しています。

そのあとで、

message.textContent = “文字を変更しました。”;

と書くと、
画面に表示される文字を変えられます。

これがDOM操作の最初の流れです。

目次
  1. 今回のゴール
  2. DOM操作とは？
  3. まずは完成形を見る（コピペOK）
  4. どこを見ればいい？（変化のポイント）
  5. getElementById で要素を見つける
  6. textContent で表示を変える
  7. classList.toggle で表示を切り替える
  8. DOM操作では3つの役割が見えやすくなります
  9. console.log でDOM操作を確認できます
  10. よくあるつまずき（ここだけ確認）
  11. 今回のまとめ（ここだけ押さえればOK）
  12. 今日のゴール確認（できた判定）
  13. 次に読む（JavaScript 3-2へ）
  14. JavaScript 3-1 の一例zipについて
まずは到達点を確認する

今回のゴール

  • DOM操作はHTMLをJavaScriptから触ることだと分かる
  • getElementById でHTMLの要素を探せる
  • textContent で画面の文字を変えられる
  • classList で表示の切り替えに触れられる
  • 次の「JavaScriptが動かない時の見直し方」へ進む準備ができる
HTMLをJavaScriptから触る考え方

DOM操作とは？

DOM操作は、
HTMLの要素をJavaScriptから見つけて、
内容や見た目を変える操作です。

たとえば、

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

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

このように書くと、
HTMLの中にある id=”message” の要素を見つけて、
その文字を書き換えられます。

最初は、
**DOM操作 = HTMLをJavaScriptで操作すること**
と見れば十分です。

まずは全体像を動かして見る

まずは完成形を見る（コピペOK）

今回は、ボタンを押すと、

– タイトル下の説明文が変わる
– 補足メッセージの表示が切り替わる

というページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-03-01-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

 　└─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JavaScript 3-1</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 3-1 の一例</p>
      <h1>DOM操作の入口</h1>
      <p id="message" class="message">ここに表示される文字が変わります。</p>
      <p id="notice" class="notice is-hidden">補足メッセージが表示されました。</p>
      <button id="changeButton" class="button" type="button">表示を変える</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.message {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin-bottom: 16px;
}

.notice {
  background-color: #fefce8;
  border: 1px solid #eab308;
  padding: 16px;
  margin-bottom: 16px;
}

.is-hidden {
  display: none;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const message = document.getElementById("message");
const notice = document.getElementById("notice");
const changeButton = document.getElementById("changeButton");

changeButton.addEventListener("click", function() {
  message.textContent = "JavaScriptでHTMLの文字を書き換えました。";
  notice.classList.toggle("is-hidden");
});
JavaScript
toshi
toshi

今回は
“HTMLの要素を見つける → 文字を変える → classを切り替える” という流れを見る回です。

コードの見る場所を整理する

どこを見ればいい？（変化のポイント）

見る場所起きていること
id=”message”JavaScriptで文字を書き換える場所
id=”notice”表示・非表示を切り替える場所
id=”changeButton”クリックするボタン
getElementByIdHTMLの要素をidで探している
textContent表示される文字を書き換えている
classList.toggleclassをつけ外しして
表示を切り替えている

今回のコードでは、
これまで使ってきた内容をDOM操作として整理しています。

HTMLに目印として id をつける。
JavaScriptでその id を探す。
見つけた要素の文字やclassを変える。

この流れが、
DOM操作の入口です。

HTML側の目印を探す

getElementById で要素を見つける

getElementById は、
HTMLの中から id のついた要素を探すために使います。

<p id="message" class="message">ここに表示される文字が変わります。</p>
HTML

このHTMLを、JavaScriptでは次のように探しています。

const message = document.getElementById("message");
JavaScript

これは、
**id=”message” の要素を探して、message という名前で使えるようにしている**
と見れば大丈夫です。

HTML側の id 名と、
JavaScript側の名前がずれると動きません。
最初は id 名をコピーしてそろえるのがおすすめです。

画面の文字を書き換える

textContent で表示を変える

textContent は、
要素の中に表示される文字を書き換える時に使えます。

今回のコードでは、

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

と書いています。

これによって、
画面上の説明文が変わります。

書き方ざっくりした意味
messageid=”message” の要素
textContent表示される文字
=右側の文字に入れ替える
classをつけ外しして見た目を変える

classList.toggle で表示を切り替える

classList.toggle は、
classをつけたり外したりする時に使えます。

今回のコードでは、

notice.classList.toggle("is-hidden");
JavaScript

と書いています。

CSS側では、

.is-hidden {
  display: none;
}
CSS

と書いているため、
is-hidden がついている時は非表示になります。

ボタンを押すたびに、
is-hidden がついたり外れたりするので、
補足メッセージの表示が切り替わります。

toshi
toshi

文字を書き換えるだけでなく、
classを切り替えると表示・非表示の動きも作れます。

HTML・CSS・JavaScriptの役割をつなげる

DOM操作では3つの役割が見えやすくなります

ファイル役割
HTML変更したい場所を用意する
CSS表示・非表示などの見た目を決める
JavaScript文字やclassを切り替える

DOM操作を見ていくと、
HTML・CSS・JavaScriptの役割がつながって見えやすくなります。

HTMLには、
操作したい場所を用意します。

CSSには、
classがついた時の見た目を書きます。

JavaScriptでは、
そのclassをつけたり外したりします。

この3つがつながると、
ページに動きや変化を出しやすくなります。

少しだけ変えてみる（練習）
  • message.textContent の文章を変えてみる
  • button の文字を変えてみる
  • notice の初期文を変えてみる
  • is-hidden を外して、最初から表示されるか確認してみる
  • classList.toggle をコメントアウトして、表示切り替えが止まるか確認してみる

今回の練習では、
HTML・CSS・JavaScriptのどこを変えると、
画面のどこが変わるかを確認します。

特に、
classList.toggle と .is-hidden のつながりを見ると、
DOM操作の感覚がつかみやすくなります。

動きを確認しながら進める

console.log でDOM操作を確認できます

DOM操作がうまく動いているか確認したい時は、
console.log を使えます。

console.log(message);
console.log(notice);
JavaScript

また、クリックされたか確認したい時は、
クリック処理の中に入れてみます。

changeButton.addEventListener("click", function() {
  console.log("ボタンが押されました。");

  message.textContent = "JavaScriptでHTMLの文字を書き換えました。";
  notice.classList.toggle("is-hidden");
});
JavaScript

console.log は、
画面本文ではなく開発者ツールのコンソールに表示されます。
DOM操作が止まった時の確認にかなり役立ちます。

よく止まる場所を先に確認する

よくあるつまずき（ここだけ確認）

Q
「つまずき①：ボタンを押しても文字が変わらない」

まずは id 名を確認します。

HTML側が、

<p id="message" class="message">
ここに表示される文字が変わります。
</p>
HTML

なら、JavaScript側も、

const message = document.getElementById("message");
JavaScript

のように同じ名前にします。

message の文字がずれていると、要素を見つけられません。

Q
「つまずき②：補足メッセージが表示されない」

classList.toggle と CSS側のclass名を確認します。

JavaScript側が、

notice.classList.toggle("is-hidden");
JavaScript

なら、CSS側も、

.is-hidden {
  display: none;
}
CSS

になっているか確認します。

class名がずれると、表示切り替えがうまくいきません。

Q
「つまずき③：script.js が読み込まれていない」

index.html の scriptタグを確認します。

今回の構成では、

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

です。

jsフォルダの中に script.js があるか、
ファイル名が違っていないかを見直してください。

Q
「つまずき④：classList.toggle が難しく感じる」

最初は、
「指定したclassをつけたり外したりするもの」
と見れば大丈夫です。

今回なら、
is-hidden をつけたり外したりしています。

is-hidden がついている時は非表示。
外れると表示。

この関係だけ見ればOKです。

DOM操作の基本を整理する

今回のまとめ（ここだけ押さえればOK）

  • DOM操作はHTMLをJavaScriptから触ること
  • getElementById でHTMLの要素を探せる
  • textContent で表示される文字を変えられる
  • classList.toggle でclassをつけ外しできる
  • HTML・CSS・JavaScriptの役割がつながって見える
できたことを確認する

今日のゴール確認（できた判定）

ここまでできたらOKです。

  • DOM操作の入口が分かった
  • HTMLの要素をJavaScriptで見つけられた
  • textContent で文字を書き換えられた
  • classList.toggle で表示を切り替えられた
  • 次の JavaScript 3-2 に進む準備ができた
止まった時の見直し方へ進む

次に読む（JavaScript 3-2へ）

今回は、DOM操作として
HTMLをJavaScriptから書き換える流れを整理しました。

次は、
JavaScriptが動かない時の見直し方を整理します。

scriptの読み込み、id名のずれ、コンソールの確認など、
つまずきやすいポイントを順番に見ていきます。

次へ：JavaScript 3-2 よくあるつまずきへ進む
ローカルで動きを確認する

JavaScript 3-1 の一例zipについて

この記事の内容は、JavaScript 3-1 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで表示される文章や class 名を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-03-01-example.zip
└─ javascript-03-01-example/
├─ index.html
├─ css/
│　└─ style.css
└─ js/
　　└─ script.js

javascript-03-01-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、条件分岐・関数・DOM操作あたりで少しつまずきやすいので、
必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました