第15课——元素的增删改及非行内样式的获取

元素的增删改

之前我们学了元素的创建，createElement();学了将元素添加到父元素的最后面
父元素.appendChild(要添加的元素对象);

1.将元素添加到指定元素前 insertBefore();
书写样式：      父元素.insertBefore(要添加的元素对象,插入的元素对象前);
例：     var divEle = document.createElement("div");
        var container = document.insertBefore( divEle , pEle );
        在父元素container下，pEle元素之前，添加一个div标签，元素名为divEle的元素

2.克隆元素          元素名.cloneNode    ,不写参数情况下默认只克隆该元素
    例：    var cloneEle = container.cloneNode(false); //只会克隆该元素，不会克隆子元素，和不写参数一样 
            var cloneEle = container.cloneNode(true);  //会克隆该元素以及下面的子元素
            document.body.appendChild(cloneEle);       //克隆元素和创建元素差不多，也需要添加到页面中才会被看见

3.修改（替换）元素
    书写样式:   父元素.replaceChild(需要替换的元素,被替换的元素);
    var divEle = document.createChild("div");
    container.replaceChild(divEle,pEle);        //用创建的divEle元素去替换父元素下的container元素

4.删除
    父元素.removeChild(子元素)      删除父元素下面的子元素
    子元素.remove();                删除自身

获取非行间样式方法

我们可以通过  元素.style.属性名  获取 或者 设置元素的行内样式，但是不能获取元素的非行内样式
获取元素非行内样式 
    1.非IE8及以下浏览器
        书写样式：      getComputedStyle(元素名,'元素的伪类选择器（after，before）')['属性名']
        这里如果要获取伪类选择器中的样式，就需要写上伪类选择器;如果只需要获取元素非行内样式，元素伪类选择器写null就行
    例1：    var res = getComputedStyle(container,null)['width'];//获取container元素的宽度赋值给res
            console.log(res);       //打印结果为100px，主要这里打印的是元素的样式，颜色是rbg格式
    
    例2：    var res = getComputedStyle(container,'after')['width'];//获取container元素的宽度赋值给res
            console.log(res);   //打印结果为rgb(255,0,0)
    
    2.IE8及以下浏览器
        书写样式：  元素名.currentStyle.属性名
    例1：   var res = container.currentStyle.width ;
            console.log(res);   //打印结果为100px

※※解决获取非行内样式兼容问题方法：
    --样式兼容函数
    function getStyle(ele,styleName){
        if( window.getComputedStyle ){
            return getComputedStyle(ele,null)[styleName] ;
        } else {
            return ele.currentStyle[styleName] ;
        }
    }