看JavaScript遇到的问题,研究了下
获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便。那么原生的JavaScript该怎么获取 上一个 或者 下一个 同胞元素呢?
JavaScript 提供了原生的API nextSibling / prevSibling;
用法:
ele.nextSibling
问题: 在现代浏览器中,nextSibing会返回下一个节点,但通常下一个节点是文本节点(产生文本节点的原因是标签之间的换行,空格等)而非元素节点。
例如:
获取li2, 使用document.querySelector("li2").nextSibling 并不能选中<li>3</li>,而是选中了文本节点。因此JavaScript提供的新的api :nextElementSibling / prevElementSibling 但是这个api不支持ie8;要兼容IE8只能手动写函数了。
function getNextSibilingsNode(ele) { var parsent = ele.parentNode;//获取元素父元素 var childrens = parsent.childNodes;//获取兄弟元素 var i = 0; for(i; i < childrens.length; i++) { if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素节点nodeType值为1,剔除文本节点 if(childrens[i+1].nodeType == 1){//防止li之间没有换行,直接选择下一个i+1 return childrens[i+1]; }if(childrens[i+2].nodeType == 1){//跳过文本节点,所以i+2 return childrens[i+2]; } else{ throw error("传入的元素出错,请检查,可能这是最后一个元素"); } } } }
这个方法测试了下,兼容ie5+了。足够用了。
prev方法 获取前一个同胞元素
function getNextSibilingsNode(ele) { var parsent = ele.parentNode;//获取元素父元素 var childrens = parsent.childNodes;//获取兄弟元素 var i = 0; for(i; i < childrens.length; i++) { if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素节点nodeType值为1,剔除文本节点 if(childrens[i-1].nodeType == 1){//防止li之间没有换行,直接选择下一个i+1 return childrens[i-1]; }if(childrens[i-2].nodeType == 1){//跳过文本节点,所以i+2 return childrens[i-2]; } else{ throw error("传入的元素出错,请检查,可能这是第一个元素"); } } } }