DOMとは

テキスト目次 > JavaScriptの基礎 > DOMとは

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

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

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

目次

DOMとは何か？

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になります。プログラムからHTMLやXMLを自由に操作するための仕組みです。

例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があります、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ないです。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMです。

DOMは以下のような特徴をもっています。

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

それでは、DOMの特徴について1つ1つ詳細に見ていきましょう。

DOMは「階層構造」を取る

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

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

次に、HTMLの階層構造を見てみましょう。

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

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

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

DOMで必ず出てくる用語「ノード」について補足しておきます。

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

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

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

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

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

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

それでは、実際のソースコードを見てみましょう。DOMに沿った記述を行ったHTMLファイルをJavaScriptから操作してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>
    <style>
        #section-1 {
            background-color: #C8E6C9;
        }
        #section-2 {
            background-color: #FFF9C4;
        }
    </style>
</head>
<body>
<section id="section-1">
    <h2>セクション1</h2>
    <p>子ノード1</p>
    <p>子ノード2</p>
    <p>子ノード3</p>
</section>
<section id="section-2">
    <h2>セクション2</h2>
    <p>子ノード1</p>
    <p>子ノード2</p>
    <p>子ノード3</p>
</section>
</body>
<script>
    // ここにJavaScriptコードを書いていく
    // ...
</script>
</html>
HTML

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

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

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

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

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

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

document.getElementById(id);
JavaScript

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

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

document.getElementById('section-2').style.color = 'red';
JavaScript

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

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

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

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

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

var nodeList = elementNodeReference.childNodes;
JavaScript
  • elementNodeReferenceは基準ノードを指している
  • nodeList は基準ノードについている子ノード全てを指す

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

var baseElement = document.getElementById('section-2');
var section2node2 = baseElement.childNodes[5];
section2node2.innerHTML = '子ノード2は変更されました';
JavaScript

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

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

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

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

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

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

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

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

var parentNode = elementNodeReference.parentNode
JavaScript
  • elementNodeReference … 基準ノード
  • parentNode           … 基準ノードの親ノード

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

var baseElement = document.getElementById('section-2');
var parentNode = baseElement.parentNode;
parentNode.removeChild(baseElement);
JavaScript

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

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

このように、DOMに沿った書き方で定義された「ノード」を通じてJavaScriptからHTMLを操作することができることが理解できたと思います。

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

チェックテスト

チェックテストを確認する

下記コードにおいて、下記挙動を行うコードをdiscordで共有ください。

  • id名「article」要素を取得する
  • 取得した要素を変数「article」に代入する
  • 変数articleをコンソールで出力する
<div id="container">
 <div id="header">
   <div id="logo">ロゴ</div>
   <div id="menu">
     <ul>
       <li><a href="#">ホーム</a></li>
       <li><a href="#">お知らせ</a></li>
       <li><a href="#">お問い合わせ</a></li>
     </ul>
   </div>
 </div>
 <div id="main">
   <div id="article">
     <h2>記事タイトル</h2>
     <p>記事の内容</p>
   </div>
   <div id="sidebar">
     <h3>サイドバー</h3>
     <ul>
       <li><a href="#">リンク1</a></li>
       <li><a href="#">リンク2</a></li>
       <li><a href="#">リンク3</a></li>
     </ul>
   </div>
 </div>
 <div id="footer">
   <div id="contact">
     <p>お問い合わせはこちらから</p>
     <a href="#">お問い合わせフォーム</a>
   </div>
 </div>
</div>


<script>
こちらにコードを挿入します
</script>
HTML

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP