@ JavaScript

DOM

DOM とは

ドキュメントをオブジェクトとして扱うというのはどういうことでしょうか。まずは具体例を確認しましょう。以下の HTML を DOM ツリーで表わすと下記の「HTML 構造図」のようになります。

example.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link  rel="stylesheet" href="sample01.css">
<script src="1_01.js"></script>
</head>

<body>
  <div id="whatsnew">
    <header>
      <h1><img src="img/whatsnew.png" alt="最新情報" width="398" height="25"></h1>
    </header>
    <section>
      <h2 id="news1Title">2050年04月09日<br>
        無料イベント「INSPIRATION SCENE Summer Jam」</h2>
      <p id="news1Paragraph">Adobe Photoshop のチュートリアル「Inspiration Scene」(CD-ROM)を制作した5人のトップクリエイター。・・・ご来場特典としてINSPIRATION SCENE Summer Jam限定Tシャツをプレゼント予定です。</p>
    </section>
    <section>
      <h2 id="news2Title">2050年03月19日<br>A.e.Suck氏のアニメーション講座がDVDになりました</h2>
      <p id="news2Paragraph">「ROKUNANA WORKSHOP OF MEDIA DESIGN A.e.Suckのアニメーション講座 絵コンテ編、作画編」 DVD発売開始しました。・・・映像作品として新たに収録しています。</p>
    </section>
  </div>
</body>

</html>

HTML 構造図

DOM ツリー図

DOM ツリー図のツリーで表された1つ1つの要素をオブジェクトとして扱うのが DOM です。これらのドキュメントの一部を表すオブジェクトのことをノードといいます。このノードのプロパティを取得したり、書き換えたりすることでドキュメントを操作します。これにより、ドキュメントをテキストとして扱うのに比べ、高度な操作や処理がしやすくなります。また、ノードへの操作は現在表示されてる文書への直接の操作となり、その場で表示に反映されます。

DOM ツリー図

ノード

ノードにはいくつか種類があり、持っているプロパティやメソッドが異なります。代表的なノードには以下のようなものがあります。

  • 要素ノード
  • テキストノード
  • 属性ノード

要素ノード

HTML で<body>や<p>、<h1>などは要素ノード(Element Nodes)にあたります。HTML の各要素によって指定できる属性が違うように、プロパティに関しても各要素に応じて異なります。各要素でよく使われるプロパティ、メソッドは以下のとおりです。

プロパティ 説明 内容
tagName 要素の名前 文字列
id id 属性 文字列
className class の属性値 文字列
parentNode 親ノード ノード
childNodes 子ノードリスト ノードリスト
firstChild 最初の子ノード ノード
lastChild 最後の子ノード ノード
previousSibling 直前のノード ノード
nextSibling 最後のノード ノード
メソッド(引数) 説明 実行後に返す値
getAttribute(属性の名前) 属性名から値を取得する 文字列
setAttribute 属性名と値を設定する(属性の名前,設定する値) なし
removeAttribute 属性名から属性を取り除く(属性の名前) なし
getElementsByTagName(要素名) 指定した要素名を持つ子孫要素のノードリストを取得する ノードリスト
insertBefore(新しいノード,基準子ノード) 基準子ノードの前に新しいノードを追加する 挿入されたノード
replaceChild(新しノード,元の子ノード) 元の子ノードを新しいノードに差し替える 置き換えられたノード
removeChild(削除するノード) 指定した子ノードを削除する 取り除かれたノード
appendChild(新しいノード) 新しい子ノードを追加する 追加されたノード
cloneNode(子ノードを複製するかの真偽値) 実行したノードを複製する 複製されたノード

テキストノード

HTML 文書内のテキスト部分、たとえば要素の中の見出しテキストなどはテキストノードになります。HTML を見やすくするために入れているインデントや改行に関してもテキストノードとして扱われます。

プロパティ 説明 内容
nodeValue テキストノードの内容 文字列
parentNode 親ノード ノード
メソッド(引数) 説明 実行後に返す値
cloneNode(子ノードを複製するかの真偽値) 実行したノードを複製する 複製されたノード

属性ノード

要素につけられている属性もそれぞれノードになります。これを属性ノードといいます。getAttributeNode() などの命令により取得することができます。しかし、要素ノードにも属性を操作するメソッドが用意されているため、直接属性ノードを操作する機会は少ないでしょう。

ノードリスト

ノード以外にはノードリストというオブジェクトがあります。これは複数のノードをまとめて扱うためのオブジェクトです。つぎのようなプロパティとメソッドが用意されています。

プロパティ 説明 内容
length ノードの数 数字
メソッド(引数) 説明 実行後に返す値
item(インデックス) インデックス番目のノードを取得する ノード

document オブジェクト

DOM ノード作成に関するメソッドは、document オブジェクトを中心に用意されています。

プロパティ 説明 内容
document.getElement ルート要素(HTML では html 要素) 要素ノード
メソッド(引数) 説明 実行後に返す値
createElement(要素名) 指定した要素ノードを作る 要素ノード
createTextNode(内容のテキスト) インデックス番目のノードを取得する テキストノード
getElementById(id 名) 指定した id を持つ要素ノードを取得する 要素ノード
getElementsByTagName(要素名) 指定した要素名を持つ子要素のノードリストを取得する ノードリスト