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>