在FireFox中包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题。因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。当上一节点或者是下一节点为文本节点时,就继续寻找,直到找到下一个元素节点。以下代码仅供参考,在fireFox中测试通过:

        //下一个兄弟节点
function nextSibling(node) {
var tempLast = node.parentNode.lastChild;
if (node == tempLast) return null;
var tempObj = node.nextSibling;
while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType==1)? tempObj:null;
}
//前一个兄弟节点
function prevSibling(node) {
var tempFirst = node.parentNode.firstChild;
if (node == tempFirst) return null;
var tempObj = node.previousSibling;
while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
tempObj = tempObj.previousSibling;
}
return (tempObj.nodeType==1)? tempObj:null;
}
测试代码

其中nodeType的值主要有以下几种:

  1. 元素节点的nodeType值为1
  2. 属性节点的nodeType值为2
  3. 文本节点的nodeType值为3

nextSibling和lastSibling的更多相关文章

  1. 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

    这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...

  2. JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

    <body> <ul id="ul1"> <li>11111</li> <li>22222</li> < ...

  3. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

  4. js的nextSibling,属性兼容IE和FF等浏览器

    Firefox中 空白字符,比如回车,空格等也算作一个Node 就是firstChild,nextsbiling这两个.下面给出函数吧.还是代码比较说明问题代码都是网上来的.不过要注意的是,getNe ...

  5. Javascript nextElementSibling和nextSibling

    function next(ele) { if (typeof ele.nextElementSibling == 'object') { return ele.nextElementSibling; ...

  6. JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

    其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...

  7. javascript 中的nextSibling和previousSibling使用注意事项

    JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返 ...

  8. js nextSibling属性和previousSibling属性概述及使用注意

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...

  9. nextSibling,previousSibling,childNodes常见错误

    在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...

随机推荐

  1. Pycharm:运行程序后显示各种变量的数据栏

    右边这个数据栏的显示 在Edit Configurations中勾选Run With Python Console 如果想隐藏:

  2. openpyxl模块的读写使用及mongodb概念

    今日内容概要 openpyxl模块 MongoDB数据库 今日内容详细 openpyxl模块 # 下载 pip3 install openpyxl # 使用 '''openpyxl内部读写也是分离的 ...

  3. 2022最新IntellJ IDEA诺依开发部署文档

    前景提示 若伊是国内一款很好的开源项目,非常的便于学习,而且它是开源免费的,但是,它的开发部署文档实在是没法按照那个文档,快速高效的在本地搭建一套可以运行的项目,对于学习开发和使用实在是一大难题,为此 ...

  4. 实践2:如何使用word2vec和k-means聚类寻找相似的城市

    理解业务 一个需求:把相似的目的地整理出来,然后可以通过这些相似目的地做相关推荐,或者是相关目的地的推荐 准备数据 Word2Vec算法:可以学习输入的文本,并输出一个词向量模型 对数据进行清洗,去出 ...

  5. 使用pip安装扩展包

    pip可以对python扩展包进行查找.下载.安装.卸载等

  6. 如何构建一个PKM系统

    原文链接 这篇文章是个人知识总结相关的第一篇文章,主要目的是为了阐述我们为什么需要一个 PKM 系统,并且简单对自己这几年亲身形成的PKM 系统进行总结. PKM 是什么? PKM 是 Persona ...

  7. 快速整明白Redis中的字典到底是个啥

    字典简介 字典是一种用于保存键值对的数据结构,可以通过键值对中的键快速地查找到对应的值.在Redis所使用的C语言中,并没有内置字典,所以Redis自己实现了字典. 整个Redis数据库的所有的键和值 ...

  8. Gin 09 HTTP 重定向

    gin http 重定向有两种方法,重写url 和 不重写的跳转.两种方法,gin 通过两个内置方法实现: demo package main import ( "github.com/gi ...

  9. setState同步异步场景

    setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会 ...

  10. RDMA--libibverbs代码分析(2)-设备发现

    基于上一篇文章https://www.cnblogs.com/xingmuxin/p/11057845.html 我们现在从分析libibverbs代码,跳入到分析内核代码,代码位置在./driver ...