JavaScriptのDOM操作とは？要素の取得・変更方法を解説

PR JavaScript

JavaScriptのDOM操作とは？要素の取得・変更方法を解説

💡 この記事でわかること

  • DOM(Document Object Model)とは何か
  • querySelector・getElementByIdなどの要素の取得方法
  • テキスト・HTML・属性・スタイルの変更方法
  • 要素の追加・削除の方法
  • 初心者がつまずきやすいポイント

1. DOMとは？

DOM(Document Object Model)とは、
👉 HTMLの内容をJavaScriptから操作できるようにした仕組みです。

ブラウザはHTMLファイルを読み込むと、その内容を「オブジェクトの木構造」として組み立てます。この木構造がDOMです。JavaScriptはDOMを通して、ページ内の要素を取得したり、内容を書き換えたりできます。

イメージ

HTML（見た目）
   ↓ ブラウザが読み込む
DOM（JavaScriptから操作できるデータ）
   ↓ JavaScriptで操作
画面の内容が変わる

💡 「ボタンを押したら文字が変わる」「フォームの入力内容を取得する」といった動きは、すべてDOM操作で実現しています。

2. 要素を取得する方法

DOM操作の第一歩は「操作したい要素を取得すること」です。代表的な方法を紹介します。

querySelector(1つだけ取得)

CSSセレクタと同じ書き方で、条件に一致する最初の1つの要素を取得します。

const title = document.querySelector("h1");
const btn = document.querySelector("#myButton"); // id
const item = document.querySelector(".list-item"); // class

👉 CSSセレクタが書ければそのまま使えるので、初心者にも扱いやすいです。

querySelectorAll(複数まとめて取得)

条件に一致する要素をすべて取得します。戻り値は配列のように扱える「NodeList」です。

const items = document.querySelectorAll(".list-item");

items.forEach((item) => {
  console.log(item.textContent);
});

getElementById(idで1つ取得)

id属性を指定して要素を取得する、昔からある書き方です。

const btn = document.getElementById("myButton");

getElementsByClassName(classで複数取得)

class属性を指定して要素をまとめて取得します。戻り値は「HTMLCollection」で、forEachがそのままでは使えない点に注意が必要です。

const items = document.getElementsByClassName("list-item");

// forEachを使いたい場合は配列に変換する
Array.from(items).forEach((item) => {
  console.log(item.textContent);
});

👉 迷ったら基本的にquerySelector・querySelectorAllを使えばOKです(CSSセレクタで柔軟に指定でき、書き方も統一できます)。

3. テキスト・HTMLの内容を変更する

textContent(テキストのみ)

要素内のテキストを取得・変更します。HTMLタグは文字列としてそのまま表示されます。

const title = document.querySelector("h1");

console.log(title.textContent); // 現在のテキストを取得
title.textContent = "こんにちは！"; // テキストを変更

innerHTML(HTMLタグも含めて変更)

HTMLタグごと内容を変更したい場合はinnerHTMLを使います。

const box = document.querySelector("#box");

box.innerHTML = "<strong>太字のテキスト</strong>";

⚠️ innerHTMLにユーザーが入力した文字列をそのまま入れると、意図しないタグやスクリプトが実行されてしまう危険があります(XSS)。ユーザー入力を表示するだけならtextContentを使うのが安全です。

4. 属性・classを変更する

属性の取得・変更

const link = document.querySelector("a");

console.log(link.getAttribute("href")); // 属性を取得
link.setAttribute("href", "https://example.com"); // 属性を変更

classList(classの追加・削除・切り替え)

class属性を操作するときは、classListを使うと便利です。

const box = document.querySelector("#box");

box.classList.add("active");     // classを追加
box.classList.remove("active");  // classを削除
box.classList.toggle("active");  // あれば削除、なければ追加

👉 「クリックしたらメニューを開閉する」のような処理は、classList.toggleとCSSを組み合わせて実現することが多いです。

5. スタイル(CSS)を変更する

style プロパティを使うと、要素にCSSを直接指定できます。

const box = document.querySelector("#box");

box.style.color = "red";
box.style.backgroundColor = "black"; // background-colorはキャメルケースで書く

💡 頻繁にスタイルを切り替える場合は、style で1つずつ指定するよりも、classList でCSSのclassを切り替える方法の方が管理しやすいです。

6. 要素を追加・削除する

新しい要素を作って追加する

const list = document.querySelector("#list");

const newItem = document.createElement("li"); // 要素を作る
newItem.textContent = "新しい項目";           // 内容を設定
list.appendChild(newItem);                    // 末尾に追加

要素を削除する

const item = document.querySelector(".list-item");

item.remove();

👉 createElement → 内容や属性の設定 → appendChild で追加、という3ステップの流れを覚えておくと理解しやすいです。

7. 初心者がつまずきやすいポイント

  • querySelectorがnullを返す:HTML読み込み前にscriptを実行すると要素がまだ存在せず取得に失敗します。scriptタグを</body>の直前に置くか、DOMContentLoadedイベント内で実行しましょう
  • querySelectorAllの戻り値はNodeList:配列に似ていますがArrayのメソッドが一部使えないため、必要ならArray.fromで配列に変換します
  • innerHTMLの多用は避ける:セキュリティ上のリスクがあるほか、書き換えのたびにブラウザの再描画コストがかかります。テキストだけならtextContentを使いましょう

まとめ

DOM操作は、Webページに動きをつけるための基本テクニックです。まずはquerySelectorで要素を取得し、textContentやclassListで内容や見た目を変えるという基本の流れを押さえておきましょう。

DOM操作はイベント(addEventListener)と組み合わせることで、「クリックしたら〇〇する」といった実践的な処理が作れるようになります。あわせて確認してみてください。

-JavaScript
-, ,