要求:

  1. 获得下一个/上一个兄弟元素节点,不包括文本节点等
  2. 解决IE兼容性问题

代码实现:

获得下一个兄弟元素节点:

function getNextElement(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}

获得上一个兄弟元素节点:

function getPrevElement(element) {
var el = element;
while (el = el.previousSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}

实现效果:

有如下两兄弟标签:

<div>div</div>
<span>span</span>

获得下一个兄弟元素节点:

输入:

var div = document.querySelector('div');
console.log(getNextElement(div));

输出:

<span>span</span>

获得上一个兄弟元素节点:

输入:

var span = document.querySelector('span');
console.log(getPrevElement(span));

输出:

<div>div</div>

JavaScript封装函数:获取下一个/上一个兄弟元素节点的更多相关文章

  1. Shell $?获取函数返回值或者上一个命令的退出状态

    Shell $?获取函数返回值或者上一个命令的退出状态 来自:互联网 时间:2021-01-12 阅读:2 $? 是一个特殊变量,用来获取上一个命令的退出状态,或者上一个函数的返回值. 所谓退出状态, ...

  2. 原生JavaScript 获取下一个/上一个同胞元素

    看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery  prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...

  3. getNextElement( )函数——获取下一个特定的元素节点

    function getNextElement(node){ //定义getNextElement()函数 if (node.nodeType==){ //条件:如果node参数nodetype属性为 ...

  4. javascript 在一个函数参数中包含另一个函数的引用

    javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) {  alert(a); //调用参数 ...

  5. javascript封装函数入门

    封装函数的入门 一.使用函数有两步: 1.定义函数,又叫声明函数, 封装函数. 定义函数的三个要素:功能,参数,返回值. function 函数名(形参){ 函数代码 return 结果} //2.调 ...

  6. 怎样获取当前文档所有的元素节点(即html标签节点)

    方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*" ...

  7. kubernetes获取崩溃容器/上一个容器的应用日志

    kubectl logs命令将显示当前容器的日志.当你想知道为什么前一个容器终止时,你想看到的是前一个容器的日志,而不是当前容器的.可以通过添加--previous选项来完成: $ kubectl l ...

  8. 关于jQuery获取不到动态添加的元素节点的问题

    遇到问题: 当我获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 问题 ...

  9. js获取上一个兄弟元素

    需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) pr ...

随机推荐

  1. POJ - 3037-Skiing(邻接表+Dijkstra)

    Bessie and the rest of Farmer John's cows are taking a trip this winter to go skiing. One day Bessie ...

  2. 线上环境去除console

    npm i -D babel-plugin-transform-remove-console babel.config.js // 获取 VUE_APP_ENV 非 NODE_ENV,测试环境依然 c ...

  3. 外包公司派遣到网易,上班地点网易大厦,转正后工资8k-10k,13薪,包三餐,值得去吗?

    作为一个人,我们必须时时刻刻清醒地看待自己,做到不卑不亢才能坚强地活下去. 请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/i ...

  4. Eclipse中java文件边的黄色数据库标志变成了蓝色小勾,导致文件修改后无法显示在Git staging窗口中,修改无法提交,怎么解决?

    出现这个问题的原因是误点击了右键点文件->Team->Advanced->Assume Unchanged, 导致结果是文件修改了无法显示在Git staging窗口中,自然无法提交 ...

  5. IDEA编写JavaWeb出现乱码,成功解决!

    使用IDEA写JavaWeb项目时,总会出现编码出错等问题,比如下面这样,页面显示出来一大堆乱码,下面跟着我来操作一下,可以成功解决! 首先在IDEA安装目录下有一个:bin的文件夹,打开后找到如下两 ...

  6. node-vuecli 脚手架安装

    1. vuecli 简介 Vue CLI 致力于将 Vue 生态中的工具基础标准化 Vue CLI 是一个基于 vue.js 进行快速开发的完整系统,是一个全局安装的 npm包,基于webpack构建 ...

  7. hexo博客front-matter格式

    通用格式 Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说: --- title: Hello World date: 2013/7/13 20:46:2 ...

  8. 从头看看Tomcat启动Spring容器的原理

    通过带注解Spring Boot可以启动一个web容器,并初始化bean容器.那么Tomcat启动并初始化spring容器的原理是怎样的? Tomcat启动web程序时会创建一对父子容器(图1): 有 ...

  9. 反射之hasattr() getattr() setattr() 函数

    Python的hasattr() getattr() setattr() 函数使用方法详解 hasattr(object, name)判断object中有没有一个name字符串对应的方法或属性,返回B ...

  10. 内置函数:循环调用函数map和filter

    1.map:循环调用函数,前面一定一定要加list,要不然不会被调用 map的格式:list(map(函数名,循环体)) #这里的函数只能写函数名,不要加() list(map(os.mkdir,[' ...