JavaScriptを学び始めると、よく「DOM」という言葉を見かけます。
しかし、初心者の方の中には「DOMとは何なのかよく分からない」という方も多いのではないでしょうか。
DOMは、JavaScriptでWebページを動かすために欠かせない重要な仕組みです。
例えば、ボタンをクリックしたときに文字を変更したり、メニューを開いたりする動きは、DOMを操作することで実現されています。
この記事では、DOMとは何かを初心者向けにわかりやすく解説します。
仕組みやJavaScriptでの使い方も紹介するので、ぜひ参考にしてください。
DOMとは？
DOMとは、**Document Object Model（ドキュメント・オブジェクト・モデル）**の略です。
簡単に言うと、HTMLをJavaScriptから操作できるようにした仕組みのことを指します。
WebページはHTMLで作られていますが、HTMLだけではページに動きを付けることはできません。
そこでJavaScriptを使ってHTMLの内容を変更したり、要素を追加したりします。そのときに利用されるのがDOMです。
つまりDOMとは、JavaScriptがHTMLを操作するための窓口のような存在だと考えると分かりやすいでしょう。
DOMが必要な理由
WebページはHTMLとCSSだけでも表示できますが、それだけでは「動き」のあるページにはなりません。
例えば、次のような機能を考えてみましょう。
- ボタンをクリックするとメニューが開く
- フォーム入力のエラーを表示する
- クリックすると文字が変わる
- 画像のスライドショーを表示する
これらの動きはすべてJavaScriptによって実現されています。
そして、JavaScriptがHTMLの内容を変更するために利用するのがDOMです。
つまり、JavaScriptがHTMLを操作するための仕組みがDOMなのです。
DOMの仕組み
DOMを理解するうえで重要なのが、HTMLはツリー構造になっているという考え方です。
例えば、次のようなHTMLがあるとします。
<html> <body> <h1>タイトル</h1> <p>文章です</p> </body> </html> このHTMLは、次のような階層構造になっています。
・html
・body
・h1
・p
このように、HTMLの要素は親と子の関係を持つツリー構造になっています。
この構造をプログラムとして扱えるようにしたものがDOMツリーです。
JavaScriptはDOMツリーを通して、HTMLの要素を取得したり変更したりできます。
JavaScriptでDOMを操作する方法
JavaScriptでは、DOMを使ってさまざまな操作を行うことができます。
ここでは、基本的な操作をいくつか紹介します。
要素を取得する（querySelector）
まず、HTMLの要素を取得する必要があります。
そのときによく使われるのがquerySelectorです。
const title = document.querySelector("h1"); このコードは、HTMLの中にある h1要素 を取得しています。
文字を変更する（textContent）
取得した要素の文字を変更することもできます。
title.textContent = "新しいタイトル"; このコードを実行すると、h1の文字が「新しいタイトル」に変わります。
要素を追加する
新しい要素を追加することも可能です。
const p = document.createElement("p"); p.textContent = "新しい文章です"; document.body.appendChild(p); このコードでは、新しいpタグを作成してページに追加しています。
CSSクラスを変更する（classList）
CSSクラスを追加・削除する場合は classList を使います。
element.classList.add("active"); クラスを削除する場合は次のように書きます。
element.classList.remove("active"); このようにDOMを使うことで、CSSの見た目もJavaScriptから変更できます。
DOM操作の簡単なサンプルコード
ここでは、ボタンをクリックすると文字が変わる簡単な例を紹介します。
まずHTMLです。
<h1 id="title">こんにちは</h1> <button id="btn">クリック</button> 次にJavaScriptを書きます。
const title = document.querySelector("#title"); const btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
title.textContent = "クリックされました";
});
このコードでは、ボタンがクリックされたときにh1の文字が変更されます。
このような動きは、DOMを操作することで実現されています。
よく使うDOM操作メソッド
DOM操作では、いくつかのメソッドがよく使われます。
querySelector / querySelectorAll
HTMLの要素を取得するためのメソッドです。
document.querySelector(".class"); すべての要素を取得する場合は次のように書きます。
document.querySelectorAll(".class"); addEventListener
イベントを設定するためのメソッドです。
クリックやマウス操作などを検知できます。
element.addEventListener("click", function() { console.log("クリックされました"); }); classList
クラスの追加や削除を行うときに使います。
element.classList.toggle("active"); toggleを使うと、クラスの追加と削除を切り替えることができます。
DOMを理解するとできること
DOMを理解すると、次のような機能を作れるようになります。
・ボタンのクリック処理
・ハンバーガーメニューの開閉
・モーダルウィンドウの表示
・フォームの入力チェック
・タブメニューの切り替え
これらはWebサイトでよく使われる機能なので、DOMを理解することでJavaScriptの活用の幅が大きく広がります。
まとめ
DOMとは、JavaScriptからHTMLを操作するための仕組みです。
WebページのHTMLはツリー構造になっており、DOMはその構造をプログラムとして扱えるようにしたものです。
JavaScriptはDOMを使うことで、要素の取得・変更・追加などの操作を行い、Webページに動きを付けています。
JavaScriptを学ぶうえでDOMの理解はとても重要です。
最初は難しく感じるかもしれませんが、実際にコードを書きながら学ぶことで徐々に理解できるようになります。
ぜひ、今回紹介したサンプルコードを試しながら、DOM操作に慣れていきましょう。
コメント