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"