hakeの日記

Windows環境でプログラミングの勉強をしています。

javascript ノードの動的操作

program javascript

SELECTタグにスクリプトで子ノードとしてOPTIONタグ要素を追加して、その属性値を表示する。
追加する要素は、createElement()で作成し、appendChild()で追加、removeChiled()で削除する。
全ての子ノードの確認は、firstChild()とnextSibling()をfor文（あるいはwhile文）で使用する。子ノードを全て削除するのに、同様にfor文で試したが上手くいかなかったので、firstChild()がnullになるまでwhile文で繰り返す様にした。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>ノードの動的操作</title>
<script type="text/javascript">

	var items = [["item1","項目1"]
		, ["item2","項目2"]
		, ["item3","項目3"]
		];

	function print(str){
		var r = document.getElementById("result");
		var s = str + "<br>";
		r.innerHTML += s;
	}

	// 表示領域クリア
	function print_clr(){
		var r = document.getElementById("result");
		r.innerHTML = '';
	}

	// 子ノード情報表示
	function print_node(){
		var p = document.getElementById("sel");
		// selectタグの属性情報表示
		print("typeof Node -> " + typeof(p));
		print("nodeName  ->" + p.nodeName);
		print("nodeType  ->" + p.nodeType);
		print("nodeValue ->" + p.nodeValue);
		print("value     ->" + p.value);      // 選択されている子ノードのvalue値
		print("tagName   ->" + p.tagName);

		print("---");
		print("子ノード属性確認");
		var it;

		// 終了条件が、!itではうまくいかない。
		for(it = p.firstChild; it != null; it = it.nextSibling){
			print("---")
			if(it.selected){
				print("selected!!");
			}
			print("tagName   ->" + it.tagName);
			print("value     ->" + it.value);
			print("innerText ->" + it.innerText);
		}
	}

	// 子ノード（OPTIONタグ）追加
	function appned_node(){
		var p = document.getElementById("sel");
		var e;
		var idx;
		for(idx = 0; idx < items.length; idx++){
			// optionタグ（要素）作成
			e = document.createElement("option");
			e.value = items[idx][0];
			e.textContent = items[idx][1];
			// 子ノードとして追加
			p.appendChild(e);
		}
	}

	// 子ノード削除
	function remove_node(){
		var p = document.getElementById("sel");
		var it;
		// 子ノードを全て削除する。
		// print_node()と同様のfor文ではうまくいかない。
		while((it = p.firstChild) != null){
			p.removeChild(it);
		}
	}

	window.onload = function(){
		p = document.getElementsByName("menu")[0];
		// selectタグの属性情報表示
		print("typeof Node -> " + typeof(p));
		print("nodeName  ->" + p.nodeName);
		print("nodeType  ->" + p.nodeType);
		print("nodeValue ->" + p.nodeValue);
		print("value     ->" + p.value);      // 何も選択されていないとvalue属性がない。
		print("tagName   ->" + p.tagName);
	}

</script>
</head>
<body>
	<select name="menu" id="sel" value="セレクトメニュー"></select><br>
	<button onclick="appned_node()">子ノード追加</button>
	<button onclick="remove_node()">子ノード削除</button>
	<button onclick="print_node()" >親子ノード属性確認</button>
	<button onclick="print_clr()"  >表示クリア</button><br>
	結果：
	<div name="name" id="result"></div>
</body>
</html>

起動時

結果： 
typeof Node -> object
nodeName ->SELECT
nodeType ->1
nodeValue ->null
value ->
tagName ->SELECT

子ノード追加後

結果： 
typeof Node -> object
nodeName ->SELECT
nodeType ->1
nodeValue ->null
value ->item1
tagName ->SELECT
---
子ノード属性確認
---
selected!!
tagName ->OPTION
value ->item1
innerText ->項目1
---
tagName ->OPTION
value ->item2
innerText ->項目2
---
tagName ->OPTION
value ->item3
innerText ->項目3