■(構文) 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
これは 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>