DOMとは3 - WEB制作の学習帳

id名と要素名を組み合わせてみる

今回のソースコードのような場合、特定のリストや表組みにアクセスするには、はじめにid要素で絞り込み、更にその中の特定の要素名を指定すると良い。

具体的な使い方を記述してみよう。

id名【solar】に含まれるli要素の数を取得して表示させる。

start31.htmlファイルに下記コードを書き加えなさい

1.DWから新規javascriptファイルを作成

function planets(){
var solarSys = document.getElementById('solar');
var solarLi = solarSys.getElementsByTagName('li');
var solarNum = solarLi.length;
alert('太陽系には' + solarNum + '個の惑星が存在します。');
}

dom01.jsとして保存

jsの解説

functionでplanetsという関数を定義。続く{ }の中が関数planetsが呼び出されたときに行われる処理となる。

1.変数【solarSys】を宣言し、getElementByIdメソッドを使用してid名でsolarにアクセス。

2.変数【sloarLi】を宣言して変数【solarSys】に対しgetElementsByTagNameメソッドを使用して要素名liを指定。これによりHTMLドキュメント中のid名でsolarに含まれるli要素だけが指定された。

3.変数【solarNum】を宣言し、【solarLi】に対しlengthプロパティでその数を習得、これでアラートで開いた際に【solarNum】を引数として使用するとその数が表示される。

これでHTMLドキュメント中から特定の要素を探し出し、それがいくつ存在するのかを書き出すことが出来た。

イベントと組み合わせてみる

最後のアラートの部分だが実際にアラートを表示させる部分をユーザーが必要に応じてその情報を表示させるようにしてみる。

start31.html内の58行目の手前に

を追加。

start31_fin.htmlとしてファイルを保存すること。

解説

HTMLのbutton要素を配置、button要素内に記述しているonclick="planets"();"がdom01.jsファイル中のfunction planets()を実行するきっかけの部分となる。onclickの部分をイベントといいonclickイベントに対応した処理であるplanets();部分をイベントハンドラという。

図解

f:id:s19biz:20150811222419j:plain