新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、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; }