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
往父级元素的最后追加节点。