JavaScriptのDOMとは？Webページを操作する基本をやさしく解説
JavaScriptでWebページを操作するには「DOM（ドム）」という仕組みを理解することが重要です。
DOMを使えば、HTMLの要素を取得・変更したり、イベントを設定したりと、動きのあるページを作ることができます。
この記事では、DOMの基本的な仕組みと、JavaScriptによる操作方法をわかりやすく解説します。
DOMとは？
DOMとは「Document Object Model（ドキュメント・オブジェクト・モデル）」の略で、
HTMLやXML文書を、JavaScriptなどのプログラムから扱えるようにした「オブジェクト構造」のことです。
つまり、HTMLの各要素（タグ）をJavaScriptから操作できるようにした仕組みです。
HTMLをオブジェクトとして扱う
たとえば、次のようなHTMLがあったとします。
<p id="text">こんにちは</p>
これをJavaScriptで取得・変更することができます。
const element = document.getElementById("text");
element.textContent = "こんばんは";
このように、HTMLのタグがJavaScriptの「オブジェクト」として扱われるのがDOMの特徴です。
DOM操作の基本
要素を取得する
document.getElementById("id名");
document.querySelector("CSSセレクタ");
内容を変更する
element.textContent = "新しいテキスト";
element.innerHTML = "<strong>強調</strong>";
スタイルを変更する
element.style.color = "red";
element.style.fontSize = "20px";
クラスを操作する
element.classList.add("active");
element.classList.remove("active");
要素を作成・追加する
const newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
document.body.appendChild(newDiv);
DOMツリーとは？
HTMLはツリー構造（親子関係）で表現されます。これを「DOMツリー」と呼びます。
たとえば：
<html>
<body>
<div>
<p>テキスト</p>
</div>
</body>
</html>
この構造は、JavaScriptで親・子・兄弟などの要素を辿ることが可能です。
イベントとの連携
DOMを使えば、ユーザーの操作に応じて動的に要素を変更することができます。
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("text").textContent = "クリックされました";
});
まとめ
- DOMはHTMLをJavaScriptから操作するための仕組み
- 要素の取得、内容・スタイルの変更、要素の追加・削除が可能
- イベントと組み合わせることで動きのあるページが作れる
DOMの基本操作を覚えると、Webページを自在にコントロールできるようになります。
まずは簡単な要素の取得や変更から試してみましょう。
