uhyohyo.net

JavaScript初級者から中級者になろう

二章第二回 DOMとは

今回から、専ら「DOM」について解説していきます。DOMとは、「Document Object Model」のことで、プログラムでHTML(やXML)を扱うための仕様です。JavaScriptはこのDOMに対応していて、DOMの仕様にそってHTMLを操作することができます。

仕様書

DOMには「仕様書」があります。「こういう操作をするにはこういう方法を使って、こういう場合にはこうこう・・・」といった具体的な方法が書いてあります。ここに書いてあることがDOMの全てだといえます。

仕様書はいくつもあります。そのうち、DOM Level 1という仕様書を見てみましょう。一番基本的な部分について記述してあります。実は、これを読んで理解できればこんなサイトを見る必要はありません。しかし、なかなか簡単に理解できるものでもないです。

とりあえず、次のサンプルを見てみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p id="aaaaa">t<strong>es</strong>t</p>

    <script type="text/javascript">
      var a = document.getElementById('aaaaa');
      console.log(a);
      console.log(a.innerHTML);
    </script>
  </body>
</html>
        

まず、一番気になるのは、script要素の場所ですね。いつもなら、title要素のすぐ後、つまりhead要素内にありました。しかし、今回は一番下にあります。p要素の下なので、明らかにbody要素の中です。

別にここにあること自体は問題ありません。では、なぜここにしたかというと、HTMLは上からどんどん読み込まれていきます。そして、実はJavaScriptは、それが書いてあるscript要素が読み込まれた時点で即座に実行されます。つまり、いつものようにhead要素の中にあると、肝心のbody要素が読み込まれないうちに実行してしまい、ぜんぜん操作できないからです。

そこで、全て読み込まれた後のあの位置に置いたというわけです。

さて JavaScript DOM(JavaScriptでDOMを使ってHTMLを操作すること)では、もともとあるとても重要なオブジェクトがあります。

それはdocumentです。日本語で「文書」という意味の単語ですね。上のサンプルでも、1行目でこのオブジェクトが出てきています。そのページのHTMLを統括し、JavaScript DOMのほとんどがここから始まるという、重要なオブジェクトです。

documentは数多くのメソッドやプロパティを持ち、それらを使ってHTMLを操作するわけです。

getElementByIdメソッド

1行目では、documentが持つgetElementByIdというメソッドが使われています。大文字小文字を区別するので、注意しましょう。

このメソッドは、仕様書にReturns the Element whose id is given by elementId.とあります。

「引数で与えられたidを持つ要素を返します」という意味です。elementIdは、getElementByIdが受け取る引数の名前です。

要素が持つidとは、すなわちid属性のことです。上のサンプルでは、p要素が「aaaaa」というidを持っているのが分かります。id属性とは、それぞれ個別の要素を区別するためのものです。

そして、getElementByIdに渡した引数も'aaaaa'だったから、同じid「aaaaa」を持つp要素が返されるというわけです。

ちなみに、当てはまるidを持つ要素が2つ以上あったらどうなるのかという疑問があるかもしれませんが、そういった状況はそもそもありえません。なぜなら、HTMLの仕様書でidについてThis name must be unique in a document.とあり、すなわち「idは重複してはいけない」とあります。2つ以上当てはまる状況は、そもそも正しくないから、知った事ではないということです。

ノード

さて、getElementByIdは「要素を返す」と上で解説しました。要素とはなんでしょう。それを確かめるために、getElementByIdの次の行で返り値が代入された変数aを表示してみています。

ブラウザによって差異があるかもしれませんが、「HTMLParagraphElement」などと表示されます。Paragraphとは、段落、つまりp要素のことです。結局「p要素のオブジェクトだ」ということしか分かりません。そんなことはもうとっくに知っているのです。

次の行では、それが持つ「innerHTML」というプロパティを表示しています。プロパティを持つことから、やはりオブジェクトだったのだということが分かります。

さて、このinnerHTMLは、「t<strong>es</strong>t」などと表示されます。pタグの中身が表示されているのです。ただ、小文字で書いていたのに大文字になっていたりと、原文とは差異があります。

それでは、いよいよこのp要素のオブジェクトはいったいなんなのか解説します。

これは、ノードの一種です。ノードとは、文書(document)を構成するもののことです。

正直、文書を構成するそのほとんどがノードだと言っても過言ではないかもしれません。なんと、一口にノードといっても12種類あります。といっても、それらを全て使いこなせとは言いません。よく使うのは、せいぜい数種類です。

それでは、今回のp要素のオブジェクトはどんな種類のノードかというと、HTMLElementという種類のノードです。Elementとは「要素」のことなので、「HTML要素」ということになります。JavaScript DOMでいじるのはほとんどがHTML要素のわけですから、このHTMLElementが一番よく使う種類のノードということになります。

さて、あまり意識しませんが、さらに細かく分かれています。「p要素のオブジェクト」とか「div要素のオブジェクト」とかそういった要素の種類ごとに分かれています。今回はp要素だったので、「HTMLParagraphElement」でした。

まとめ

まとめると、document.getElementByIdで取得した要素のオブジェクトは、HTMLElementという種類のノードだということです。

このHTMLElementはJavaScript DOMでとても重要な要素です。

次回からもっと本格的にこれを使っていきます。