(c)2002 - 2003 Calm. All rights reserved.
Produced by CALM-WEB.COM / project AYAKA

・IE5 / IE6 / MZ1 / NS6 / NS7 is Alpha channel filter Enabled


DOMの動作に関する基礎

 さて、DOMに関する基本構造は前ページで記したとおりです。 全てのHTMLを構造化できるということは、その全てを制御できるということになります。

1:もっとも原始的な情報取得
 DOMをJavascriptで制御すると、HTMLの構造体は、全て配列情報として変数内に格納されます。

DOMテスト用HTML <1>
<Head>
  <html>
  </html>
  <Body>
    <Table>
      <Tr><Td>内容1</Td>
          <Td bgcolor="#aaaaaa">内容2</Td>
      </Tr>
      <Tr><Td>内容3</Td>
          <Td>内容4</Td>
      </Tr>
    </Table>
    <P align="right">コメント</p>
  </Body>
<Head>

 DOMにおけるもっとも原始的な情報取得の方法は、このツリー構造で構成され、格納されているDOM情報を、ツリーを追って行く形で取得するということです。
 前ページにあるとおり、DOMには親要素と子要素という絶対的な構造によって構成されています。このため、特定のタグへアクセスするためには、HTML上のそのタグが、どの親を持つかを認識し、そこから子どもを呼び出すという手法を取ることになります。

DOM表記 @ 情報取得 1

firstChild :

DOM最初の要素

childNodes[x] :

親要素に対する子要素 [配列番号]

firstChild :

親要素に対する最初の子要素

lastChild :

親要素に対する最後の子要素

 それぞれは、親要素から見た子どもへのアクセス方法の定義したプロパティです。
 よって、それぞれのタグへアクセスする場合は、ドキュメント表記を表す「document.」を前につけ、<Html>の子どもであることを示す形の表記を取ることになります。

<Body> :

document.firstChild.lastChild
document.firstChild.childNodes[1] 等
 ※補足
 DOM構造体は、HTML上の実際の記述の有無に関わらず、最初のノードに<Html>があり、その子どもの最初に<Head>、次に<Body>があるものとして認識されます。

<P> :

document.firstChild.childNodes[1].childNodes[1] 等

 <Body>のノードですが、こちらは、確かにHTML記述上の最上段ではあるのですが、実はその上に <HTML> ノードが存在しています。 つまり、<Body>は、<Html>の、子どもということになるわけです。 このため、document.firstChild、即ち、<Html>の子どもであるということを最初に記さなければなりません。
 さて、実際には、<Html>の子どもは2つ存在します。 記述の有無に関わらず、<Head> と <Body>です。 この場合、<Html>の最初の子どもは<Head>になりますので、<Body>は、2番目の子ども、即ち childNodes[1]となり、<Body>のDOMによる記述は、document.firstChild.childNodes[1]となるわけです。
 ただ、<Html>の子どもは2つしかないので、最後の子どもを表すlastChildを、childNodes[1]の代わりに使用しても、効果は変わりません。

 DOMテスト用HTMLの <P align="right">コメント</p> は、<Body>の子どもになります。 <Body>の子どもはこれ以外に<Table>がおり、この2つは同一の階層にいる子どもということになります。この為、<P>へアクセスするためには、<body>の1階層目2番目の子どもを表す記述となる、
document.firstChild.childNodes[1].childNodes[1]
の記述が必要になります。


2:DOM効率的な情報取得
 さて、実際に1:による情報取得を行うためには、この方法を遵守する限り、すべてのHTMLの構造を完全に理解している必要が出てきます。 <Body>等の固定位置に存在するノードは問題ありませんが、<Body>の子どものノードは、サイトのデザインを変えたり、タグを追加するだけで簡単に変わってしまい、これにたいしていちいちノードを再指定してやら無くてはなりません。 これが現実的な方法で無いということは明らかです。
 このため、ノードに対して、情報を検索したりジャンプするための機能が、DOMには搭載されています。

DOM表記 @ 情報取得 2

getElementsByTagName("[TAG]")[[i]] :

指定したタグ[TAG][i]番目の
ノードの呼び出し

 getElementsByTagName は、特定のタグの指定番号のノードへ直接アクセスするためのDOMメソッドで、タグの場所を特定するための明快な指示を行えるメソッドの一つです。
 例えば、DOMテスト用HTMLの中にある <P> は、下記の方法でアクセスすることが可能になります。

<P> :

document.getElementsByTagName("p")[0] 

 HTML中に<p>タグは1つですので、前から数えてゼロ番目の位置[0]にある<p>タグを呼び出ししています。


3:DOMのダイレクトな情報取得
 特定タグや特定場所といった検索以外に、ユーザーがあらかじめ設定したタグにたいして、ダイレクトにジャンプするDOMの検索用メソッドも存在しています。(実はこれが一番よく使われていたりします)
 この場合、HTML側に、ノードの情報として、IDを埋め込む必要があり、HTMLに若干の手直しが必要となりますが、あらかじめ制御対象となるタグが決められているのであれば、もっとも効果的でダイレクトな、DOM指定の方法になります。

<P Align="right" id="p_ID">

<P> :

document.getElementById('p_ID');

 getElementByIdは、あらかじめ規定されたIDの登録されているタグへ、ダイレクトへ跳ぶためのメソッドです。 こちらを用いることにより、階層構造を理解していなくても、また、階層構造が変化した場合などでも、不具合を起こすことなく動作させることが可能になります。
 ただし、この指定するIDは、一つのHTMLソースの中でユニーク(唯一無二の存在)であることが必須となります。二つ同じIDを持つタグがあった場合でも、ブラウザがエラーを返す可能性はあまりありませんが、どちらのタグの制御を行うかはブラウザ依存となってしまうため、結果として動作が不安定になってしまいます。
 またDIVに指定したIDは、完全一致の状態でしか認識することはできません。 id="id01" と、id="id02"などが存在した場合、それぞれのIDに対して両方で作用するスクリプトを、ひつとの呼び出しメソッドで行うことはできません。(for文などでまわせば可能ですが、ここでいう趣旨ではありません) 必ず別々のメソッドとして呼び出しする必要があります。

▲ M E N U

PAGE TOP
PAGE BOTTOM