【JavaScriptの基本】JavaScriptを扱うなら必須の知識。DOMの考え方を解説

フロントエンドの複雑な処理や、サーバーと通信して情報を送受信するなど、JavaScriptでできることはさまざまあり、Webページを動かすために必要不可欠なプログラミング言語です。

例えば、画像のスライドショーやモーダルウィンドウなど、ブラウザ上に表示されている画面に動きを付けるといったイメージが思い浮かぶのではないでしょうか。

しかし、これらの処理を行うためには、単にJavaScriptで関数が書ければ良いというわけではなく、DOMという知識が必要になります。
そこで今回は、JavaScriptを扱ううえで必須の知識であるDOMの考え方について解説していきます。

DOMとは

「DOM」とは、Document Object Modelの略で、HTMLドキュメントをプログラムから利用するためのAPIです。HTMLドキュメントの構造を表現し、ブラウザとのやり取りをして、表示結果をコントールします。
もう少しかんたんに説明すると、HTMLドキュメントの中の「何処」に変更を与えるのか指定し、任意のプログラムを実装することができるということです。

DOMの階層構造

DOMは、枝分かれした木の性質をイメージするように、「ツリー」と呼ばれる構造を持っています。その構造のことを「DOMツリー」と呼びます。実際には、HTMLドキュメントの要素をDOMツリーで表現して取り扱うイメージです。

HTMLドキュメントに書かれている要素は、DOMツリーの中では「ノード」とも呼ばれ、親ノードや子ノードなどと分別されます。

DOMツリーは以下のような構造になっています。

/* DOMツリーの構造 */

/*
document -  html  - head  -  title
                              -  meta
                              -  style
                     - body  -  h1
                              -  h2
                              -  div - h3
                                      - p
                                      - img
*/

最上位のノードはdocumentです。さらに、htmlがdocumentの子ノードとなり、headが孫ノードとなります。もし、bodyを基準に考えるとしたら、h1が子ノードで、headは兄弟（姉妹）ノードです。

これら全てを包括している最上位のノードのことを「ルートノード」と呼びます。ここではdocumentがルートノードとなります。

要素の取得

DOMの最上位にあるdocumentは、HTMLドキュメント全体を表すオブジェクトです。
Documentオブジェクトを用いることで、DOMツリーのノードつまり要素を取得することが可能できます。

Documentオブジェクトを使用したノードの取得方法は以下です。

getメソッド

・document.getElementById：指定されたID属性が持つ要素を取得
・document.getElementsByClassName：指定されたClass属性が持つすべての要素を取得
・document.getElementsByTagName：指定されたタグを持つすべての要素を取得

セレクター

・document.querySelector：指定されたセレクターに合致する文書中のはじめの要素を取得
・document.querySelectorAll：指定されたセレクターに合致する文書中のすべての要素を取得

DOMの操作

ここまでで要素の取得方法が分かったので、実際にDOMの操作をしていきます。

ここでは、それぞれの要素が持っているinnerHTMLとtextContentというプロパティも使用します。innerHTMLとtextContentは、要素内のテキストにアクセスすることができます。

getメソッドを使用した場合

HTML

    <h1>JavaScriptを扱うなら必須の知識。DOMの考え方を解説</h1>
    <h2>要素の取得</h2>
    <h2>DOMの操作</h2>
    <p id="text"></p>

JavaScript

const getText  = document.getElementById('text');
getText.textContent = 'DOMの操作中です';

実装結果
JavaScript DOM

HTMLの「」をみると、テキストは空です。
JavaScriptの「document.getElementById(‘text’)」により、textというid属性を持つ要素の取得ができます。また、「textContent」というプロパティを用いることで、任意のテキストを出力することが可能です。

その結果、「DOMの操作中です」というテキストが表示されています。
ここでは分かりやすいようにcssに「#text {color: red; }」と指定し、赤文字にしています。

セレクターを使用した場合

HTML

    <button>ボタンです</button>
    <button>ボタンです</button>
    <button>ボタンです</button>

JavaScript

const getButton  = document.querySelector('button');
getButton.innerHTML = '1番目のボタンです';

実行結果
JavaScript DOM

HTMLのbuttonタグにはすべて「ボタンです」というテキストが入っています。
JavaScriptの「document.querySelector(‘button’)」により、HTMLの中のすべてのbuttonタグの中から、はじめの要素のみ取得しています。
また、「innerHTML」というプロパティを用いることで、任意のテキストを出力することが可能です。

その結果、はじめのボタンのみ、「1番目のボタンです」というテキストが表示されています。

innerHTMLとtextContentの違い

innerHTMLとtextContentの違いが少し分かりにくいかもしれないので、補足します。
innerHTMLは、HTMLを解釈してテキストを出力するのに対し、textContentは、HTMLを解釈せずにそのままテキストを出力します。

例をみてみましょう。

HTML

    <p id="p1"></p>
    <p id="p2"></p>

JavaScript

const p1  = document.getElementById('p1');
p1.innerHTML = '<innerHTMLです';

const p2  = document.getElementById('p2');
p2.textContent = '<textContentです>';

実装結果
JavaScript DOM

innerHTMLは、HTMLを解釈するため、タグの機能を反映します。そのため、「innerHTMLです」という太字のテキストが表示されています。
一方、textContentはHTMLを解釈しないため、タグ自体を文字列として認識し、「textContentです」と、すべてテキスト表示されるのです。