nextSibling和lastSibling
在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的值主要有以下几种:
- 元素节点的nodeType值为1
- 属性节点的nodeType值为2
- 文本节点的nodeType值为3
nextSibling和lastSibling的更多相关文章
- 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用
这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...
- JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
<body> <ul id="ul1"> <li>11111</li> <li>22222</li> < ...
- 兼容的firstChild,lastChild,nextSibling,previousSibling写法
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...
- js的nextSibling,属性兼容IE和FF等浏览器
Firefox中 空白字符,比如回车,空格等也算作一个Node 就是firstChild,nextsbiling这两个.下面给出函数吧.还是代码比较说明问题代码都是网上来的.不过要注意的是,getNe ...
- Javascript nextElementSibling和nextSibling
function next(ele) { if (typeof ele.nextElementSibling == 'object') { return ele.nextElementSibling; ...
- JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解
其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...
- javascript 中的nextSibling和previousSibling使用注意事项
JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返 ...
- js nextSibling属性和previousSibling属性概述及使用注意
1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...
- nextSibling,previousSibling,childNodes常见错误
在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...
随机推荐
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- 堪比JMeter的.Net压测工具 - Crank 入门篇
1. 前言 Crank 是.NET 团队用来运行基准测试的基准测试基础架构,包括(但不限于)来自TechEmpower Web 框架基准测试的场景,是2021年.NET Conf 大会上介绍的一项新的 ...
- windows下安装gym
安装gym在执行pip install -e'.[all]'这句语句时,可能会出现这种情况 在pycharm中运行的时候会出现如下这种情况: 或者这种情况 出现这种问题可能是python的版本太高了, ...
- Bugku CTF_web3
1.打开网页,得到信息如下 2.在hackbar里构造url如下 3.得到flag 4.本题的考点在于读的懂PHP代码,并且学会构造get参数.
- Lua中如何实现类似gdb的断点调试--05优化断点信息数据结构
在上一篇04优化钩子事件处理中,我们在钩子函数中引入了call和return事件的处理,对性能进行了优化. 细心的同学可能已经发现了,我们的hook函数中call事件和line都需要对整个断点表进行遍 ...
- 面试官:Java中对象都存放在堆中吗?你知道逃逸分析?
面试官:Java虚拟机的内存分为哪几个区域? 我(微笑着):程序计数器.虚拟机栈.本地方法栈.堆.方法区 面试官:对象一般存放在哪个区域? 我:堆. 面试官:对象都存放在堆中吗? 我:是的. 面试官: ...
- 一比一还原axios源码(零)—— 概要
从vue2版本开始,vue-resource就不再被vue所维护和支持,官方也推荐使用axios,所以,从我使用axios至今,差不多有四五年了,这四五年的时间只能算是熟练应用,很多内部的实现和原理不 ...
- 2.8 C++STL set/multiset容器详解
文章目录 2.8.1 引入 2.8.2 代码示例 2.8.3 代码运行结果 2.8.4 对组pair的补充 代码实例 运行结果 总结 2.8.1 引入 set/multiset容器概念 set和mul ...
- 常用QQ快捷键
QQ是腾讯QQ的简称,是一款基于Internet即时通信(IM)软件.目前QQ已经覆盖Microsoft Windows.macOS.Android.iOS.Windows Phone.Linux等多 ...
- 分布式 PostgreSQL 集群(Citus)官方安装指南
单节点 Citus Docker (Mac 与 Linux) Docker 镜像仅用于开发/测试目的, 并且尚未准备好用于生产用途. 您可以使用一个命令在 Docker 中启动 Citus: # st ...