要求:

  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. shader变体

    unity shader 变种(多重编译 multi_compile) https://www.jianshu.com/p/f34d896dde5d Unity Shader - Making mul ...

  2. laravel5学习并搭建网站【更新至2020-09-03】

    之前一直不清楚 php artisan 要如何使用,有朋友推荐使用phpstorm可以进行命令行执行, 现在发现其实如果真的不喜欢phpstorm的加载缓慢,可以试试计算机原有的命令行 记住需要跳转到 ...

  3. java初探(1)之秒杀中的rabbitMQ

    rabbitMQ 消息队列,通过一定的通信协议,生产者和消费者在应用程序内传递通信. 主要的作用,提高负载,减耦合. 场景描述:当点击秒杀按钮的那个时刻,有很高的并发量,客户端发出请求之后,会判断库存 ...

  4. [PyTorch 学习笔记] 5.2 Hook 函数与 CAM 算法

    本章代码: https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson5/hook_fmap_vis.py https://gi ...

  5. jackson序列化与反序列化的应用实践

    jackson序列化与反序列化的应用实践 源码地址: https://github.com/zhouweixin/serializable 1 相关概念 序列化: 把对象转换为字节序列的过程称为对象的 ...

  6. [LeetCode]105. 从前序与中序遍历序列构造二叉树(递归)、108. 将有序数组转换为二叉搜索树(递归、二分)

    题目 05. 从前序与中序遍历序列构造二叉树 根据一棵树的前序遍历与中序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 题解 使用HashMap记录当前子树根节点在中序遍历中的位置,方便每次 ...

  7. MySQL<=>是什么鬼

    官网描述 NULL-safe equal. This operator performs an equality comparison like the = operator, but returns ...

  8. matlab数字图像处理-给图片加入可视水印信息

    将文件夹路径改成了我想要存放代码的文件夹下 然后也是在网上百度,找到了一个代码,敲着模仿了一个 自己建立了一个脚本文件 >>edit test1 然后在脚本中添加 %读取待嵌入水印的图像和 ...

  9. 关于bat/cmd中转义符的使用

    今天笔者在cmd中准备使用echo 输出<https://www.cnblogs.com/5201351> 发现直接就报错:命令语法不正确. 然后就想到可能是<和>在cmd中有 ...

  10. mysql 事务、隔离级别

    一.事务的四大特性(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...