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

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

DOM操作とは？

DOM（Document Object Model）は、HTMLをJavaScriptから操作できるようにした仕組みです。HTMLの各要素はツリー構造で管理されており、JavaScriptから取得・変更・追加・削除することができます。

例えば、ボタンをクリックして文字を書き換えたり、画像を追加したり、入力内容を画面に表示したりする処理は、すべてDOM操作によって実現されています。

DOM操作でできること

JavaScriptでは、主に次のようなDOM操作を行えます。

• 要素を取得する
• 文字やHTMLを変更する
• CSSスタイルを変更する
• 要素を追加・削除する
• フォームの入力値を取得する

よく使うDOM操作

テキストを変更する

最も基本的なDOM操作は、要素の文字列を書き換えることです。

HTMLコード

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

JavaScriptコード

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

getElementById()で要素を取得し、textContentを書き換えることで表示内容を変更しています。

CSSスタイルを変更する

DOMを操作すると、CSSも動的に変更できます。

HTMLコード

<div id="colorBox"
     style="width:100px;height:100px;background-color:blue;">
</div>

<button onclick="changeColor()">色を変更</button>

JavaScriptコード

function changeColor() {
    const box = document.getElementById("colorBox");

    box.style.backgroundColor = "red";
}

styleプロパティを使うことで、JavaScriptからCSSを変更できます。

要素を追加する

JavaScriptでは、新しいHTML要素を作成してページへ追加できます。

HTMLコード

<ul id="itemList">
    <li>最初の項目</li>
</ul>

<button onclick="addItem()">項目を追加</button>

JavaScriptコード

function addItem() {
    const li = document.createElement("li");

    li.textContent = "新しい項目";

    document.getElementById("itemList").appendChild(li);
}

createElement()で新しい要素を作成し、appendChild()でリストへ追加しています。

入力された内容を表示する

フォームへ入力された内容もDOM操作で取得できます。

HTMLコード

<input type="text" id="nameInput">

<button onclick="showName()">表示</button>

<p id="message"></p>

JavaScriptコード

function showName() {
    const name = document.getElementById("nameInput").value;

    document.getElementById("message").textContent =
        "こんにちは、" + name + "さん！";
}

valueを使って入力値を取得し、textContentで画面へ表示しています。

getElementByIdとquerySelectorの違い

現在では、CSSセレクターが利用できるquerySelector()やquerySelectorAll()も広く使用されています。

まとめ

• DOMはHTMLをJavaScriptから操作するための仕組みである。
• 要素の取得・変更・追加・削除ができる。
• textContentやinnerHTMLで内容を変更できる。
• styleでCSSを変更できる。
• createElement()やappendChild()で要素を追加できる。
• querySelector()やquerySelectorAll()もよく利用される。