通过具体的节点调用
1.pranertNode 属性表示当前节点的父节点
2.periousSibling 表示当前节点的前一个兄弟节点
3.nextSibling 表示当前节点的后一个兄弟节点
基本代码片段
<div class="left">
<div >
你喜欢那个城市
<ul id="city">
<li id="bj">北京</li>
<li >上海</li>
<li>新加坡</li>
<li>首尔</li>
</ul>
</div>
<div class="chosen">
你喜欢那个游戏
<ul>
<li>象棋</li>
<li>斗地主</li>
<li>极品飞车</li>
<li>红警</li>
</ul>
</div>
<div id="phone">
你的收集操作系统是
<ul>
<li>ios</li>
<li id="android">android</li>
<li>windows</li>
<li>其他</li>
</ul>
</div>
<div class="chosen">
你的性别：
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="wman" class="a">女
</div>
<div class="chosen">
姓名：<input type="text">
</div>
</div>
<div class="right chosen" >
<div><button id="btn01">获取id=”bj“的节点</button></div>
<div></div><button id="btn02">获取li的节点</button></div>
<div></div><button id="btn03">查找name="gender所有节点</button></div>
<div></div><button id="btn04">获取id="city"下所有子节点</button></div>
<div></div><button id="btn05">返回City所有子节点</button></div>
<div></div><button id="btn06">获取Phone的第一个子节点</button></div>
<div></div><button id="btn07">获取#bj的父节点</button></div>
<div></div><button id="btn08">获取#android的前一个兄弟节点</button></div>
<div></div><button id="btn09">获取#android的后一个兄弟节点</button></div>
</div>
因为大量的按钮绑定了单击响应函数，所以创建一个可以批量管理按钮的函数, idStr, fun作为形参被传入，这样就可以不再逐一通过var btn06=document.getElementById("btn06")的代码方式去绑定btn 的ID
function myClick (idStr , fun){
var btn =document.getElementById(idStr);
btn.onclick =fun;
}
pranertNode 属性，periousSibling（periousElementSibling）属性和.nextSibling（nextElementSibling）属性
//innerHTML获取到的是元素节点，innerText获取到的是文本节点
myClick("btn07",function(){
//获取#bj的父节点
var pbj=document.getElementById("bj");
alert(pbj.parentNode.innerHTML);
alert(pbj.parentNode.innerText);
})
//ipreviousSibling获取到的是元素节点，包括空白文本， previousElementSibling不包含空白文，不兼容ie8
myClick("btn08",function(){
//获取#android的前一个兄弟节点
var sandr=document.getElementById("android");
alert(sandr.previousSibling);
alert(sandr.previousElementSibling.innerHTML);
})
myClick("btn09",function(){
//获取#android的前一个兄弟节点
var sandr=document.getElementById("android");
alert(sandr.nextSibling);
alert(sandr.nextElementSibling.innerHTML);
})