2009年10月02日

Dom getElementsByTagName()メソッド

スポンサード リンク

getElementsByTagName()メソッド テキストボックスの値 変更




ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

サンプルソース

<html>
<head>
<title>getElementsByTagName()メソッド テキストボックスの値 変更</title>
<script type="text/javascript">
<!--
  var flag = false;
  var msArray = new Array('521-1300','滋賀県蒲生郡安土町','織田信長');
  var msArray1 = new Array('郵便番号','住所','お名前');
function sele1(){
  var Telm = document.getElementById('Mfrm');
  var Tval = Telm.getElementsByTagName("input");
  flag = !flag; // トグルスイッチ(trueとfalseを切り替え)否定演算子
for(var i=0; i<Tval.length; i++){
  if(flag == true){Tval[i].value=msArray[i];} //条件を満たした場合の処理
  else{Tval[i].value=msArray1[i];} //条件を満たしていない場合の処理}
     }
 }
 // -->
</script>
</head>

<body>
<form>
<div id="Mfrm">
  <input type="text" value="郵便番号"><br>
  <input type="text" value="住所"><br>
  <input type="text" value="お名前"><br>
</div>
<input type="button" value="変更/戻す" onclick="sele1()">
</form>
</body>
</html> 

  getElementsByTagName()メソッドは引数で指定したタグと一致するエレメントを
NodeList (ノードを格納する DOM 特有の配列形式) の形で、取得します。
このままではページ全体の指定したタグが対象になるので
Telm = document.getElementById('Mfrm');として範囲を限定します。
Tval = Telm.getElementsByTagName("input");
   // 変数 Tval にはタグ名が "input"である全要素がNodeListとして入っています。

for(var i = 0; i<Tval.length; i++){
  // for ループ文でノードの数( Tval.length )だけ "i "を 1ずつ増加させ ; i++){
   NodeList に含まれるそれぞれのノードをTval[i]に入れます。
 NodeListのvalue値を見る。 

  Tval[i]という配列的構文を用いてi 番目の要素にアクセスします。
Tval[i].value = msArray[i];
 // Tval[i].value テキストボックスのvalue値に配列変数 msArray[i] の
  文字列を入れます
    例えば Tval[1].value = msArray[1]; なら'滋賀県蒲生郡安土町'になります。

DOM(Document Object Model)の基本
Dom getElementsByName()メソッド ラジオボタン
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックボックスのすべて選択 すべて解除
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
JavaScriptで動的にクラス名を付けます。変えます。 テーブルの行の背景色を一行おきに変えます。



posted by javaScript at 13:56 | 大阪 ☔ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。