DOM操作によるUIの変更 | 動的なWebページの作成 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

DOM操作とは？

DOM（Document Object Model）は、HTMLやXMLドキュメントをツリー構造で表現したものであり、JavaScriptを使ってこのツリーを操作することによって、Webページの内容や構造を動的に変更することができます。DOMは、Webページを構成する各要素を「ノード」として表現し、JavaScriptでこれらのノードにアクセスし、変更・削除・追加することで、ユーザーインターフェース（UI）を操作します。

例えば、ボタンをクリックした時にテキストが変わったり、スタイルが変わったり、新しい要素が追加されるのは、すべてDOM操作を通じて行われます。こうしたDOM操作によって、静的なHTMLだけでは表現できない動的でインタラクティブなWebページを作成することができます。

DOM操作の仕組み

DOMは、HTMLの各要素（タグ、属性、テキストなど）をJavaScriptでプログラム的に操作できる仕組みを提供します。JavaScriptを使ってDOMを操作することで、Webページの内容や見た目を動的に変更することができます。具体的な操作には、次のようなものがあります。

  • 要素の取得: 特定のIDやクラスを持つ要素をJavaScriptで取得し、その内容を操作します。
  • 要素の変更: 取得した要素のテキストや属性、スタイルを変更します。
  • 要素の追加/削除: DOMに新しい要素を追加したり、不要な要素を削除します。

これにより、ユーザーのアクションに応じて動的にWebページが変化し、よりインタラクティブな体験を提供できます。

DOM操作の基本的なメソッドとプロパティ

JavaScriptでは、DOM操作のために多くのメソッドやプロパティが提供されています。以下は、よく使われる基本的なメソッドとプロパティです。

メソッド/プロパティ 説明
document.getElementById() 指定したIDを持つ要素を取得します。
element.innerHTML 要素のHTML内容を変更します。
element.style 要素のCSSスタイルを変更します。
document.createElement() 新しいHTML要素を作成します。
element.appendChild() 要素に新しい子要素を追加します。

DOM操作によるUI変更の具体例

以下に、DOM操作を使って実際にUIを変更する具体的な例を示します。ここでは、テキストの変更、スタイルの変更、要素の追加、ユーザー入力による動的な変更を紹介します。

テキストの変更

最も基本的なDOM操作の1つは、要素のテキストを動的に変更することです。以下の例では、ボタンをクリックすると、テキストが「テキストが変更されました！」に変わります。

このテキストが変更されます。

結果: ボタンをクリックすると、テキストが変わります。

HTMLコード

<p id="text">このテキストが変更されます。</p>
<button onclick="changeText()">テキストを変更</button>

JavaScriptコード

function changeText() {
    document.getElementById("text").innerHTML = "テキストが変更されました！";
}

このコードでは、getElementById()を使って、IDがtextの要素を取得し、innerHTMLを変更してテキストを更新しています。

スタイルの変更

要素の見た目（CSSスタイル）を動的に変更することもDOM操作で簡単に行えます。以下の例では、ボタンをクリックすると、ボックスの背景色が青から赤に変わります。

結果: ボックスの背景色が変わります。

HTMLコード

<div id="colorBox" style="width: 100px; height: 100px; background-color: blue;"></div>
<button onclick="changeColor()">色を変更</button>

JavaScriptコード

function changeColor() {
    document.getElementById("colorBox").style.backgroundColor = "red";
}

この例では、JavaScriptのgetElementById()で要素を取得し、そのstyle.backgroundColorプロパティを変更して、背景色を動的に変えています。

要素の追加

次に、新しい要素をDOMに追加する例です。リストに新しい項目を追加することで、動的なコンテンツの生成が可能です。

  • 最初の項目

結果: 新しい項目がリストに追加されます。

HTMLコード

<ul id="itemList">
    <li>最初の項目</li>
</ul>
<button onclick="addItem()">項目を追加</button>

JavaScriptコード

function addItem() {
    let li = document.createElement("li");
    li.innerHTML = "新しい項目";
    document.getElementById("itemList").appendChild(li);
}

このコードでは、createElement()で新しいli要素を作成し、それをappendChild()で既存のリストに追加しています。

ユーザー入力に基づくUI変更

ユーザーの入力を受け取り、それに基づいてUIを変更するのもDOM操作の典型的な例です。以下の例では、ユーザーが入力した名前に基づいて挨拶が表示されます。


結果: 入力された名前に基づいて挨拶が表示されます。

HTMLコード

<input type="text" id="nameInput" placeholder="名前を入力してください">
<button onclick="updateGreeting()">名前を表示</button>
<p id="greetingMessage"></p>

JavaScriptコード

function updateGreeting() {
    let name = document.getElementById("nameInput").value;
    document.getElementById("greetingMessage").innerHTML = "こんにちは、" + name + "さん！";
}

このコードでは、ユーザーの入力を取得し、それに基づいて挨拶のメッセージを動的に生成しています。

まとめ

JavaScriptを使ったDOM操作は、動的なWebページを作成するために欠かせない技術です。DOMを操作することで、ページのコンテンツやスタイルをリアルタイムに変更でき、ユーザーとのインタラクションを強化できます。テキストやスタイルの変更、要素の追加、ユーザー入力に基づく操作など、様々な方法でDOM操作を駆使することで、よりインタラクティブで魅力的なWeb体験を提供できるようになります。

スポンサーリンク