FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Javascript・DOM】全てのテキストボックスを初期化する部品

 

 今日はDOMについて。

 

 

 

【DOMとは】

DOMとは、「doccument object model」の略で、HTMLやXMLに含まれる要素にアクセスできる仕組みことだそうです。

 

 

【DOMでできること】

DOMを利用することによって、サーバサイドではなく、クライアント側で動的なページを作成できます。

 

 

というのをよく聞くので、つかってみた。

ページの一部だけを更新できたりと、何かと便利かと。

 

【処理の流れ】

1、divで指定したIDブロックのオブジェクトをdocument.getElementByID

      により取得。

 

2、そのオブジェクトの中から、getElementsByTagNameによりinput要素を

  配列で取得(配列の中には指定したinput要素が入っている)

3、取得したinput要素の配列のオブジェクトが持つvalueプロパティにアクセスし、

  ””(空)を代入する

 

【補足1:オブジェクトのプロパティのアクセスについて】

  参考書にはオブジェクト名.valueと同様に

  オブジェクト名.setattribute(プロパティ,設定したい値)でも同じ結果が得られると記  載されていることが多いですが、今回は例外。

   

  すでにプロパティが設定されている要素に関しては、settAttributeメソッドではな  く、プロパティ(今回の場合はvalue)にアクセスした方がよいです。

 

  参考URL:https://developer.mozilla.org/ja/docs/Web/API/element.setAttribute

  参考記述「setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選            択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となりま            す。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例と           して、elt.setAttribute('value', val) の代わりに elt.value を使用します。

 

 

【補足2:id・nameからの取得】

 ■idは一意なもの()⇔nameは複数のものを取得するといったイメージらしい

 

 個人的には、CSSのページをブロック単位に分ける時に使用する

 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>

 

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }