■ Element.previousSibling
・Elementで指定したノードの直前のノード（兄ノード）を参照する
・childNodes[1]からchildNodes[0]を参照できるのがpreviousSiblingプロパティ
■ Element.nextSibling
・Elementで指定したノードの直後のノード（弟ノード）を参照する
・childNodes[1]からchildNodes[2]を参照できるのがnextSiblingプロパティ
* 兄弟ノードがない場合は、共にnullを返します。
三郎次郎の
太郎の ･･････→
ワン三郎の
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function Brothers1(){
var watasi = document.getElementById("watasi");
var ani = watasi.previousSibling.firstChild.nodeValue;
var otouto = watasi.nextSibling.innerHTML;
document.getElementById("view").innerHTML = "<p>"
+ ani + "<br>" + otouto + "</p>"
}
function Brothers2(){
var otouto = document.getElementById("dv").firstChild.nextSibling.firstChild.nodeValue;
document.getElementById("view").innerHTML = "<p>"
+ otouto + "</p>"
}
function Brothers3(){
var ani1 = document.getElementById("watasi").previousSibling.firstChild.nodeValue;
var ani2 = document.getElementById("watasi").firstChild.nodeValue;
document.getElementById("view").innerHTML = "<p>"
+ ani1 + "<br>二番目の兄は" + ani2 + "</p>";
}
//--></script>
</head>
<body>
<div id="dv" style="width:330px;border:1px solid red;padding:5px"><span>兄は太郎</span><span id="watasi">、次郎です、</span><span>弟はワン<img src="../../images/anime/16.gif" width="32" height="38" border="0">三郎</span></div>
<p>次郎の<button onclick="Brothers1()">兄弟は？</button><br>
太郎の<button onclick="Brothers2()">弟は？</button>
･･････→<br>
ワン三郎の<button onclick="Brothers3()">オニイチャンは？</button></p>
<div id="view" style="position:absolute;top:350px;left:200px;width:150px;border:1px
solid green"></div>