一、DOM获取元素节点的子节点

 1、getElementsByTagName()

返回当前节点的指定标签名子节点

2、childNodes

    表示当前节点的所有子节点

3、firstChild

表示当前节点的第一个子节点

4、lastChild

表示当前节点的最后一个子节点

 

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style/css.css" />
        <script type="text/javascript">
             function myQuery(idStr,func){
                 var btn=document.getElementById(idStr);
                 btn.onclick=func;
             } 
             window.onload=function(){
                 var cityEle= document.getElementById("city");
                    //1.查找#bj节点
                   /*  var btnEle=document.getElementById("btn01");
                    btnEle.onclick=function(){
                        var liEle=document.getElementById("bj");
                        alert(liEle.innerHTML);
                    } */
                
                myQuery("btn01",function(){
                    var bjEle=document.getElementById("bj");
                    alert(bjEle.innerHTML);
                });
                
                //2.查找所有li节点
                    /* var btn=document.getElementById("btn02");
                    btn.onclick=function(){
                        var liEles=document.getElementsByTagName("li");
                        for(var i=0;i<liEles.length;i++){
                            alert(liEles[i].innerHTML);
                        }
                    }; */
                
                myQuery("btn02",function(){
                    var liEles=document.getElementsByTagName("li");
                    for(var i=0;i<liEles.length;i++){
                        alert(liEles[i].innerHTML);
                    }
                });
                //3.查找name=gender的所有节点
                   /*  var btn=document.getElementById("btn03");
                    btn.onclick=function(){
                        var liEles=document.getElementsByName("gender");
                        for(var i=0;i<liEles.length;i++){
                            alert(liEles[i].value);
                        }
                    }; */
                 myQuery("btn03",function(){
                     var liEles=document.getElementsByName("gender");
                     for(var i=0;i<liEles.length;i++){
                         alert(liEles[i].value);
                     }
                 }); 
                
                //4.查找#city下所有li节点
                 myQuery("btn04",function(){
                    var liEles=cityEle.getElementsByTagName("li");
                    for(var i=0;i<liEles.length;i++){
                        alert(liEles[i].innerHTML);
                    }
                 }); 
                
                //5.返回#city的所有子节点
                myQuery("btn05",function(){
                    
                    var Eles=cityEle.childNodes;
                    for(var i=0;i<Eles.length;i++){
                        if(Eles[i].nodeType == 1){
                              alert(Eles[i].innerHTML);
                          }
                    }
                    
                });
                
                //6.返回#phone的第一个子节点
                myQuery("btn06",function(){
                    var phoneEle=document.getElementById("phone");
                    var Eles1=phoneEle.firstChild;
                    alert(Eles1.innerHTML);
                });
                
                //7.返回#bj的父节点
                myQuery("btn07",function(){
                    var bEle=document.getElementById("bj")
                    var Eles2=bEle.parentNode;
                    alert(Eles2.innerHTML);
                    
                });
                
                //8.返回#android的前一个兄弟节点
                myQuery("btn08",function(){
                    var bEl=document.getElementById("android");
                    var Eles3=bEl.previousSibling;
                    alert(Eles3.innerHTML);
                });
                
                //9.读取#username的value属性值
                 myQuery("btn09",function(){
                    var bEl=document.getElementById("username");
                    alert(bEl.value);
                });

                //10.设置#username的value属性值
                myQuery("btn10",function(){
                    var bEl=document.getElementById("username");
                    bEl.value="3lse";    
                });
                //11.返回#bj的文本值
                //第一种方法
                myQuery("btn11",function(){
                    var bEl=document.getElementById("bj");
                    alert(bEl.innnerHTML);    
                });
                //第二种方法
                myQuery("btn11",function(){
                    var bEl=document.getElementById("bj");
                    bEl.firstChild;    
                    alert(bEl.nodeValue);
                });
                
               }    
        </script>
    </head>
<body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>

                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>

                <br>
                <br>

                <p>
                    你喜欢哪款单机游戏?
                </p>

                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>

                <br />
                <br />

                <p>
                    你手机的操作系统是?
                </p>

                <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
            </div>

            <div class="inner">
                gender:
                <input type="radio" name="gender" value="male"/>
                Male
                <input type="radio" name="gender" value="female"/>
                Female
                <br>
                <br>
                name:
                <input type="text" name="name" id="username" value="abcde"/>
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">查找#bj节点</button></div>
            <div><button id="btn02">查找所有li节点</button></div>
            <div><button id="btn03">查找name=gender的所有节点</button></div>
            <div><button id="btn04">查找#city下所有li节点</button></div>
            <div><button id="btn05">返回#city的所有子节点</button></div>
            <div><button id="btn06">返回#phone的第一个子节点</button></div>
            <div><button id="btn07">返回#bj的父节点</button></div>
            <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
            <div><button id="btn09">返回#username的value属性值</button></div>
            <div><button id="btn10">设置#username的value属性值</button></div>
            <div><button id="btn11">返回#bj的文本值</button></div>
        </div>
    </body>

 

二、获取父节点和兄弟节点

 1、parentNode

            表示当前节点的父节点

2、previousSibling

     表示当前节点的前一个兄弟节点

3、nextSibling

   表示当前节点的后一个兄弟节点

三、元素节点的属性

其他属性

　　.this表示当前函数所属的对象

 checkedAllBox.onclick=function(){
         for(var i=0;i<items.length;i++){
             //this表示当前函数所属的对象,即this=checkedAllBox
             items[i].checked =this.checked;
          }
         };

 

nodeValue文本节点

   通过nodeValue的属性获取和设置文本节点的内容

innerHTML元素节点

 通过该属性获取和设置标签内部的html代码

 

三、增、删、改

 1、 创建元素节点

document.createElement(标签名)

 2、 创建文本节点

document.createTextNode(文本值)

 3、 添加子节点

父节点.appendChild(子节点)

 4、 插入节点

父节点.insertBefore(新节点,旧节点)

5、替换节点

父节点.replaceChild(新节点,旧节点)

 6、 删除节点

父节点.removeChild(子节点)

子节点.parentNode.removeChild(子节点)

7、 读写元素内部HTML代码

读取元素.innerHTML

设置元素.innerHTML = 新值