Javascript操作节点

获取节点

• 根据层次关系访问节点

关键字	解释
parentNode	返回该节点的父节点
childNodes	返回该节点的所有子节点（数组）
firstChild	返回该节点的第一个子节点
lastChild	返回该节点的最后一个子节点
nextSibling	返回该节点的下一个兄弟节点
previousSibling	返回该节点的上一个兄弟节点

    //获取div
    var div= document.getElementById("test");
    //获取第一个li中的文本
    var str1=div.firstChild.firstChild.innerHTML;

节点操作

关键字	解释
getAttribute	获取节点属性
setAttribute	给节点属性赋值（可以直接修改
createElement	创建新的元素节点
appendChild	在节点的子节点末尾添加节点（在某节点中加入子节点）
insertBefore	在该节点之前插入新的节点
cloneNode	复制该节点（值为true时复制该节点及所有后代；false时只复制该节点）
removeChild	删除该节点（通过父节点调用）
replaceChild	切换节点（使用新的节点替换该节点）

    var div=document.getElementById("tu");
        //删除
        //div.removeChild(div.firstChild)


        //创建img标签[
        var img=document.createElement("img");

        //根据用户选中的单选按钮决定显示哪一种图片
        var dx=document.getElementsByName("tp");
        if(dx[0].checked){
            //修改img的src属性
            img.setAttribute("src","img/n.jpg")
        }else if(dx[1].checked){
            //修改img的src属性
            img.setAttribute("src","img/nv.jpg")
        }
        //切换
        //div.replaceChild(img,div.firstChild);
        //将img存入div中进行显示
        div.appendChild(img);

获取节点样式

• style：所有浏览器都兼容+只可以获取行内css的赋值
• getcomputedStyle：火狐和谷歌支持但是低版本IE无效(varkuan1=document.defaultView.getComputedStyle(div,null).width)
• currentStyle：火狐和谷歌不支持 但是IE兼容(放在if里面可以判断使用哪种浏览器)(var kuan2=div.currentStyle.width)

//获取样式
        var div=document.getElementById("cs");
        //弹出div的相关的css属性的赋值
        //1.使用style属性:所有浏览器都兼容+只可以获取行内css的赋值
        //alert(div.style.width);
        //2.使用getComputedStyle:火狐和谷歌支持但是低版本IE无效
        //var kuan1=document.defaultView.getComputedStyle(div,null).width;
        //alert(kuan1)
        //3.使用currentStyle:火狐和谷歌不支持  但是IE兼容
        //var kuan2=div.currentStyle.width;
        //兼容火狐、谷歌、IE的方式
        var kuan3;
        if(div.currentStyle){
            kuan3=div.currentStyle.width;
        }else{
            kuan3=document.defaultView.getComputedStyle(div,null).width;
        }
        alert(kuan3);

改变节点样式

• className：给元素添加属性（class=“a”）可以改变元素的css属性 （得事先写好css（.a{width=20px}））
• style：用节点的style属性改变元素的css属性（每次使用时只能单一的修改css的一个属性）

        function change() {
         var zi = document.getElementsByTagName("p")[0];
         //使用classname方式改变css
         zi.className="a";//等同于给p标签添加属性     class="a";

         /* zi.style.color="blue";
         zi.style.textAlign="center";
    }*/

    }
    function chu(){
        var z=document.getElementsByTagName("p")[0];
        z.className="";
    }