続・お気楽 JavaScript プログラミング超入門

Document Object Model (DOM)

Web ブラウザの JavaScript 処理系は window というオブジェクトを持っていて、これを使って Web ブラウザを操作できるようになっています。この中には表示中の Web ページを表すオブジェクト Document を格納したプロパティ document があり、これを操作することで Web ページの内容を動的に書き換えることが可能になります。Document を操作するための API は W3C により標準化されていて、これを「Document Object Model (DOM)」といいます。今回は DOM の基本を簡単に説明します。

●木構造

Web ブラウザは HTML 文書を読み込むと、それを「木構造 (tree structure)」に変換して保持しています。これを「DOM ツリー」といいます。木構造は「木 (tree)」と呼ばれることもあります。まず最初に、木の基本を簡単に説明しておきましょう。

木は「節 (ノード, node)」と呼ばれる要素に対して、階層的な関係を表したものです。身近な例では、ディレクトリの階層構造が木にあたります。ディレクトリに「ルートディレクトリ」があるように、木にも「根 (ルート) 」と呼ばれる節が存在します。下図を見てください。


          図 : 一般的な木構造の一例

木を図示する場合、階層関係がはっきりわかるように、根を上にして、同じ階層にある節を並べて書きます。根からレベル 0、レベル 1 と階層を数えていき、最下層の節までの階層数を「木の高さ」といいます。木は、ある節から下の部分を切り出したものも、木としての性質を持っています。これを「部分木」といいます。

木は、ある節からほかの節に至る「経路」を考えることができます。たとえば、A から J には、A - B - G - J という経路がありますね。これは、ディレクトリやファイルを指定するときのパスと同じです。

ある節から根の方向にさかのぼるとき、途中で通っていく節を「先祖」といい、直接繋がっている節を「親」といます。これは、逆から見ると「子孫」と「子」という関係になります。子を持たない節をとくに「葉」と呼ぶことがあります。上図でいうと、G は J, K の親で、J は G の子になります。J は子を持っていないので葉となります。

子は、「左 < 右」の順番で節に格納するのが一般的です。これを「順序木」といいます。また、順番がない木を「無順序木」と呼びます。節が持っている子の数を「次数」といいます。上図の場合、A は 3 つの子 B, C, D を持っているので、A の次数は 3 となります。すべての節の次数を n に揃えた順序木を「n 分木」と呼びます。DOM ツリーの場合、次数を揃えることはできないので、一般的な「多分木」になります。

●DOM ツリーのノード

DOM ツリーでは、節のことを「ノード」といいます。ノードを表すデータ型 (クラス) は階層構造を持っています。よく使用される基本的なノードの種類を下図に示します。

  Node
  │
  ├Document 
  │
  ├Element
  │
  ├Attr
  │
  ├Text
  │
 その他いろいろ

ノードは Node を継承していると考えてください。Node にはノードで使用する基本的な機能が定義されています。Document は DOM ツリーのルートを表すノードです。具体的には html タグの情報を保持していて、プロパティ window.document で取得することができます。

Element は HTML タグの情報を保持するノードです。Element はタグの種類によりサブクラスに分かれています。基本的なところでは HTMLElement があります。たとえば、タグが div ならば HtmlDivElement になります。

Attr は「属性」を表すノードです。たとえば、<p id="...">hello, world</p> という HTML タグがあるとすると、id="..." が属性になります。Text は文書を表すノードです。HTML タグ以外のデータが Text になります。なお、空白、タブ、改行はひとつの Text ノードになります。また、Text ノードは子を持つことはできません。

●ノードの探索

それでは実際に Web ページのテキストを書き換えてみましょう。テキストを書き換える場合、対象となる Text を保持しているノードを指定しないといけません。一番簡単な方法は、HTML タグに属性 id=key を設定しておいて、メソッド getElementById(key) で探索することです。

window.document.getElementById(key) => element

getElementById(key) は属性 id の値が key のノードを探します。なお、window のプロパティ document にアクセスするときは window. を省略することができます。

簡単な例を示しましょう。

リスト : ノードの探索

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<script>
  let e1 = document.getElementById("msg1"),
      e2 = document.getElementById("msg2");
  console.log(e1);
  console.log(e2);
</script>
</body>
</html>

JavaScript のプログラムは <script> と </script> の間に記述します。DOM を操作するには DOM ツリーが必要なので、script タグは body タグの最後におくのが一般的なようです。HTML ファイルでは、h1 タグに id="msg1" を、p タグに id="msg2" を設定します。これを getElementById() で探索して、console.log() で表示します。

それでは実際に試してみましょう。

Sample01

Google Chrome の場合、Ctrl-Shift-J でコンソールが表示されます。コンソールには <h1 id="msg1">DOM 入門</h1> と <p id="msg2">hello, world!</p> が表示されているはずです。

●テキストの書き換え

テキストのアクセスはプロパティ Node.textContent を使います。このプロパティはノードおよびその子孫のテキスト内容を表していて、そこに文字列を代入すると Web ページの表示を書き換えることができます。

プロパティ Element.style の値を書き換えると、CSS スタイルを変更することができます。たとえば、element.style.color = 'red' とすると、文字の色を赤に変更することができます。

それでは実際に試してみましょう。

リスト : スタイルとテキストの変更

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<script>
  let e1 = document.getElementById("msg1"),
      e2 = document.getElementById("msg2");
  console.log(e1.style);
  e1.style.color = "red";
  console.log(e1.style);
  console.log(e2.textContent);
  e2.textContent = "hello, DOM world!!";
  console.log(e2.textContent);
</script>
</body>
</html>

Sample02

DOM 入門が赤色に、hello, world が hello, DOM world に変更されているのがわかります。

●新しいノードの追加

各ノードには子ノードを格納するコレクションがあり、プロパティ Node.childNodes で求めることができます。これを子ノードリストといいます。あるノードに新しい子ノードを追加すれば、そのノードの内容を Web ページに表示させることができます。ただし、childNodes はリードオンリーなので、子ノードを追加するメソッドが用意されています。

Element を生成するにはメソッド createElement(tagName) を、Text の生成には createTextNode(text) を使います。

document.createElement(tagName) => element
document.createTextNode(text) => textNode

メソッド Node.appendChild() はノードを子ノードリストの最後に追加します。

appendChild(childNode) => childNode

appendChild() は追加した子ノードを返します。

それでは簡単な例として、body の最後に oops! を追加してみましょう。次のリストを見てください。

リスト : 子ノードの追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<script>
  let e1 = document.createElement('p');
      e2 = document.createTextNode('oops!');
  document.body.appendChild(e1).appendChild(e2);
</script>
</body>
</html>

createElement('p') で p タグを表すノードを生成し、createTextNode('oops!') で Text ノードを生成します。body を表すノードはプロパティ document.body で取得することができます。あとは、body.appendChild(e1) で body の子ノードに e1 を追加し、e1 の子ノードに e2 を追加するだけです。

それでは実行してみましょう。

Sample03

hello, world! の下に oops! が表示されます。

●コールバック関数

Web ブラウザなどの GUI アプリケーションは、ユーザからの入力やシステムの状態変化など、あるイベントをきっかけに処理を行うイベントドリブン型のプログラムです。このようなプログラムは、一般に次のようなメインルーチンを持っています。

初期化
イベントを取得する
イベントの種類に応じて処理を振り分ける
2 に戻る

2 から 4 をイベントループと呼び、アプリケーションはユーザからの入力などのイベントを待ちます。そして、3 の処理に対応する機能を「バインディング (binding)」といいます。バインディングは、ウィンドウでイベントが発生したときに、それに応じて実行するプログラムを設定します。このプログラムを「イベントハンドラ」とか「コールバック関数」と呼びます。

一般に、イベントは非同期に発生するので、それに対応するコールバック関数も非同期に実行されることになります。JavaScript はシングルスレッドのプログラミング言語なので、複数のプログラムを同時に実行することはできません。このため、Web ブラウザや Node.js などでは、イベントが発生したら対応するコールバック関数をすぐに実行するのではなく、いったんキュー (queue, 待ち行列) に登録しておいて、あとでキューからコールバック関数を取り出して順番に処理するようになっています。

また、コールバック関数はイベントだけではなく、時間がかかる処理を実行するときにも使われます。たとえば、ファイル入出力や通信などの処理を終了まで待っていると、他の処理を実行することができなくなります。終了後に行うプログラムをコールバック関数として登録しておけば、終了を待たずに他の処理を実行することができます。

●コールバック関数の登録

DOM の場合、コールバック関数の登録はメソッド addEventListener() で行います。

target.addEventLister(event, callback)

target は単一のノードだけではなく、document や window にも指定することができます。詳細は EventTarget.addEventListener - Web API インターフェース | MDN をお読みください。

簡単な例題として、ボタンを押すと oops! を追加していくプログラムを作りましょう。次のリストを見てください。

リスト : ボタンを押す処理

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<button id="add">Click!</button>
<script>
  document.getElementById('add').addEventListener('click', () => {
    let e1 = document.createElement('p');
        e2 = document.createTextNode('oops!');
    document.body.appendChild(e1).appendChild(e2);
  });
</script>
</body>
</html>

HTML の button タグでボタンを作成します。このタグには id="add" を指定します。プログラムは、getElementById() で add のノードを求め、そこに addEventListener() でコールバック関数を追加します。マウスのクリックを表すイベントは 'click' です。アロー関数の中では、oops! を表示するためのノードを作って appendChild() で body の最後に追加するだけです。

それでは実行してみましょう。

Sample04

ボタンをクリックするたびに oops! が追加されていきます。

ジオシティーズの場合、広告の後ろに oops! が追加されることになるので、ちょっと見づらいですね。メソッド insertBefore() を使うと、指定したノードの前に新しいノードを追加することができます。

parent.insertBefore(childNode, refNode) => childNode

insertBefor() は refNode の前に childNode を挿入します。返り値は childNode です。

それでは、プログラムを修正しましょう。次のリストを見てください。

リスト : ボタンを押す処理 (2)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<button id="add">Click!</button>
<p id="msg3">----------</p>
<script>
  let e3 = document.getElementById('msg3');
  document.getElementById('add').addEventListener('click', () => {
    let e1 = document.createElement('p');
        e2 = document.createTextNode('oops!');
    document.body.insertBefore(e1, e3).appendChild(e2);
  });
</script>
</body>
</html>

ボタンの後ろに線 (----------) を表示して、その前に oops! を挿入します。線を表す p タグに属性 id="msg3" を設定し、変数 e3 にそのノードをセットします。あとは、insertBefore() で e3 の前に e1 を挿入するだけです。

それでは実際に試してみましょう。

Smaple041

ボタンを押すと線の前に oops! が追加されます。

●ノードの削除

ノードを削除するにはメソッド removeChild() を使います。

parent.removeChild(child) => child

引数 child は削除するノード、parent は child の親ノードです。返り値は削除したノードです。child が見つからない場合はエラーになります。

簡単な例題として、追加した oops! を削除する処理をプログラムしてみましょう。

リスト : ノードの削除

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<button id="add">ADD</button>
<button id="del">DEL</button>
<script>
  let node = [];
  document.getElementById('add').addEventListener('click', () => {
    let e1 = document.createElement('p');
        e2 = document.createTextNode('oops!');
    node.push(e1);
    document.body.appendChild(e1).appendChild(e2);
  });
  document.getElementById('del').addEventListener('click', () => {
    if (node.length > 0) {
      document.body.removeChild(node.pop());
    }
  });
</script>
</body>
</html>

まず、oops! を追加するボタン ADD と削除するボタン DEL をつくります。oops! を追加するとき、作成したノードを配列 node に格納します。DEL ボタンを押したとき、node にノードがあれば、それを取り出して removeChild() で削除します。

それでは実際に試してみましょう。

Sample05

ADD ボタンを押すと oops! が追加され、DEL ボタンを押すと oops! が削除されます。

ご参考までに、insertBefore() を使ったプログラムを示します。

リスト : ノードの削除 (2)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">hello, world!</p>
<button id="add">ADD</button>
<button id="del">DEL</button>
<p id="msg3">----------</p>
<script>
  let node = [],
      e3 = document.getElementById('msg3');
  document.getElementById('add').addEventListener('click', () => {
    let e1 = document.createElement('p');
        e2 = document.createTextNode('oops!');
    node.push(e1);
    document.body.insertBefore(e1, e3).appendChild(e2);
  });
  document.getElementById('del').addEventListener('click', () => {
	if (node.length > 0) {
      document.body.removeChild(node.pop());
    }
  });
</script>
</body>
</html>

Smaple051

●タイマー処理

もうひとつ簡単な例を示しましょう。関数 setTimeout() を使うと、指定した時間後に登録した関数を実行することができます。

setTimeout(callback, after [, args, ...]) => timerID

引数 callback は after msec 後に実行するコールバック関数です。callback に与える引数は after の後ろに指定することができます。

たとえば、JavaScript コンソールで次のプログラムを実行すると、1 秒後に hello, world と表示されます。

setTimeout(() => console.log("hello, world"), 1000);
40319
hello, world  <- 1 秒後に表示される

数値は setTimeout() の返り値で、タイマー処理固有の timerID を表します。この timerID を clearTimeout() に渡すと、タイマー処理を途中で中断させることもできます。

setTimeout() を使うと、現在時刻をテキストで表示する時計を簡単に作ることができます。なお、時計のようなアプリケーションはユーザからの入力がなくても動作させなくてはいけなので、単純なイベント駆動型アプリケーションでは時計を実現することはできません。このため、プログラム自身でなんらかのきっかけを作ってやる必要があります。

たとえば、現在時刻を表示する関数を show() としましょう。show() を一定間隔で実行させる場合、show() の最後で setTimeout() を使って自分自身の起動を設定すればいいのです。具体的には次のようにプログラムします。

let show = () => {
  ... 表示処理 ...
  setTimeout(show, 1000);
};

これで 1 秒後に show() が実行されます。もっとも、厳密に 1 秒ごとに show() が実行されるわけではありません。Linux 系の OS や Windows はマルチタスクで動作しているので、ほかのタスクの影響も受けるからです。まあ、今回のような時計の場合、厳密なリアルタイム処理は必要としないので、これで十分でしょう。

プログラムは次のようになります。

リスト : 現在時刻の表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg2">現在時刻</p>
<script>
  let e = document.getElementById('msg2'),
      show = () => {
        e.textContent = (new Date()).toLocaleString();
        setTimeout(show, 1000);
      };
  show();
</script>
</body>
</html>

id が msg2 の Text を書き換えて現在時刻を表示します。現在時刻は new Date() で求めることができます。これを toLocaleString() で文字列に変換して textContent にセットします。アロー関数の最後で setTimeout() で show() の起動を 1 秒後に設定したら、スクリプトの最後で show() を実行してください。これを忘れると現在時刻を表示することはできません。ご注意くださいませ。

それでは実行してみましょう。

Sample06

現在時刻が表示されているはずです。

タイマー処理は setTimeout() のほかにも setInterval() や setImmediate() があります。

setInterval(callback, msec [, args, ...])
setImmediate(callback [, args, ...])

setInterval() は callback を msec 間隔で実行します。setImmediate() は callback をすぐにキューに登録します。setInterval() は便利なのですが、コールバック関数が実行中でも、時間がきたらコールバック関数を起動する、つまりコールバック関数を多重起動してしまう問題があります。今回のように簡単な処理であれば問題ありませんが、時間がかかる処理を setInterval() で繰り返し実行する場合は注意してください。

●画像の操作

HTML の場合、画像は <img> タグで表示することができます。これに対応するノードが HTMLImageElement です。HTMLImageElement は次の方法で生成することができます。

document.createElement("img") => HTMLImageElement
new Image([width, height]) => HTMLImageElement

Image() の引数 width, height は幅と高さを指定します。省略した場合は画像の大きさと同じになります。

画像ファイルの読み込みはプロパティ src で行います。

imageElement.src = "画像ファイルのURL";

これで画像ファイルの読み込みが開始されます。このとき、プロパティ complete の値が false になり、ファイルの読み込みが正常終了する、またはエラー終了したとき、complete の値は true に戻ります。また、ファイルの読み込みが終了するとイベント load が発生し、ファイルの読み込みに失敗するとイベント error が発生します。

簡単な例を示しましょう。画像ファイルをクリックすると画像が切り替わるプログラムを作ります。

リスト : 画像の切り替え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<img id="img1"></img>
<script>
let imgs = [new Image(), new Image(), new Image()],
    done = 0, idx = 0,
    e1 = document.getElementById("img1");

imgs[0].addEventListener('load', () => {
  e1.src = imgs[0].src;
  done++;
});
imgs[1].addEventListener('load', () => done++);
imgs[2].addEventListener('load', () => done++);
imgs[0].src = "ruby_img/line1.png";
imgs[1].src = "ruby_img/line2.png";
imgs[2].src = "ruby_img/line3.png";

e1.addEventListener('click', () => {
  if (done == imgs.length) {
    if (++idx >= imgs.length) idx = 0;
    e1.src = imgs[idx].src;
  }
});
</script>
</body>
</html>

new Image() で生成したオブジェクトを配列 imgs に格納します。変数 done はロード完了した画像ファイル数をカウントします。変数 idx は imgs の添字で、現在表示している画像を表します。<img> タグで生成したノードは変数 e1 にセットします。ここではまだ画像ファイルをロードしていません。

次に、各画像ごとにイベント load のコールバック関数を設定します。この関数で done の値を +1 します。0 番目の画像がロードされたら、e1.src に imgs[0].src を代入して画像を表示するようにします。それから、画像ファイルをロードします。画像ファイルは拙作のページお気楽 Ruby/Tk 超入門で作成した画像です。あとは、画像がクリックされたら idx の値を +1 して、次の画像を表示するだけです。

それでは実際に試してみましょう。

Sample07

画像をクリックすると、次の画像に切り替わります。

●フォントの操作

フォントはプロパティ style.fontFamily で指定することができます。たとえば、Windows であれば 'MS ゴシック' や 'MS 明朝' など具体的なフォント名を指定するか、次に示すフォントスタイルを指定します。

serif (明朝系のフォント)
sans-serif (ゴシック系のフォント)
monospace (等幅フォント)
cursive (筆記体・草書体のフォント)
fantasy (装飾的なフォント)

これらのフォントスタイルは CSS で定義されていて、Web ブラウザにより適切なフォントが選択されます。なお、空白を含むフォント名を指定する場合は引用符 ( ' ) で囲んでください。

複数のフォントを指定する場合はカンマで区切ってください。

"font1, font2, font3, ..."

font1 がない場合は font2 が適用され、font2 がない場合は font3 が適用されます。

簡単な例を示しましょう。

リスト : フォントの変更

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg">hello, world</p>
<button id="b1">serif</button>
<button id="b2">sans-serif</button>
<button id="b3">monospace</button>
<script>
let e0 = document.getElementById("msg"),
    e1 = document.getElementById("b1"),
    e2 = document.getElementById("b2"),
    e3 = document.getElementById("b3");
e1.addEventListener('click', () => {
  e0.style.fontFamily = "serif";
});
e2.addEventListener('click', () => {
  e0.style.fontFamily = "sans-serif";
});
e3.addEventListener('click', () => {
  e0.style.fontFamily = "monospace";
});
</script>
</body>
</html>

Smaple08

ボタンをクリックするとフォントが切り替わります。

このほかにもフォントの大きさを設定するプロパティ fontSize, 文字を斜体にする fontStyle, フォントの重みや太さを制御する fontWeight などがあります。興味のある方は調べてみてください。

●スタイルクラスの切り替え

CSS にはスタイルクラスがありますが、プロパティ className の値を書き換えると、スタイルクラスを切り替えることができます。

簡単な例を示しましょう。

リスト : スタイルクラスの切り替え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>続・お気楽 JavaScript 超入門</title>
  <style>
      .myclass1 {
          font-size: medium;
      }
      .myclass2 {
          font-size: large; font-weight: bold; color: blue;
      }
      .myclass3 {
          font-size: xx-large; font-weight: bold; font-style: italic; color: green;
      }
  </style>
</head>
<body>
<h1 id="msg1">DOM 入門</h1>
<p id="msg">hello, world</p>
<button id="b1">style1</button>
<button id="b2">style2</button>
<button id="b3">style3</button>
<script>
let e0 = document.getElementById("msg"),
    e1 = document.getElementById("b1"),
    e2 = document.getElementById("b2"),
    e3 = document.getElementById("b3");
e1.addEventListener('click', () => {
  e0.className = "myclass1";
});
e2.addEventListener('click', () => {
  e0.className = "myclass2";
});
e3.addEventListener('click', () => {
  e0.className = "myclass3";
});
</script>
</body>
</html>

スタイルクラスを 3 つ用意して、ボタンで切り替えるだけです。実際に試してみてください。

Smaple09

JavaScript Programming