Documentオブジェクトドキュメント内の要素数と、各要素の情報を取得
- ドキュメントの各要素数を取得〔lengthプロパティ〕
- ページ内のリンクを取得〔linksプロパティ〕
- ページ内の画像を取得〔imagesオブジェクト〕
- ページ内のアンカーを取得〔anchorsオブジェクト〕
- ページ内のアプレットを取得〔appletオブジェクト〕
- ページ内のEMBEDを取得〔embedsオブジェクト〕
ドキュメントの各要素数を取得
lengthプロパティ
unknown
int document.要素名.length
lengthプロパティは、documentオブジェクトのプロパティです。
ドキュメント内の各要素数を取得します。
ドキュメント内の各要素数を取得サンプルを見る
<script type="text/javascript">
document.write("Javaアプレット数 = <em>"+document.applets.length+"<\/em><br \/>");
document.write("プラグイン数 = <em>"+document.embeds.length+"<\/em><br \/>");
document.write("embed数 = <em>"+document.plugins.length+"<\/em><br \/>");
document.write("画像数 = <em>"+document.images.length+"<\/em><br \/>");
document.write("リンク数 = <em>"+document.links.length+"<\/em><br \/>");
document.write("アンカー数 = <em>"+document.anchors.length+"<\/em><br \/>");
document.write("フォーム数 = <em>"+document.forms.length+"<\/em>");
</script>
指定したフォーム内の要素数を取得サンプルを見る
<script type="text/javascript">
/* 指定したフォーム名の要素数を取得し、指定した要素をクリア */
function formClear(type){
/* フォーム内のエレメント数を取得 */
/* document.フォーム名.length */
var len=document.form2.length;
for(var i=0; i<len; i++){
if(document.form2.elements[i].type==type){
document.form2.elements[i].checked=false;
}
}
}
</script>
<form name="form2" action="#">
<p>
<input type="radio" name="r" value="A" />項目A
<input type="radio" name="r" value="B" />項目B
<input type="radio" name="r" value="C" />項目C
</p>
<p>
<input type="checkbox" value="1" />項目A
<input type="checkbox" value="2" />項目B
<input type="checkbox" value="3" />項目C
</p>
<p>
<input type="button" value="ラジオボタンのみクリア" onclick="formClear('radio')" />
<input type="button" value="チェックボックスのみクリア" onclick="formClear('checkbox')" />
</form>
ラジオボタンなど、要素に同じ名前を指定してグループ化した場合、 各要素が、指定した名前の配列に格納されるため、選択された値を取得するには、ループして調べる必要があります。
グループ化したラジオボタンの選択された値を取得サンプルを見る
<script type="text/javascript">
/* グループ化したラジオボタンで選択された値を取得する */
function getRadioLen(){
/* 'a'という名前のラジオボタンの数を取得 */
var lenA=document.form3.a.length;
/* ループして選択された項目を調べ、その値をアラート表示 */
for(var i=0; i<lenA; i++){
if(document.form3.a[i].checked==true){
alert(document.form3.elements['a'][i].value);
}
}
}
</script>
<form name="form3" action="#">
<input type="radio" name="a" value="A" />項目A
<input type="radio" name="a" value="B" checked="checked" />項目B
<input type="radio" name="a" value="C" />項目C
<input type="button" value="選択された値を取得" onclick="getRadioLen()" />
</form>
ページ内のリンクを取得
linksプロパティ
unknown
document.links
linksオブジェクトは、documentオブジェクトのプロパティです。
現在のページにあるリンク情報を取得します。
ページ内にあるリンクの数を取得するには、lengthプロパティを使用します。
document.links.length
現在のページ内にあるリンク（URL）を取得サンプルを見る
<script type="text/javascript">
/* 現在のページ内にあるリンク（URL）を取得 */
var len=document.links.length;
document.write("このページのリンク数 = "+len+"<br \/>");
/* 各リンクの情報を出力 */
for(i=0; i<len; i++){
document.write(document.links[i]+"<br \/>");
}
</script>
ページ内の画像を取得
imagesオブジェクト
unknown
document.images
imagesオブジェクトは、documentオブジェクトのプロパティです。
現在のページにある画像情報を取得します。
| プロパティ | 説明 |
|---|---|
| name | 画像の名前 |
| src | 画像のURL |
| width | 画像の幅 |
| height | 画像の高さ |
| hspace | 画像の左右余白 |
| vspace | 画像の上下余白 |
| x/offsetLeft | 画像の左オフセット |
| y/offsetTop | 画像の上オフセット |
指定した画像の情報を取得サンプルを見る
<script type="text/javascript">
with(document){
/* 現在のページの最初（0番目）にある画像の詳細情報を出力 */
write("name="+images[0].name+"<br \/>");
write("src="+images[0].src+"<br \/>");
write("width="+images[0].width+"<br \/>");
write("height="+images[0].height+"<br \/>");
write("hspace="+images[0].hspace+"<br \/>");
write("vspace="+images[0].vspace+"<br \/>");
write("x="+images[0].x+"<br \/>");
write("y="+images[0].y+"<br \/>");
}
</script>
ページ内にある画像の数を取得するには、lengthプロパティを使用します。
document.images.length
現在のページ内にある画像のURL、高さ、幅を取得サンプルを見る
<script type="text/javascript">
/* 現在のページ内にある画像を数を取得 */
var len=document.images.length;
document.write("このページの画像数 = "+len+"<br \/>");
/* 各画像の情報を出力 */
for(i=0; i<len; i++){
document.write(document.images[i].src+", ");
document.write(document.images[i].width+", ");
document.write(document.images[i].height+"<br \/>");
}
</script>
ページ内のアンカーを取得
anchorsオブジェクト
unknown
document.anchors
anchorsオブジェクトは、documentオブジェクトのプロパティです。
現在のページにあるアンカー情報を取得します。
ページ内にあるアンカーの数を取得するには、lengthプロパティを使用します。
document.anchors.length
ページ内にあるアンカーの名前を取得するには、nameプロパティを使用します。
document.anchors[n].name
現在のページ内にあるアンカーを取得サンプルを見る
<p><a name="anc1">アンカー1です（・ω・）v</a></p>
<p><a name="anc2">アンカー2です（・ω・）v</a></p>
<hr />
<script type="text/javascript">
/* 現在のページ内にあるアンカーの数を取得 */
var len=document.anchors.length;
document.write("このページのアンカー数 = "+len+"<br \/>");
/* 各アンカーの情報を出力 */
for(i=0; i<len; i++){
document.write(document.anchors[i].name+" : "+document.anchors[i].text+"<br \/>");
}
</script>
ページ内のアプレットを取得
appletオブジェクト
unknown
document.applets
appletsオブジェクトは、documentオブジェクトのプロパティです。
現在のページにあるアプレット情報を取得します。
ページ内にあるアプレットの数を取得するには、lengthプロパティを使用します。
現在のページ内にあるアプレットを取得サンプルを見る
<script type="text/javascript">
/* 現在のページ内にあるアプレットの数を取得 */
var len=document.applets.length;
document.write("このページのアプレット数 = "+len+"<br \/>");
/* 各アプレットの情報を出力 */
for(i=0; i<len; i++){
document.write(document.applets[i]+"<br \/>");
}
</script>