前段时间做项目时使用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; }