TOP  »  JavaScript/DOM  »  ドキュメント内の要素数と、各要素の情報を取得

Documentオブジェクト
ドキュメント内の要素数と、各要素の情報を取得

ドキュメントの各要素数を取得
lengthプロパティ

データなし

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>

項目A 項目B 項目C

項目A 項目B 項目C

ラジオボタンなど、要素に同じ名前を指定してグループ化した場合、 各要素が、指定した名前の配列に格納されるため、選択された値を取得するには、ループして調べる必要があります。

グループ化したラジオボタンの選択された値を取得サンプルを見る
<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>
項目A  項目B  項目C 
このページの先頭へ

データなし

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オブジェクト

データなし

document.images

imagesオブジェクトは、documentオブジェクトのプロパティです。
現在のページにある画像情報を取得します。

《document.imagesオブジェクトのプロパティ》
プロパティ説明
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オブジェクト

データなし

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オブジェクト

データなし

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>
このページの先頭へ

ページ内のEMBEDを取得
embedsオブジェクト

データなし

document.embeds

embedsオブジェクトは、documentオブジェクトのプロパティです。
現在のページにあるembed要素の情報を取得します。

ページ内にあるembed要素の数を取得するには、lengthプロパティを使用します。

現在のページ内にあるEMBEDを取得サンプルを見る
<script type="text/javascript">
    /* 現在のページ内にあるembedの数を取得 */
    var len=document.embeds.length;
    document.write("このページのembed数 = "+document.embeds.length+"<br \/>");
    /* 各embedの情報を出力 */
    for(i=0; i<len; i++){
        document.write(document.embeds[i]+"<br \/>");
    }
</script>
このページの先頭へ
Q. このサイトの情報はお役に立ちましたでしょうか?

     

投票する | 投票結果を見る | 管理人に【web拍手】を送る web拍手(1行メッセージも送れます♪)

IT・インターネット・ゲーム業界に精通したキャリアコンサルタントが、求人紹介・書類添削や面接対策、年収・入社日交渉まで何かと大変な転職活動を【無料】でサポートしてくれます。