JavaScript初心者でもすぐわかる!DOMとは何か?

  • このエントリーをはてなブックマークに追加
  • Pocket
domとは?

DOMとはJavaScriptでhtmlの要素を操作するための仕組みのことだ。

JavaScriptを扱っていく上で、絶対に知らないといけない仕組みのひとつだろう。

このページではDOMの仕組みと使い方について初心者の方でもわかるように解説した。

DOMとは何か?

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。HTMLやXMLを扱うための仕組みだ。

主に以下のような特徴をもっている。

  • ツリー構造とも呼ばれる階層構造を取る
  • それぞれノードという言葉で説明される
  • WEBページとJavaScriptなどのプログラミング言語とを繋ぐ

それでは、これらの特徴について1つ1つ見ていこう。

DOMとは「階層構造を取る」

階層構造とは組織図のようなものだ。今回は高校の生徒会の組織図を例に出してみる。

DOMを簡単に説明

生徒会の組織図は、上の図にある通り生徒会長を頂点として、下に何人かの委員長と、その更に下に何人かの委員が所属して階層構造が作られている。

次に、HTMLの階層構造を見てみよう。

htmlのDOM構造

<body>を頂点として、下にいくつかの<section>と、そのさらに下にいくつかの<p>で構成されている。

これはHTMLで階層構造を構築した場合の一例だ。この階層構造を定義しているものこそがDOMと呼ばれている仕組みになる。 

DOMとは「ノードという単語を用いて表現される」

DOMとはHTMLにおける階層構造のことであるということを説明したが、DOMで必ず出てくる用語「ノード」について補足しておく。

  • ノード
  • 子ノード
  • 親ノード
  • 兄弟姉妹ノード

ノードについて

上の図にあるように、ノードとは各要素(HTMLではエレメントやタグという)自体のことを表す。

特定のノードを基準としたときに、その上にあるノードを「親:parent」ノードと表現し、その下にあるノードを「子:childまたはchildren」ノードと表現する。

また同一階層にあるノードのことを「兄弟姉妹:siblings」ノードと表現する。

例えば「そのタグの子ノード全体を取得して、その親ノードから削除する」のような使い方をする。 

DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」

それでは、実際のソースコードを使って、JavascriptからDOMを用いてHTMLを操作してみる。

今回使用するソースコードは、簡略化のためにHTMLとCSSとJavascriptが全て1つのページに書いてあるものにしてある。

これをWEBブラウザで表示すると図4のような表示になる。

画面

ID名からノードを取得して、操作する

ここでは詳しく解説しないが、ID名とはタグにつける一意の名前のことだ。CSSを勉強したときや、JavaScriptの基本で既に出てきているだろう。

今回のサンプルでは「section-1」と「section-2」がID名に該当する。

ID名を指定するメソッドは以下のように定義されている。

document.getElementById(id);

idはタグについているID名だ。

これを用いて「section-2」を取得して、その文字色を赤色に変更してみよう。

このJavascriptをブラウザで実行すると図5のようになる。

出力画面

黄色の背景に入っている(section-2およびその子ノード全体の)文字色が赤くなっているのが確認できる。 

子ノードを取得して、操作する

子ノードを指定して、操作をしてみよう。

子ノードを指定するメソッドは以下のように定義されている。

var nodeList = elementNodeReference.childNodes;

  • elementNodeReferenceは基準ノードを指している
  • nodeList は基準ノードについている子ノード全てを指す

これを用いて「section-2」の子ノードのうち2番目の子ノードの文字列を変更してみよう。

このJavascriptをブラウザで実行すると図6のようになる。

画面出力

セクション2の子ノード2の文字列が変更されているのが確認できる。

補足:baseElement.childNodes[5];は2番目のノードを取得したいのになぜ「5」なのか?

ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、一見奇妙な配列の添え字になっている。

例えば、Chromeブラウザで1番目のノードを取得したい場合、添え字は「3」になる。

親ノードを取得して、操作する

親ノードを指定して、操作をしてみよう。

親ノードを指定するメソッドは以下のように定義されている。

var parentNode = elementNodeReference.parentNode

  • elementNodeReference ... 基準ノード
  • parentNode           ... 基準ノードの親ノード

これを用いて「section-2」の親ノードを取得して、その親ノードの子ノード(つまりsection-2)全てを削除してみよう。

このJavascriptをブラウザで実行すると図7のようになる。

DOMによる出力

セクション2が全て消えているのが確認できる。

このように、DOMで定義されている「ノード」などの仕様を通じてJavascriptからHTMLを操作することができることが理解できたと思う。

これが「DOM」が「WEBページであるところのHTML」と「プログラミング言語であるところのJavascript」を繋ぐ役目を持つということだ。

まとめ

JavaScriptで登場するDOMについて簡単にご紹介してきたが、いかがだっただろうか?

階層構造であること、指定したノードやその親や子としてJavaScriptから操作ができることを理解しておこう。

  • このエントリーをはてなブックマークに追加
  • Pocket

このページの続きや関連ページは下記から一覧で確認できる。

短期間でエンジニアになる方法

・「まったくの初心者だけどエンジニアになりたい!」

・「プログラマーとして転職をしたい!」

という方はリナックスアカデミーの資料を見てみてください。短期間で未経験からエンジニアになることができるスクールとして15年間選ばれ続けてきた理由やノウハウが載った資料です。

エンジニアの入り口に立つために必要な勉強技術の最新動向本当に使えるIT資格学習に役立つ国からの奨励金などの情報が詰まっています。

無料で2,3日中にお手元にお届けします。


資料を見てみる

SNSでもご購読できます。

コメントを残す

*