前段时间做项目时使用dom的nextSibling获取不到自己想要的节点,但是换成jquery的next()可以获取。当时为了项目进度,解决问题后没有去深入研究下。今天得点小空,于是去查询了下资料。
JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返回值是null。但是具体的使用中还是有差异的,如果不注意。就会引起错误
html结构中的各种空格,换行符都可能会把文本节点当做同胞元素处理。看到资料上讲Firefox 以及大多数其他的浏览器,会把节点间生成的空的空格或者换行当作文本节点,而 Internet Explorer 会忽略节点间生成的空白文本节点,但我测试时发现
全部都会把文本当做节点(火狐、360、谷歌、ie11),不知道是不是ie版本过高的问题。
如果使用dom操作的话,可以使用下面的代码:
function get_nextsibling(n)
{
var x=n.nextSibling;
if(x == null) return null;
while (x && x.nodeType!=1)
{
x=x.nextSibling;
}
return x;
}
//check if the previous sibling node is an element node
function get_previoussibling(n)
{
var x=n.previousSibling;
if(x == null) return null;
while (x && x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}