JavaScript入門講座

Home > ノードウォーキングによるノードの取得

ノードウォーキングによるノードの取得

ノードウォーキングでは指定したノードを起点としてノードツリー配下の子要素など相対的な位置関係により取得します。

childNodesプロパティ

子ノードの情報を取得するにはまず、getDocumentByIdメソッドにより親ノードを取得し、childNodesプロパティにより子ノードを取得します。

var obj = getElementById('ID名');
var cn = obj.childNodes;

以下のサンプルではselectのIDを指定してgetDocumentByIdメソッドより親ノードを取得してchildNodesプロパティにより子ノードのoptionを取得して表示しています。

<script type="text/javascript">
function btn_click(){

	var list = [];
	var obj = document.getElementById('blood_type');
	var child = obj.childNodes;
	for (var i = 0 ; i < child.length ; i++){		
		if( child.item(i).nodeType == 1 ){
			list.push(child.item(i).value);
		}
	}
	window.alert(list.join('\n'));

}
</script>

<form action="#">
<select id="blood_type" name="blood_type">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select>
<input type="button" value="実行" onclick='btn_click()'>
</form>

firstChild/nextSiblingプロパティ

firstChild/nextSiblingプロパティを利用すれば先頭の子ノードから順番に要素を取得することができます。

var obj = getElementById('ID名');
var cn = obj.firstChild;
while(cn){
	//取得処理
	cn = nextSibling;
}

以下のサンプルではselectのIDを指定してgetDocumentByIdメソッドより親ノードを取得してfirstChildプロパティにより先頭の子ノードから順番にoptionを取得してして表示しています。

<script type="text/javascript">
function btn_click(){

	var list = [];
	var obj = document.getElementById('blood_type');
	var child = obj.firstChild;
	while(child){
		if( child.nodeType == 1 ){
			list.push(child.value);
		}
		child = child.nextSibling;
	}	
	
	window.alert(list.join('\n'));

}
</script>

<form action="#">
<select id="blood_type" name="blood_type">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select>
<input type="button" value="実行" onclick='btn_click()'>
</form>

lastChild/previousSiblingプロパティ

lastChild/previousSiblingプロパティを利用すれば最終の子ノードから降順に要素を取得することができます。

var obj = getElementById('ID名');
var cn = obj.lastChild;
while(cn){
	//取得処理
	cn = previousSibling;
}

以下のサンプルではselectのIDを指定してgetDocumentByIdメソッドより親ノードを取得してlastChildプロパティにより最終の子ノードから順番にoptionを取得してして表示しています。

<script type="text/javascript">
function btn_click(){

	var list = [];
	var obj = document.getElementById('blood_type');
	var child = obj.lastChild;
	while(child){
		if( child.nodeType == 1 ){
			list.push(child.value);
		}
		child = previous.nextSibling;
	}	
	
	window.alert(list.join('\n'));

}
</script>

<form action="#">
<select id="blood_type" name="blood_type">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select>
<input type="button" value="実行" onclick='btn_click()'>
</form>