JS加强学习-DOM学习04

7.4 获取节点的属性兼容性

firstChild：获取父元素的第一个子节点谷歌，火狐都支持的，但是获得的不一定是元素节点，IE8及之前的版本会忽略空白文本。

firstElementChild：获取父元素的第一个子标签节点，但是IE8及之前的版本不支持。

lastChild：获取父元素的最后一个子节点谷歌，火狐都支持的，但是获得的不一定是元素节点，IE8及之前的版本会忽略空白文本。

lastElementChild：获取父元素的最后一个子标签节点，但是IE8及之前的版本不支持。

像这种属性在不同浏览器显示不一样的情况还有很多，不同的浏览器上所支持的属性不同，我们可以封装在一个函数中，打开不同浏览器时自动判断并选择浏览器想匹配的属性。

/**
 * 获取当前对象上一个同级元素节点
 * @param object
 * @returns {*}
 */
function getPreviousSibling(object){
    if(object.previousElementSibling){
        return object.previousElementSibling;
    }else{
        var node = object.previousSibling;
        while(node&&node.nodeType!=1){
            node = node.previousSibling;
        }
        return node;
    }
}

/**
 * 获取当前对象下一个同级元素节点
 * @param object
 * @returns {*}
 */
function getNextSibling(object){
    if(object.nextElementSibling){
        return object.nextElementSibling;
    }else{
        var node = object.nextSibling;
        while(node&&node.nodeType!=1){
            node = node.nextSibling;
        }
        return node;
    }
}

/**
 * 获得父元素的第一个子元素节点
 * @param object
 * @returns {*}
 */
function getFirstChild(object){
    if(object.firstElementChild){
        return object.firstElementChild;
    }else{
        var node = object.firstChild;
        while(node&&node.nodeType!=1){
            node = node.nextSibling;
        }
        return node;
    }
}

/**
 * 获得父元素的最后一个子元素节点
 * @param object
 * @returns {*}
 */
function getLastChild(object){
    if(object.lastElementChild){
        return object.lastElementChild;
    }else{
        var node = object.lastChild;
        while(node&&node.nodeType!=1){
            node = node.previousSibling;
        }
        return node;
    }
}

这是几个封装的简单函数，用于匹配浏览器一些属性的。如果这些函数属于同类型的函数，如都是为了获取元素节点的，就可以将这些函数再封装下，创建对象，这些函数作为对象的方法来封装，可以更加方便以后自己维护。

7.5 克隆及追加节点

克隆节点：cloneNode(true/false)

参数为True的时候，是深度克隆，克隆当前对象的一切子节点。
参数为false的时候，是浅克隆，只会克隆标签，不包含文本信息。

追加节点：appendChild

往父级元素的最后追加节点。