javascript学习笔记--dom查询练习(三)

通过具体的节点调用
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);

        })