【JavaScript】DOM操作をマスターしよう！基本から応用まで解説！

スポンサーリンク
2025.02.08

JavaScriptを使えば、HTMLの要素（DOM）を自由に操作できます。ボタンをクリックするとテキストが変わる、フォームの入力内容を取得する、動的にリストを追加する・・・こうした動作はすべてDOM操作によって実現されます。

本記事では、DOMとは何か？という基本を初心者向けに解説していきます。

DOMの基本概念

DOM（Document Object Model）は、HTMLやXMLのドキュメントをプログラムから操作できるようにする仕組みです。WebページのHTMLをツリー構造として表現し、JavaScriptを使って要素を取得・変更・追加・削除できます。

例えば、次のようなHTMLがあるとします。

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

JavaScriptを使って、この <p> 要素の内容を「こんにちは！」から「こんばんは！」に変更することが可能です。

document.getElementById("message").textContent = "こんばんは！";

このように、DOMを操作することでWebページの内容を動的に変えることができます。

DOMツリーの構造

HTMLの各要素は、DOMではノード（Node） として扱われます。ノードはツリー状に構成されており、親子関係を持つことができます。

例えば、以下のようなHTMLがあるとします。

<!DOCTYPE html>
<html>
<head>
    <title>DOMの例</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

このHTMLは、以下のようなDOMツリーとして表現されます。

Document
  ├── <html>
  │    ├── <head>
  │    │    └── <title> (テキスト: "DOMの例")
  │    ├── <body>
  │         ├── <h1> (テキスト: "見出し")
  │         ├── <p> (テキスト: "これは段落です。")

この構造を理解することで、JavaScriptを使った要素の取得や変更がスムーズにできるようになります。

DOMの主なノードの種類

DOMのツリー構造は、いくつかの種類のノードで構成されています。

  1. 要素ノード（Element Node）
    • <p> や <h1> などのHTMLタグを表すノード。
    • document.getElementById() などを使って取得できる。
  2. テキストノード（Text Node）
    • <p>これは段落です。</p> の「これは段落です。」の部分。
    • textContent や innerText で変更できる。
  3. 属性ノード（Attribute Node）
    • <a href="https://example.com">リンク</a> の href など。
    • setAttribute() で変更できる。
  4. ドキュメントノード（Document Node）
    • ページ全体のルートとなる document オブジェクト。

document オブジェクトの役割

document は、現在のWebページ全体を表す特別なオブジェクトで、DOM操作の起点になります。

例えば、次のようなコードでページのタイトルを取得・変更できます。

console.log(document.title); // 現在のページタイトルを取得
document.title = "新しいタイトル"; // ページタイトルを変更

また、document を使って要素を取得することも可能です。

let heading = document.getElementsByTagName("h1")[0];
console.log(heading.textContent); // <h1>の内容を取得
  • DOM（Document Object Model）は、HTMLをツリー構造として扱う仕組み。
  • ノードには、要素ノード・テキストノード・属性ノードなどがある。
  • document オブジェクトを使うと、Webページの要素を取得・変更できる。

この基本を理解しておくと、次の要素の取得・変更・追加といった操作がスムーズにできるようになります。

DOM要素を取得する

JavaScriptでDOMを操作するためには、まず対象の要素を取得する必要があります。取得方法にはいくつかの手段があり、用途によって使い分けることが重要です。

getElementById() IDで取得する

getElementById() を使うと、指定した id を持つ要素を取得できます。

<p id="message">こんにちは！</p>
<script>
    let element = document.getElementById("message");
    console.log(element.textContent); // "こんにちは！"
</script>

特徴

  • id はページ内で一意（1つだけ）である必要がある。
  • 取得できるのは Element オブジェクト（単一の要素）。

getElementByClassName() クラスで取得する

getElementsByClassName() を使うと、指定したクラス名を持つ要素をすべて取得できます。

<p class="info">情報1</p>
<p class="info">情報2</p>
<script>
    let elements = document.getElementsByClassName("info");
    console.log(elements[0].textContent); // "情報1"
    console.log(elements[1].textContent); // "情報2"
</script>

特徴

  • 複数の要素が取得できる（HTMLCollection という配列のようなオブジェクト）。
  • インデックス（elements[0] など）で特定の要素を指定できる。

getElementByTagName() タグ名で取得する

getElementsByTagName() を使うと、指定したタグ名（<p> など）を持つ要素をすべて取得できます。

<p>段落1</p>
<p>段落2</p>
<script>
    let paragraphs = document.getElementsByTagName("p");
    console.log(paragraphs.length); // 2
</script>

特徴

  • 指定したタグ名の要素をすべて取得する。
  • HTMLCollection を返すので、ループ処理が可能。

querySelector() CSSセレクタで取得

querySelector() を使うと、CSSセレクタを指定して、最初に一致する要素を取得できます。

<p class="info">情報1</p>
<p class="info">情報2</p>
<script>
    let firstInfo = document.querySelector(".info");
    console.log(firstInfo.textContent); // "情報1"
</script>

特徴

  • CSSのセレクタ（#id、.class、tag など）をそのまま使える。
  • 最初に一致した1つの要素だけを取得。

DOM要素の取得については、こちらでも詳しく解説しています。

JavaScriptで要素を取得する方法を徹底解説！
JavaScriptでWebページを操作する際、まず必要になるのが「要素の取得」です。ボタンのクリックでテキストを変更したり、特定の要素を非表示にしたりするには、適切な方法で要素を取得することが不可欠です。本記事では、基本的な取得方法から、実践的な活用方法まで詳しく解説します。
nankurunikki.com
2025.02.17

用途に応じて適切な取得方法を選ぶことで、効率的にDOM操作ができます！

DOM要素を変更する

取得したDOM要素は、JavaScriptを使って自由に変更できます。ここでは、代表的な変更方法を紹介します。

テキストを変更する

要素内のテキストを変更するには、textContent または innerText を使用します。

<p id="message">こんにちは！</p>
<script>
    let element = document.getElementById("message");
    element.textContent = "こんばんは！"; // テキストを変更
</script>
<p id="text">表示されない<span style="display: none;">隠し</span>テキスト</p>
<script>
    console.log(document.getElementById("text").textContent); // "表示されない隠しテキスト"
    console.log(document.getElementById("text").innerText);   // "表示されないテキスト"
</script>

HTMLを変更する

要素の内部HTMLを変更する場合は、innerHTML を使用します。

<div id="content">元の内容</div>
<script>
    document.getElementById("content").innerHTML = "<strong>新しい内容</strong>";
</script>

属性を変更する

要素の属性（href、src、alt など）を変更するには、setAttribute() や 属性名 を使います。

<a id="link" href="https://example.com">元のリンク</a>
<script>
    let link = document.getElementById("link");
    link.setAttribute("href", "https://google.com"); // href属性を変更
    link.textContent = "Googleへ"; // 表示テキストも変更
</script>

また、属性名を直接変更することも可能です。

link.href = "https://yahoo.co.jp";

styleを変更する

要素のスタイルを変更するには、style プロパティを使います。

<p id="text">スタイルを変更</p>
<script>
    let text = document.getElementById("text");
    text.style.color = "red"; // 文字色を赤に変更
    text.style.fontSize = "20px"; // フォントサイズを変更
</script>

複数のスタイルを一括で適用する場合は、cssText を使うと便利です。

text.style.cssText = "color: blue; background-color: yellow; padding: 10px;";

CSSクラスを追加・削除する場合 classList を使うと、クラスを簡単に追加・削除できます。

<p id="message" class="original">クラスを変更</p>
<script>
    let msg = document.getElementById("message");
    msg.classList.add("new-class"); // クラスを追加
    msg.classList.remove("original"); // クラスを削除
</script>

これらの方法を活用すると、JavaScriptで柔軟にWebページの内容を変更できます！

DOM要素の追加と削除

JavaScriptでは、DOMに新しい要素を追加したり、既存の要素を削除することができます。ここでは、基本的な追加・削除の方法を解説します。

新しい要素を追加する

新しい要素を作成するには、document.createElement() を使用します。

<ul id="list">
    <li>アイテム 1</li>
</ul>
<button id="addButton">追加</button>

<script>
    document.getElementById("addButton").addEventListener("click", function() {
        let newItem = document.createElement("li"); // 新しい <li> 要素を作成
        newItem.textContent = "新しいアイテム"; // テキストを設定
        document.getElementById("list").appendChild(newItem); // リストに追加
    });
</script>

手順

  1. createElement("タグ名") で要素を作成
  2. textContent でテキストを設定
  3. appendChild(親要素) で親要素に追加

指定した場所に要素を挿入する

appendChild() では末尾に追加されますが、insertBefore() を使うと特定の要素の前に追加できます。

<ul id="list">
    <li id="firstItem">先頭のアイテム</li>
</ul>
<button id="insertButton">先頭に追加</button>

<script>
    document.getElementById("insertButton").addEventListener("click", function() {
        let newItem = document.createElement("li");
        newItem.textContent = "追加されたアイテム";
        let firstItem = document.getElementById("firstItem");
        document.getElementById("list").insertBefore(newItem, firstItem);
    });
</script>

insertBefore(追加する要素, 参照要素) を使うことで、指定の要素の前に挿入できます。

要素を削除する

削除には removeChild() または remove() を使用します。

<ul id="list">
    <li id="item">削除されるアイテム</li>
</ul>
<button id="removeButton">削除</button>

<script>
    document.getElementById("removeButton").addEventListener("click", function() {
        let item = document.getElementById("item");
        item.parentNode.removeChild(item); // 親要素から削除
    });
</script>

また、remove() を使うと簡潔に削除できます。

document.getElementById("item").remove();

すべての子要素を削除する

innerHTML = "" で簡単に削除できます。

document.getElementById("list").innerHTML = "";

これらのテクニックを使えば、動的にDOMを操作できるようになります！

まとめ

この記事では、JavaScriptを使ったDOM操作の基本を解説しました。

DOM操作をマスターすれば、よりインタラクティブなWebページを作成できます。ぜひ、実際に試しながら学んでみてください！

スポンサーリンク

コメント