节点(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（表示不支持）

三、案例

 <!-- 例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>