DOMとは
HTMLの中から特定のオブジェクトを探し出す
Document Object Modelの略で【ドム】と発音する。
HTMLドキュメント中のさまざまな要素や属性などをオブジェクトとして考えそれらの中から特定のものにアクセスするためのメソッドを使用することが出来る。
DOMではドキュメントを構成する要素や属性などを【ノード】といい、ノードの集合体を【DOMツリー】と呼ぶ。
ノードにアクセスしてさまざまな操作をするための手段を【DOM API】(Application Program Interface)という。ノードはドキュメントを構成する結節点でそれらをたどって色々なところへアクセスできる。というイメージで考えると分かりやすい。
なぜDOMを使うのか
javaScriptではDOMを利用するとHTMLドキュメント中の細かい特定の要素に対して処理を行うことができるようになる。実際にWebページを考えてみよう。
前回、DLしたファイルの中からstart31.htmlを【ブラウザ】で開きなさい。
なくした人は下記から再度DL
http://siteya19.co.jp/ftadata/150801_Jscript.zip
start31.htmlは【星の種類】と【太陽系の惑星】の2つのリストと【地球の衛星】と【火星の衛星】の2つの表組がある。確認したら【Dreamweaver】でstart31.htmlを開きなさい。div要素の中からid属性でcontentという名前の部分を見る。このソースコードを図で表すと下記のようになっている。
【星の種類】と【太陽系の惑星】のリストはどちらもli要素を使用して記述しているが、この場合はdiv要素のidがstarsに含まれるli要素かsolarに含まれるli要素であるかという違いでどちらかを見分けることが出来る。
同様に【地球の衛星】と【火星の衛星】の表組みはどちらもtable要素、tr要素、th要素、td要素を使用して記述しているがdiv要素のidがmoonに含まれるかmarsに含まれるかという違いでどちらかを見分けることが出来る。
ID名で探しだす場合
DOM APIによってドキュメント中からid名を指定してアクセスするには【getElementById】メソッドを使用する。構文としては下記のように使用する。
document.getElementById('id名');
start31.htmlではid名に【stars】を指定するとHTMLドキュメント中からdiv要素のid属性で【stars】と指定されている部分にアクセスできる。
要素名で探しだす場合
DOM APIによってドキュメント中から要素名を指定してアクセスするには【getElementsByTagName】メソッドを使用する。構文としては下記のように使用する。
document.getElementsByTagName('要素名');
start31.htmlでは要素名に【li】を指定するとこのHTMLドキュメント中の全てのli要素が対象となる。id名を指定するときにはメソッドに現れる単語が【getElement】と単数形になっているのに対し。要素名で指定するときには【getElements】と複数形になっているように要素名で指定する場合はいくつも該当するものが含まれる場合がある。
class属性で探し出す
document.getElementsByClassName('要素名');
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p id="top">第1段落</p>
<p class="contents">第2段落</p>
<p id="botton">第3段落</p>
<script>
var c = document.getElementsByClassName( 'contents' );
alert(c[0].innerHTML);
</script>
</body>
</html>
基本となるdocument4つ
