要求:

  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. DLX AlgorithmX

    AlgorithmX精确覆盖: https://en.wikipedia.org/wiki/Knuth's_Algorithm_X DLX的基础算法 https://zh.wikipedia.org/ ...

  2. 喵的Unity游戏开发之路 - 互动环境(有影响的运动)

    如图片.视频或代码格式等显示异常,请查看原文: https://mp.weixin.qq.com/s/Sv0FOxZCAHHUQPjT8rUeNw 很多童鞋没有系统的Unity3D游戏开发基础,也不知 ...

  3. Spring源码分析 手写简单IOC容器

    Spring的两大特性就是IOC和AOP. IOC Container,控制反转容器,通过读取配置文件或注解,将对象封装成Bean存入IOC容器待用,程序需要时再从容器中取,实现控制权由程序员向程序的 ...

  4. A Walk Through the Forest (最短路+记忆化搜索)

    Jimmy experiences a lot of stress at work these days, especially since his accident made working dif ...

  5. JS中的数组,添加删除元素,判断是否存在一个值的方法总结

    一.添加元素: 1:在最后添加,返回数组长度:arr.push(...); 2:在最前面添加,返回数组长度:arr.unshift(...); 3:在指定位置添加,没有返回值:arr[i] = xxx ...

  6. 剑指 Offer 46. 把数字翻译成字符串

    题目描述 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 "a" ,1 翻译成 "b",--,11 翻译成 "l",--,25 ...

  7. Python3实现zip分卷压缩

    Python实现zip分卷压缩 使用 zipfile 库 查看 官方中文文档 利用 Python 压缩 ZIP 文件,我们第一反应是使用 zipfile 库,然而,它的官方文档中却明确标注" ...

  8. 阿里云openssl升级,实现nginx主动推送,nginx主动推送能够有效减少不必要的报文传输,减少用户请求次数,以达到更快访问速度

    现有版本检查 [root@node3 ~]# openssl version               #这个版本是无法支持http2.0主动推送功能.需要升级为2019版本. OpenSSL 1. ...

  9. Node.js向MongoDB中插入并查询数据

    首先必须要保持Node.js与MongoDB保持连接 具体教程见:Node.js连接MongoDB数据库步骤 插入数据步骤如下 node项目文件如下:在routes文件夹下新建insert.js文件, ...

  10. 本周 GitHub 速览:自动化当道,破密、爬虫各凭本事

    作者:HelloGitHub-小鱼干 摘要:安全门外汉,如何在不知道密钥或密码的情况下,破解哈希得到原文,Ciphey 会告诉你当中的密码.说到 auto 智能爬虫会基于上一次的爬虫经历进一步学习以获 ...