MENU
  1. ホーム
  2. JavaScript
  3. javascrip入門
  4. 【５分で分かる】JavaScriptのDOMとは？操作方法も含めて解説！

【５分で分かる】JavaScriptのDOMとは？操作方法も含めて解説！

JavaScript javascrip入門
目次

JavaScriptのDOMとは？

新人：グラミちゃん

こんにちは、プロくん！最近、JavaScriptを学び始めて、DOMって何か知りたいんだ。

エンジニア：プロくん

こんにちは、グラミちゃん！JavaScriptではDOM（Document Object Model）を使って、ウェブページの要素をプログラムから操作できるんだよ。DOMはページをツリー構造で表現していて、これを通じてページの構造や内容にアクセスできるんだ。

もっと詳しく

JavaScriptのDOM（Document Object Model）は、HTMLやXML文書の構造を表現し、それに対してプログラムからアクセスや操作を行うためのインターフェースです。DOMは文書の階層構造をツリー形式で表現し、各要素やノードに対してプログラムからアクセスできるようにします。

具体的には、HTML文書が読み込まれると、ブラウザはその構造を解析し、DOMツリーを構築します。このDOMツリーは、文書内のすべての要素（タグやテキストなど）を表現し、それぞれの要素がツリーの中で親子関係になっています。

JavaScriptを使用すると、DOMを利用して文書の要素にアクセスし、変更したり、新しい要素を追加したりできます。これにより、ユーザーの操作に対して動的にコンテンツを変更したり、イベントに対応したりすることが可能になります。

例えば、以下はJavaScriptを使用してDOMを通じて特定の要素にアクセスし、その内容を変更する簡単な例です:

// HTML文書の中にある特定の要素を取得
var myElement = document.getElementById("exampleElement");

// 要素の内容を変更
myElement.innerHTML = "新しい内容";

このようにして、JavaScriptのDOMを使って、動的なWebページを作成したり、ユーザーの操作に応じてコンテンツを変更したりすることができます。

DOMの基本概念

新人：グラミちゃん

ツリー構造はどんな感じ？

エンジニア：プロくん

HTMLの構造を考えてみよう。
<body>が一番上の親ノードで、その中に<div>やテキストが子ノードとして含まれているんだ。
これがツリー構造で、それを辿ることで、ページ全体の構造を理解できるんだ。

HTMLの構造はまさに木構造のような階層構造です。これを理解することで、ページの構造を把握しやすくなります。考え方を簡単な言葉で表現すると、以下のようになります。

ウェブページを1つの木と考えましょう。その木の根っこ（ルート）が <body> タグです。これが一番上の親ノードです。ルートには他の要素（ノード）が枝分かれしてつながっています。

例えば、 <body> の中には <div> やテキストなどが含まれているかもしれません。これらが子ノードです。 <div> は更にその中に別の要素やテキストを持つことがあります。これがツリー構造です。

この木を辿っていくことで、ページ全体の構造を順番に理解できます。各要素は親から子へとつながり、HTML文書はその階層的な構造によって整理されています。ツリー構造を辿ることで、どの部分がどのように結びついているのかが視覚的に把握でき、開発やデザインの際にも便利です。

DOMの使い方

新人：グラミちゃん

ツリー構造でページを理解できるんですね。でも、具体的にどんなことができるの？

エンジニア：プロくん

要素を取得したり、内容を変更したり、新しい要素を作ったりできるんだ。例えば、テキストの内容を変えたい時は、document.getElementById('myElement').innerHTML = '新しいテキスト';と書くと、指定した要素の中身が変わるよ。

DOMの実践例

新人：グラミちゃん

それなら、もっと具体的な例を見せてくれる？

エンジニア：プロくん

もちろんだよ。例えば、以下のコードを見てみてね。これはボタンがクリックされたときに、特定の要素の背景色を変える例だよ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMの実践例</title>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>
<button onclick="changeColor()">色を変える</button>

<script>
  function changeColor() {
    document.getElementById('myDiv').style.backgroundColor = 'lightcoral';
  }
</script>

</body>
</html>
エンジニア：プロくん

これで、ボタンをクリックするとmyDivというIDを持つ要素の背景色が変わるんだ。

DOMの応用

新人：グラミちゃん

なるほど、実際にコードを書いてみると、理解が深まりますね。

エンジニア：プロくん

そうだね。この例をベースに、色々なことを試してみると良いよ。他にも質問があれば教えてくれ。

まとめ

エンジニア：プロくん

DOMはJavaScriptの中でも重要な概念で、ウェブページを動的にするのに欠かせません。これからも少しずつ実践して、自分のページをより魅力的にしていこうね、グラミちゃん！

詳しく勉強する

DOMとは


JavaScriptのDOM（Document Object Model）操作は、ウェブページの要素や構造を動的に変更するための基本的な手法です。DOMは、HTML文書をツリー構造で表現し、各要素やその属性に対してJavaScriptを使用してアクセスできるようにします。以下に、初心者向けの分かりやすい説明を提供します。

DOMの基本

DOMは、HTML文書をツリー構造で表現します。このツリー構造を通じて、JavaScriptでHTML要素にアクセスし、変更することができます。例えば、以下のようなHTML文書を考えましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOMの基本</title>
</head>
<body>

    <h1 id="pageTitle">Hello, DOM!</h1>
    <p>This is a paragraph.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script src="script.js"></script>
</body>
</html>

このHTML文書に対するJavaScriptでのDOM操作を見ていきましょう。

要素の取得

JavaScriptを使用して、HTMLの要素にアクセスするには、その要素を取得する必要があります。これにはいくつかの方法があります。

IDによる取得

let pageTitle = document.getElementById("pageTitle");
console.log(pageTitle.textContent); // "Hello, DOM!"
詳しく見る


このコードは、DOM（Document Object Model）を使用してHTMLページ上の特定の要素のテキストコンテンツを取得しています。以下はコードの解説です：

  1. document.getElementById("pageTitle"): この部分は、pageTitleというIDを持つ要素をHTMLドキュメントから取得しています。これにより、その要素全体がpageTitleという変数に格納されます。
  2. console.log(pageTitle.textContent);: 取得した要素のtextContentプロパティをコンソールに出力しています。textContentプロパティは、HTML要素のテキストコンテンツを表します。したがって、この行はpageTitleに格納された要素のテキストコンテンツをコンソールに表示します。

簡単に言うと、このコードはIDが “pageTitle” の要素からテキストコンテンツを取得し、それをコンソールに表示しています。例えば、HTMLドキュメント内で以下のような要素がある場合：

<h1 id="pageTitle">Hello, DOM!</h1>

コンソールには "Hello, DOM!" と表示されます。

タグ名による取得

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 1 (この例では1つのp要素があります)
詳しく見る

このコードは、documentオブジェクトから指定されたHTML要素（この場合は <p> 要素）を取得し、それらの要素を含む NodeList を取得しています。以下はコードの解説です：

  1. document.getElementsByTagName("p"): この部分は、HTMLドキュメント内のすべての <p> 要素を取得します。これは getElementsByTagName メソッドを使用しています。取得された要素は NodeList に格納されます。
  2. console.log(paragraphs.length);: 取得した <p> 要素の NodeList の要素数をコンソールに表示しています。length プロパティは NodeList 内の要素の数を表します。

このコードが出力する結果は、取得した <p> 要素の数です。例えば、HTMLドキュメント内で以下のような要素がある場合：

<p>これは段落です。</p>

コンソールには 1 と表示されます。なぜならば、この例では <p> 要素が1つだけ存在するからです。

クラス名による取得

let items = document.getElementsByClassName("item");
console.log(items.length); // 3 (この例では3つのli要素があります)
詳しく見る

このコードは、documentオブジェクトから指定されたクラス名（この場合は “item” クラス）を持つHTML要素を取得し、それらの要素を含む NodeList を取得しています。以下はコードの解説です：

  1. document.getElementsByClassName("item"): この部分は、HTMLドキュメント内のすべてのクラスが “item” である要素を取得します。これは getElementsByClassName メソッドを使用しています。取得された要素は NodeList に格納されます。
  2. console.log(items.length);: 取得した “item” クラスを持つ要素の NodeList の要素数をコンソールに表示しています。length プロパティは NodeList 内の要素の数を表します。

このコードが出力する結果は、取得した “item” クラスを持つ要素の数です。例えば、HTMLドキュメント内で以下のような要素がある場合：

<ul>
  <li class="item">アイテム1</li>
  <li class="item">アイテム2</li>
  <li class="item">アイテム3</li>
</ul>

コンソールには 3 と表示されます。なぜならば、この例では “item” クラスを持つ <li> 要素が3つ存在するからです。

セレクタによる取得

let firstItem = document.querySelector("li");
console.log(firstItem.textContent); // "Item 1"
詳しく見る

このコードは、documentオブジェクト内から最初に見つかる指定されたCSSセレクタに一致する要素を取得し、その要素のテキストコンテンツをコンソールに表示しています。以下はコードの解説です：

  1. document.querySelector("li"): この部分は、HTMLドキュメント内で最初に見つかる <li> 要素を取得します。querySelector メソッドを使用しています。このメソッドは指定されたCSSセレクタに一致する最初の要素を取得します。
  2. console.log(firstItem.textContent);: 取得した最初の <li> 要素のテキストコンテンツをコンソールに表示しています。textContent プロパティは、HTML要素のテキストコンテンツを表します。

このコードが出力する結果は、最初に見つかる <li> 要素のテキストコンテンツです。例えば、HTMLドキュメント内で以下のような要素がある場合：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

コンソールには "Item 1" と表示されます。なぜならば、この例では最初の <li> 要素のテキストコンテンツが “Item 1” であるからです。

要素の変更

取得した要素の内容や属性を変更することができます。

pageTitle.textContent = "New Title";
詳しく見る

このコードは、pageTitleというIDを持つ要素のテキストコンテンツを “New Title” に変更するためのJavaScriptのコードです。

以下はコードの解説です：

  1. pageTitle: これはおそらくdocument.getElementById("pageTitle")で取得された要素を指しています。この要素は通常、HTMLドキュメント内で特定のID（ここでは “pageTitle”）を持つ要素に対応します。
  2. .textContent = "New Title";: 取得した要素のtextContentプロパティに新しい値 “New Title” を代入しています。これにより、要素の表示されているテキストが “New Title” に変更されます。

このようにして、JavaScriptを使用してページ上の特定の要素のテキストを動的に変更することができます。たとえば、上記のコードを実行した後、pageTitleというIDを持つ要素がHTMLドキュメント内にある場合、その要素のテキストは “New Title” に変更されます。

これにより、<h1>要素のテキストが変更されます。

要素の作成と追加

新しい要素を作成し、既存の要素に追加することもできます。

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

let body = document.body;
body.appendChild(newParagraph);
詳しく見る


このコードは、新しい <p> 要素を作成し、その要素にテキストコンテンツを設定した後、その要素を HTML ドキュメントの <body> 要素に追加するための JavaScript コードです。

以下はコードの解説です：

  1. document.createElement("p"): これは新しい <p> 要素を作成するメソッドです。新しい要素は newParagraph という変数に格納されます。
  2. newParagraph.textContent = "This is a new paragraph.";: 作成した新しい <p> 要素の textContent プロパティに “This is a new paragraph.” というテキストを設定しています。
  3. let body = document.body;: document.body を使って HTML ドキュメントの <body> 要素を取得し、それを変数 body に格納しています。
  4. body.appendChild(newParagraph);: <body> 要素に対して appendChild メソッドを使用して、新しく作成した <p> 要素を子要素として追加しています。これにより、新しい段落が HTML ドキュメントの最後に追加されます。

このコードを実行すると、HTML ドキュメント内に新しい段落が追加され、その段落に “This is a new paragraph.” というテキストが表示されます。

これにより、新しい段落が作成され、HTML文書に追加されます。

イベントハンドラの追加

DOM操作は、ユーザーのアクションに応じてイベントハンドラを追加することもサポートしています。

pageTitle.addEventListener("click", function() {
    alert("Title clicked!");
});
詳しく見る

このコードは、pageTitleというIDを持つ要素にクリックイベントリスナーを追加し、クリックされたときにアラートメッセージを表示するJavaScriptのコードです。

以下はコードの解説です：

  1. pageTitle: おそらくdocument.getElementById("pageTitle")で取得された要素を指しています。この要素は通常、HTMLドキュメント内で特定のID（ここでは “pageTitle”）を持つ要素に対応します。
  2. .addEventListener("click", function() { alert("Title clicked!"); });: addEventListener メソッドを使用して、クリックイベントが発生したときに実行されるコールバック関数を登録しています。この場合、クリックされると「Title clicked!」というアラートメッセージが表示されます。

このコードを実行すると、pageTitleというIDを持つ要素がクリックされたときにアラートメッセージが表示されるようになります。これは、クリックなどのイベントが発生した際に特定の処理を行いたい場合に使用される一般的なイベントリスナーの設定方法です。

この例では、ページのタイトルがクリックされた際にアラートが表示されます。

要素の削除

let firstItem = document.querySelector("li");
firstItem.parentNode.removeChild(firstItem);
詳しく見る

このコードは、document.querySelector("li")を使用して最初に見つかる <li> 要素を取得し、その要素を親ノード（親要素）から削除する JavaScript のコードです。

以下はコードの解説です：

  1. document.querySelector("li"): これはHTMLドキュメント内で最初に見つかる <li> 要素を取得します。querySelector メソッドを使用しています。
  2. firstItem.parentNode.removeChild(firstItem);: 取得した <li> 要素の親ノード（親要素）を parentNode プロパティを通じて取得し、その親から取得した要素を削除します。removeChild メソッドは親から子要素を削除するメソッドです。

このコードを実行すると、HTML ドキュメント内の最初に見つかる <li> 要素が削除されます。例えば、以下のような HTML ドキュメントがある場合：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

コードを実行すると、最初の <li> 要素が削除され、HTML ドキュメントは以下のようになります：

<ul>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

この例では、最初のリストアイテムが削除されます。

DOM 操作の重要性

DOM操作は、動的でインタラクティブなウェブページを作成するために不可欠です。ユーザーの操作に応じて要素を変更し、新しい要素を追加することで、ウェブアプリケーションの機能性や使いやすさを向上させることができます。JavaScriptを使用してDOMを操作することで、静的なHTMLページを動的で魅力的なコンテンツに変身させることが可能です。

初心者がDOM操作を学ぶことは、ウェブ開発において基本的かつ重要なスキルの一環です。DOMを理解し、使いこなすことで、より柔軟で動的なウェブページを構築できるようになります。

JavaScript javascrip入門
DOM
目次