オブジェクト参照


  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>
  




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[htmlDom]
CCBot/2.0 (https://commoncrawl.org/faq/)
18/12/15 17:17:41
InfoBoard Version 1.00 : Language=Perl

BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube