実は HTML内の全てのタグ要素は、documentのallという配列で管理されています。
一般に配列とは、番号で管理できる並んだデータのことをいいます。
アクセスする場合は配列の名前の直後に
[ と ] の間で
何番目か？という番号を指定して一つ一つをアクセスします。
この番号のことを、添え字またはインデックスと呼びます。
documentのallの場合、
HTMLの全ての要素が記述される順番で、0から番号がつけられており、その番号でアクセスできます。
次のサンプルでは、「要素確認」ボタンをクリックすると、変数idxに記憶される番号の要素を、
一旦 変数objに記憶して、その内部のデータとそのタグ名をalertで表示させています。
そして、「要素確認」ボタンクリックごとに、
インデックスを記憶する変数idxを増やしているので、
配列内の各要素を順番に確認できます。
タグ要素の名前は、DOMの仕様により 統一的にtagNameのプロパティで取得できるので、
それを表示用の文字列変数msgへ＋で追加連結しています。
このサンプルは
で、確認できます。
なお、この配列の要素の個数を表す表現がdocument.all.length
です。
よってここまで idxが増えると、
配列で使える番号の範囲を超えてしまい、それでアクセスすると実行エラーが起きます。
そこで、その数に達したらidxを0に戻す細工を、ifの構造で制御しています。
<html lang="ja"><head><title>全ての要素を順番に表示</title>
<script type="text/javascript"><!--
var idx=0;
function sub(){
var obj = document.all[idx];
var msg="all配列で"+idx+"番目の配列要素\n『"+obj.innerHTML+"』";
msg=msg+"\n\nこの要素のタグはこれです⇒"+obj.tagName;
alert(msg);
idx = idx + 1;
if(idx >= document.all.length){
alert("先頭インデックスに戻ります。")
idx=0;
}
}
// --></script></head><body>
<div><h1>見出し</h1>
<p><img src="img/n07.gif"><a herf="ex/n4001.htm">リンク</a><span>これ</span></p>
<table><tr><td>DATA1</td><tr></table>
<ul><li>AAA</li><li>BBB</li></ul>
<form name="f1"><input type="button"value="要素確認"onclick="sub()"></form>
</div>
</body></html>
タグ要素の内容をHTMLタグの表現を含んだ全ての文字列を得るプロパティとしてinnerHTMLが 使えます。
また
開始タグと終了タグで囲まれたテキストだけを取得する場合には
innerTextが使えます。
これらは W3C (World Wide Web Consortium) 標準のプロパティではありませんが、実験のために使ってみました。
これらは Microsoft Windows Internet Explorer 独自の仕様でしたが Safari、Operaなど多くのブラウザで使えるようです。
しかしFirefoxでは、innerTextの代わりにtextContentを使います。よって
個人的にinnerTextの使用を避けています。
次のラジオボタンで、これらを切り替えて実験できます。確認してみましょう。
innerHTMLを使う
innerTextを使う
なお実は、document.all プロパティも非標準になっています。また 保守が難しいこともあり、使われることは少なくなっています。
document.allは、HTMLの全ての要素が順番に並ぶ
配列でしたが、
document.に続くimages
や
links
や
anchors
や
forms
は、それぞれimg要素や
href属性があるa要素や
name属性があるa要素や
form要素と、
それぞれの要素に限定したタグ要素の配列です。
それぞれの要素は、Imageオブジェクト、
Linkオブジェクト、
Anchorオブジェクト、
Formオブジェクトと呼ばれます。
例えば、HTMLの中で先頭から３番目の画像の幅を100に変更するのであれば
document.images[2].width=100; の表現ができるというわけです。
[0]が１番目、[1]が２番目、[2]が３番目と数えています。）
また elementsは、formの中のinput要素を順番に並べた配列です。
例えば HTMLの中で先頭から２番目のform内で、３番目のinputのvalueを"abc"に変更するのであれば
document.forms[1].elements[2].value="abc"; の表現ができるというわけです。
なお ■■■■では、上記説明の配列を使った表現にしてください。
（問題が画像サイズを変更する場合は、width="20"の指定を使ってください）
下の問題では ボタンのどれかに、上記で示した配列の使い方で 要素をアクセスするsubメソッドを定義する例の問題です。
まずは、このボタンと その操作を見きわめてください。