节点(node)操作

一、节点的属性

• 节点值页面中的所有内容，包括标签、属性、文本
• nodeType，节点类型：如果是标签，则是1；如果是属性。则是2；如果是文本，则是3
• nodeName，节点名字：如果是标签，则是大写的标签，如果是属性，则是小写的属性；如果是文本，则是#text
• nodeValue，节点的值：如果是标签，则是null；如果是属性，则是属性值；如果是文本，则是文本内容

    <p>我是一个p</p>
    <div style="color: yellow">我是一个div</div>
    <span>我是一个span</span>
    <script>
        //如果节点是标签
        console.log(document.getElementsByTagName("p")[0].nodeType);//1
        console.log(document.getElementsByTagName("p")[0].nodeName);//P-----大写
        console.log(document.getElementsByTagName("p")[0].nodeValue);//null
        //如果节点是属性
        console.log(document.getElementsByTagName("div")[0].attributes[0].nodeType);//2
        console.log(document.getElementsByTagName("div")[0].attributes[0].nodeName);//style-----小写
        console.log(document.getElementsByTagName("div")[0].attributes[0].nodeValue);//color: yellow-----值
        //如果节点是文本
        console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeType);//3
        console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeName);//#text
        console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeValue);//我是一个span-----值
    </script>

二、获取节点和元素（12行代码）

    <div>
        <p>我是一个p</p>
        <div>我是一个div</div>
        <ul id="uu">
            <li>第1个li</li>
            <li>第2个li</li>
            <li id="three">第3个li</li>
            <li>第4个li</li>
            <li>第5个li</li>
        </ul>
        <span>我是一个span</span>
    </div>
    <script>
        //获取标签ul
        var ulobj=document.getElementById("uu");
        //1.父级节点
        console.log(ulobj.parentNode);//div
        //2.父级元素
        console.log(ulobj.parentElement);//div
        //3.子节点
        console.log(ulobj.childNodes);//[text, li, text, li, text, li#three, text, li, text, li, text]
        //4.子元素
        console.log(ulobj.children);//[li, li, li#three, li, li]
        //5.第一个子节点
        console.log(ulobj.firstChild);//#text
        //6.第一个子元素
        console.log(ulobj.firstElementChild);//li
        //7.最后一个子节点
        console.log(ulobj.lastChild);//#text
        //8.最后一个子元素
        console.log(ulobj.lastElementChild);//li
        //9. 某一个元素的前一个兄弟节点
        console.log(document.getElementById("three").previousSibling);//#text
        //10.某一个元素的前一个兄弟元素
        console.log(document.getElementById("three").previousElementSibling);//li
        //11.某一个元素的后一个兄弟节点
        console.log(document.getElementById("three").nextSibling);//#text
        //12.某一个元素的后一个兄弟元素
        console.log(document.getElementById("three").nextElementSibling);//li
    </script>

总结：凡是获取节点的代码，谷歌和火狐浏览器得到的都是相关节点，凡是获取元素的代码，在谷歌和火狐浏览器得到的都是相关的元素，

但是，从子节点和兄弟开始，凡是获取节点的代码在IE8中得到的是元素，获取元素的相关代码，得到的是undefined（表示不支持）

兼容性代码见案例3

三、案例

 <!-- 例1:点击按钮设置div中p标签改变背景颜色 -->
    <input type="button" value="改变颜色" id="btn">
    <div id="dv">
        <span>我是一个span</span>
        <a href="#">我是一个链接</a>
        <p>我是一个p</p>
        <h5>我是一个\(^o^)/~</h5>
        <div>我是一个div</div>
    </div>
    <script>
        document.getElementById("btn").onclick=function(){
            //获取里面所有的字节点,返回一个数组
            var nodes=document.getElementById("dv").childNodes;
            //循环遍历所有的子节点
            for(var i=0;i<nodes.length;i++){
                //判断这个子节点是不是p标签
                if(nodes[i].nodeType==1&&nodes[i].nodeName=="P"){
                    nodes[i].style.backgroundColor="yellow";
                }
            }
        };
    </script>

<!-- 例2:节点操作隔行变色 -->
    <input type="button" value="变色" id="btn">
    <ul id="uu">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
    <script>
        document.getElementById("btn").onclick=function(){
            //记录有多少个li
            var count=0;
            //获取ul所有的子节点
            var nodes=document.getElementById("uu").childNodes
            console.log(nodes);
            //循环遍历这些节点
            for(var i=0;i<nodes.length;i++){
                //判断这个节点是不是li节点
                if(nodes[i].nodeType==1&&nodes[i].nodeName=="LI"){
                    nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
                    count++;//记录出现li的次数
                }
            }
        };
    </script>

   <script>
    //element.firstChild------>谷歌和火狐获取的第一个子节点
    //element.firstChild------>IE8获取的第一个子元素
    //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
    //例3-1:获取任意一个父级元素的第一个子级元素
    function getFirstElementChild(element){
        if(element.firstElementChild){//支持
            return element.firstElementChild;
        }else{
            var node=element.firstChild;//第一个子节点
            while(node&&node.nodeType!=1){//存在,并且不是标签
                node=node.nextSibling;//循环下一个节点,直到是标签,跳出循环
            }
            return node;//返回一个是标签的节点(即是元素了)
        }
    }
    //例3-2:获取任意一个父级元素的最后一个子级元素
    function getLastElementChild(element){
       if(element.lastElementChild){
           return element.lastElementChild;
       }else{
           var node=element.lastChild;
           while(node&&node.nodeType!=1){
               node=node.previousSibling;
           }
           return node;
       }
    }
    //例3-3:获取任意一个元素的后一个兄弟元素
    function getNextElementSibling(element){
        if(element.nextElementSibling){
            return element.nextElementSibling;
        }else{
            var node=element.nextSibling;
            while(node&&element.nodeType!=1){
                node=node.nextSibling;
            }
            return node;
        }
    }
    //例3-4:获取任意一个元素的前一个兄弟元素
    function getpreviousElementSibling(element){
        if(element.previousElementSibling){
            return element.previousElementSibling;
        }else{
            var node=element.previousSibling;
            while(node&&element.nodeType!=1){
                node=node.previousSibling;
            }
            return node;
        }
    }
    </script>

<!-- 例4:点击小图,切换背景图片 -->
    <div id="mask">
        <img src="1big.png" alt="" width="100">
        <img src="2big.png" alt="" width="100">
    </div>
    <script>
        //获取所有的子元素
        var imgobjs=document.getElementById("mask").children;
        //循环遍历所有的img,注册点击事件
        for(var i=0;i<imgobjs.length;i++){
            imgobjs[i].onclick=function(){
                document.body.style.backgroundImage="url("+this.src+")";//写法:如果里面是变量,内外都是双引号,如果里面是字符串就是写死了,里面是单引号
            }

        }
    </script>

<!--例5: 全选和全不选的实现  -->
    <table border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <td><input type="checkbox" name="" id="tball">全选</td>
                <th>菜名</th>
                <th>饭店</th>
            </tr>
       </thead>
       <tbody id="tb">
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>青菜</td>
                <td>某某饭店</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>白菜</td>
                <td>某某饭店</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>萝卜</td>
                <td>某某饭店</td>
            </tr>
        </tbody>
    </table>
        <script>
            //获取全选的复选框
                var ckall=document.getElementById("tball");
            //获取tbody的所有的小复选框
                var cks=document.getElementById("tb").getElementsByTagName("input");
            //点击全选复选框,获取当前的状态,然后设置tbody的所有复选框的状态
                ckall.onclick=function(){
                    for(var i=0;i<cks.length;i++){
                        cks[i].checked=this.checked;
                    }
                };
            //获取tbody的所有复选框,分别注册点击事件
                for(var i=0;i<cks.length;i++){
                    cks[i].onclick=function(){
                        var flag=true;//默认都被选中
                        //判断手否所有的复选框都选中
                        for(var j=0;j<cks.length;j++){
                            if(cks[j].checked==false){//有一个没选中
                                flag=false;
                                break;//跳出这个循环体
                            }
                        }
                        ckall.checked=flag;
                    };
                }
        </script>