getElementsByName()メソッド

■(構文) document.getElementsByName(name属性名)

 ・引数で指定したname属性名をもつHTML要素の集合(NodeList、ノードリスト)を返す
  NodeList、ノードリストなので.getElementsByTagName()同様に、lengthプロパティ、item()メソッドを利用して
  特定の要素を取り出せる。

 ・(注意 1)documentオブジェクトに対してのみ有効で、.getElementsByTagName()のようにdocument以外の
      オブジェクトで使えるわけではない
 ・(注意 2)プラウザにより認識するname属性がバラバラ。
    HTML4.01でname属性が設定できるのは<a、applet、button、form、frame、iframe、img、input、map、
    meta、object、param、select、textarea>要素だけとされている。
    テストしてみると、FireFox17とGoogleChrome23は<div>、<span>、<p>、<h5>のタグでもヒットする。
    IE8ではヒットしない。珍しく?、IEがHTML規格に準拠している・・・?
 ・(注意 3)そのIE8では、id属性にname属性と同じ名前があるとヒットしてしまう。ByNameのはずだが・・・?


●このページ内の全ての name="test" の要素を する

●このページ内の画像のファイル名を する

●TextBoxnに何か入力して、その入力内容を する

●チェックされているradioボタンをする

Sample
やめてヨ!いいわヨ!test3

これは Pタグ ですこれは SPANタグ です

(ここに情報を表示)

Sample Source......................................................................>>>

<script language="JavaScript"><!--
 function Test1(){
   var str = "";
   var name_test = document.getElementsByName("test");
   str += "このページ内にはname属性が「test」のHTML要素が:< " + name_test.length +
                               " >個あります。<br>そのタグ名を列挙すれば<hr>";
   for(var i=0;i<name_test.length;i++){
      str += name_test.item(i).tagName + "<br>";
   }
   document.getElementById("dv").innerHTML = str;
 }
 function Test2(){
   var str = "";
   var num = 0;
   var name_test = document.getElementsByName("test");
   for(var i=0;i<name_test.length;i++){
     if(name_test[i].tagName == "IMG"){ //小文字の「img」はエラーになる
        num ++;
        str += num + " 個目の画像は:" + name_test.item(i).src + "<br>";
     }
   }
   document.getElementById("dv").innerHTML = str;
 }
 function Test3(){
   var str = "";
   var num = 0;
   var name_test = document.getElementsByName("test");
   for(var i=0;i<name_test.length;i++){
       if(name_test[i].type == "text"){ num ++;
           str += num + " 個目のTextBoxの内容は:" + name_test.item(i).value + "<br>";
       }
   }
   document.getElementById("dv").innerHTML = str;
 }
 function Test4(){
   var str = "";
   var name_test = document.getElementsByName("test");
   for(var i=0;i<name_test.length;i++){
     if(name_test[i].type == "radio"){
        if(name_test[i].checked) str += "チェックしたラジオ・ボタンは: <b>" + name_test.item(i).value + "</b><br>";
     }
   }
   document.getElementById("dv").innerHTML = str;
  }
//--></script>
</head>

<body>
<p>●このページ内の全ての name="test"の要素を<button name="test" onclick="Test1()">取得</button>する</p>
<p>●このページ内の画像のファイル名を<button name="test" onclick="Test2()">取得</button>する</p>
<p>●TextBoxnに何か入力して、その入力内容を<button name="test" onclick="Test3()">取得</button>する</p>
<p>●チェックされているradioボタンを<button name="test" onclick="Test4()">取得</button>する</p>

<h5 class="sample" name="test">Sample</h5>
<form name="test">
  <input size="20" type="text" name="test" value="(入力して下さい)">
  <input type="radio" name="test" value="やめてヨ!">やめてヨ!
  <input type="radio" name="test" value="いいわヨ!">いいわヨ!
  <input type="checkbox" name="test">test3<br>
</form>
<p name="test">これは Pタグ です<img name="test" src="../../images/botan/jsover.gif">
   <span name="test">これは SPANタグ です</span>。<img name="test" src="../../images/anime/16.gif"></p>

<div id="dv" name="test" style="width:450px;font:12px 'Arial Black';border:1px solid green;padding-left:30px">
    (ここに情報を表示)</div>


(最終更新:12/12/27)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>