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