オブジェクト参照

  name 参照



フォーム内の入力関連のエレメントには通常 name 属性で名前を付けますが、その name 属性による参照 です
name 属性は ドキュメント内で一意ではありませんので、「その名前を持つオブシェクトの何番目」という
参照を行います。

DOM 的には item メソッドで document.getElementsByName("field1").item(0) としますが、[0] で参照する
ほうがタイプが少なくてすみます。
( もちろん、item(0) で処理しても動作します )

IE では、name 属性を指定しておれば、同名のオブジェクトが存在しても先頭のものを id で参照できますが、
Netscape では参照できません。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	if ( document.getElementsByName("field1")[0].value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	if ( document.getElementsByName("field2").item(0).value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

	<INPUT type="text" name="field1">
	<INPUT type="text" name="field2">
	<INPUT type="submit" name="send" value="送信">

</FORM>

</BODY>
</HTML>
  



  id 参照



id は、一意な参照用の名称です。id があれば、確実に参照できます

よく失敗するのは、getElementsByName と getElementById の Elment の複数形と単数形の "s" の違いです
コードをコピーして使う時に間違うので注意してください。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	if ( document.getElementById("in1").value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	if ( document.getElementById("in2").value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	alert( document.getElementById("in3").value );

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

	<INPUT type="text" name="field1" id="in1">
	<INPUT type="text" name="field2" id="in2">
	<INPUT type="submit" name="send" value="送信" id="in3">

</FORM>


</BODY>
</HTML>
  



  tagname 参照

id や name の無い場合、タグ名だけで絞って行く参照方法です。
各エレメントのオブジェクトでは、子要素に対して getElementsByTagName が使用できます。
( id や name 参照ができるのは、document オブジェクトからのみです )

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	var Section1 = document.getElementsByTagName("TABLE")[0]
	var Section2 = document.getElementsByTagName("TABLE")[1]

	alert( Section1.getElementsByTagName("INPUT").length );
	alert( Section2.getElementsByTagName("INPUT").length );

	if ( Section1.getElementsByTagName("INPUT")[0].value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	if ( Section2.getElementsByTagName("INPUT")[0].value == '' ) {
		alert( "必須入力です   " );
		return false;
	}

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

<TABLE><TR><TD>
	<INPUT type="text">
	<INPUT type="text">
</TD></TR></TABLE>

<TABLE><TR><TD>
	<INPUT type="text">
	<INPUT type="text">
</TD></TR></TABLE>

<INPUT type="submit" name="send" value="送信">

</FORM>


</BODY>
</HTML>
  



  コンボボックスのデータ参照

クライアントの処理で、テキストフィールドの次に重要なコントロールです。
まずは、コンボボックスのデータを取得します。

テキストデータの取得方法が重要です。
obj.getElementsByTagName("OPTION")[nIndex] では、OPTION ダグの ノードオブジェクト
が取得されますが、その中のテキストは OPTION ノードに所属するのでは無く、目に見えない テキストノード
の値となります。その為、.firstChild.nodeValue という参照になっています

但し、OPTION ノードを取得するのに getElementsByTagName を使用してタグ名で取得しているので
必要なコレクションしか取得されない為、選択されたインデックスを使用して取得できます。
もし、これが childeNodes によって取得されていた場合、#text ノードが混ざってしまう為、正しく動作しません

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function ComboData() {

	var i,str="",nIndex,obj;

	str += "value値=";
	// 現在選択されている value 値
	str += document.getElementsByName("combo")[0].value;
	str += "<br>";

	str += "text値=";
	// 現在選択されている text 値
	obj = document.getElementsByName("combo")[0];
	nIndex = obj.selectedIndex;
	// タグ名で取得する為、#text ノードは存在しません
	str += obj.getElementsByTagName("OPTION")[nIndex].firstChild.nodeValue
	str += "<br>";

	document.getElementById("data").innerHTML = str;

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='ComboData()'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="実行" onClick='ComboData()'>

<br><br>
<DIV id="data"></DIV>

</BODY>
</HTML>

<SCRIPT type="text/javascript" for="window" event="onload">

	ComboData();

</SCRIPT>
  

以下は、コンボボックスにデータを追加する例です。
このあたりから、直感的に処理しようとすると、クロスブラウジングが必要になってきますが、
最終行に追加するにあたって、クロスブラウジングしない方法もあります

エレメントにテキストノードを追加するのに、document.createTextNode("文字列") で作成したものを
使用しますが、innerHTML を使用するほうが簡単で、拡張性の高いものとなります。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ−タ1.5") )
//	innerHTML のほうが簡単で拡張性が高い
//	newNode1.innerHTML = "デ−タ1.5";
	newNode1.value="1.5"

	// 最後に追加はクロスブラウジング
	if ( document.all ) {
		// SELECT から appendChild は出来ない
		targetNode.options.add( newNode2 );
		newNode2.innerText = "デ−タ9";
		newNode2.value = "9";
	}
	else {
		targetNode.appendChild( newNode2 );
		newNode2.appendChild( document.createTextNode("デ−タ9") );
		newNode2.value="9";
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>
  


以下は、クロスブラウジングしない方法です。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ−タ1.5") )
	newNode1.value="1.5"

	// クロスブラウジングしない追加処理
	// 最後のノード
	var lastNode = targetNodeList.item( targetNodeList.length - 1 );
	// 最後のノードをコピー ( true は childNodes もコピーする )
	var cloneNode = lastNode.cloneNode( true );
	// 挿入
	targetNode.insertBefore( cloneNode, lastNode );
	// 最後のノードを変更
	lastNode.firstChild.nodeValue = "デ−タ9"
	lastNode.value = "9"

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>
  

以下は、コンボボックスのリストの削除です。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function RemoveComboData() {

	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");

	var i,length = targetNodeList.length;

	for( i = length-1; i >= 0; i-- ) {
		targetNode.removeChild( targetNodeList.item( i ) );
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo">
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="削除" onClick='RemoveComboData()'>

</BODY>
</HTML>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ