DOM nextSibling 属性

前段时间做项目时使用dom的nextSibling获取不到自己想要的节点,但是换成jquery的next()可以获取。当时为了项目进度,解决问题后没有去深入研究下。今天得点小空,于是去查询了下资料。

JavaScript中的nextSiblingpreviousSibling和作用类似于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;
}


猜你喜欢

转载自blog.csdn.net/blq4411568/article/details/73731517