【Javascript・ＤＯＭ】全てのテキストボックスを初期化する部品
今日はDOMについて。
【ＤＯＭとは】
ＤＯＭとは、「doccument object model」の略で、ＨＴＭＬやＸＭＬに含まれる要素にアクセスできる仕組みことだそうです。
【ＤＯＭでできること】
DOMを利用することによって、サーバサイドではなく、クライアント側で動的なページを作成できます。
というのをよく聞くので、つかってみた。
ページの一部だけを更新できたりと、何かと便利かと。
【処理の流れ】
1、divで指定したＩＤブロックのオブジェクトをdocument.getElementByID
により取得。
２、そのオブジェクトの中から、getElementsByTagNameによりinput要素を
配列で取得（配列の中には指定したinput要素が入っている）
３、取得したinput要素の配列のオブジェクトが持つvalueプロパティにアクセスし、
””（空）を代入する
【補足１：オブジェクトのプロパティのアクセスについて】
参考書にはオブジェクト名.valueと同様に
オブジェクト名.setattribute(プロパティ,設定したい値)でも同じ結果が得られると記 載されていることが多いですが、今回は例外。
すでにプロパティが設定されている要素に関しては、settAttributeメソッドではな く、プロパティ（今回の場合はvalue）にアクセスした方がよいです。
参考ＵＲＬ：https://developer.mozilla.org/ja/docs/Web/API/element.setAttribute
参考記述「setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選 択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となりま す。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例と して、elt.setAttribute('value', val) の代わりに elt.value を使用します。」
【補足２：id・nameからの取得】
■idは一意なもの（）⇔nameは複数のものを取得するといったイメージらしい
個人的には、ＣＳＳのページをブロック単位に分ける時に使用する
divとidの関係に似ているような印象。
【以下参考】
<html>
<head></head>
<body>
<h2>全てのテキストボックスの値を空欄にする</h2>
<body>
<div id="inputValue"> <!--このdivブロックのidから取得-->
<h2>氏名</h2><input type="text" value="" name="box"></br>
<h2>住所</h2><input type="text" value=""name="box"></br>
<h2>電話番号</h2><input type="text" value=""name="box"></br>
<h2>趣味</h2><input type="text" value=""name="box"></br>
<h2>備考</h2><input type="text" value=""name="box"></br>
</div>
<input type="button" value="送信">
<input type="button" value="初期化"onClick="allclear()">
<script Language="JavaScript" type="text/javascript">
function allclear(){
var str=document.getElementById("inputValue");
alert(str.getElementsByTagName("input").length);
var textbox_value=str.getElementsByTagName("input");
for(i=0;i<textbox_value.length;i++){
textbox_value[i].value="";}
}
</script>
</body>
</html>
