为取到正确的元素节点封装的next和first函数

Dom节点有很多种，他们分别有不同的nodeType和nodeValue

元素节点的nodeValue为空，nodeType为1，例如 <p></p>

文本节点nodeValue为文本里的值 ，nodeType为3，111 空白 text

注释节点 nodeType为 8

而获取节点的时候我们通常希望获取到的是元素节点，而不希望获取到空格

firstchild 在ie里取到的第一个是元素节点，不包括文本节点
crome里取到的是空格

还有另一个属性可以获取第一个孩子节点

firstElementchild 在crome里 取到第一个元素节点 但是ie不兼容

因此为了能够获取到元素节点，而不是空格，我封装了一个next函数

html结构

<div id='div1'>
     <h1 id='h1'>2222222</h1>
     <p>111111</p>
</div>

var oDiv=document.getElementById('div1');
 var oH1=document.getElementById('h1');

js封装next取到第一个兄弟节点

 function next(elem){
    do{
        elem=elem.nextSibling;
    }while(elem&&elem.nodeType!=1)
    return elem;
 }
console.log(next(oH1));

循环判断nodeType的值是否为元素节点的值1，没找到值为1就一直while循环选择do while 是因为可能第一个元素就满足
假设上面的元素的下一个兄弟不存在（p）不存在，elem.nextSibling为空，这时再去elem.nodeType会报错，因此要在while里先判断elem是否不为空，为空就不执行elem.nodeType，就不会报错

js封装first取到第一个孩子节点

function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1?elem:next(elem);
}
console.log(first(oDiv));

还是一样先判断elem是否存在，避免出现错误，并且调用刚封装的next函数

通过这两个函数，就能够避免取到空格的情况啦~~~

http://www.baidu.com