兼容firstChild和firstElementChild

1、nextSibling和nextElementSibling

顾名思义，就是找下一个节点

nextSibling在低版本浏览器中可以顺利找到下一个元素节点，而在正常浏览器中找到的包含中间空格。

nextElementSibling恰恰相反，低版本不认识，正常浏览器顺利找到下一兄弟节点。

封装nextNode():

function nextNode(obj){
　　if (!obj.nextSibling) { 
　　　　return false; 
　　};
    return obj.nextElementSibling ||(obj.nextSibling.nodeType==1?obj.nextSibling:nextNode(obj.nextSiblins));
}
nextNode(me).style.backgroundColor="purple";

 

2、previousSibling和previouElementsSibling

找上一个兄弟节点

previousSibling低版本浏览器可以找到上一个兄弟元素节点，高版本则报错。

previouElementsSibling低版本报错，高版本可以找到上一个兄弟元素节点。

封装prevNode():

function prevNode(obj){
　　if (!obj.previousSibling) { 
　　　　return false;
　　};
    return obj.previousElementSibling || (obj.previousSibling.nodeType==1?obj.previousSibling:prevNode(obj.previousSibling));
}
prevNode(me).style.backgroundColor="green";

 

3、firstChild和firstElementChild

找第一个子节点

firstChild在低版本浏览器中可以找到第一个子节点，在高版本浏览器中报错。

封装firstChild():

function firstNode(obj){
　　if (
　　　　!obj.firstChild) { 
　　　　return false; 
　　};
    return obj.firstElementChild || (obj.firstChild.nodeType==1?obj.firstChild:nextNode(obj.firstChild)) 
}
firstNode(ul).style.backgroundColor="yellowgreen";

 

4、lastChild和lastElementChild

找最后一个子节点

lastChild在低版本中可以顺利找到，高版本报错。

function lastNode(obj){
　　if (!obj.lastChild) { 
　　　　return false; 
　　};
    return obj.lastElementChild || (obj.lastChild.nodeType==1?obj.lastChild:prevNode(obj.lastChild));
}
lastNode(ul).style.backgroundColor="blue"