要求:

  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. Activiti7 启动流程实例

    package com.itheima.activiti; import org.activiti.engine.ProcessEngine; import org.activiti.engine.P ...

  2. ES ElasticSearch 7.x 下动态扩大索引的shard数量

    ES ElasticSearch 7.x 下动态扩大索引的shard数量 背景 在老版本的ES(例如2.3版本)中, index的shard数量定好后,就不能再修改,除非重建数据才能实现. 从ES6. ...

  3. 记一次线上OOM问题分析与解决

    一.问题情况 最近用户反映系统响应越来越慢,而且不是偶发性的慢.根据后台日志,可以看到系统已经有oom现象. 根据jdk自带的jconsole工具,可以监视到系统处于堵塞时期.cup占满,活动线程数持 ...

  4. Javaweb应用中配置错误跳转页面

    关于在Javaweb应用中配置错误跳转页面 应用场景,比如服务器的出现404错误,我们想让它返回跳转到我们自定义的错误页面 解决方法: 主要在web.xml文件中进行配置,这里玩的错误页面都单独放在e ...

  5. App网络测试

    弱网测试作为健壮性测试的重要部分,对于移动端测试必不可少. 什么样的网络属于弱网? 小于或等于2G速率的都属于弱网,且随着5G的到来,3G网络速率的降低,未来3G也会逐渐划入弱网的行列. 对于弱网的数 ...

  6. oracle之二检查点

    检查点(checkpoint) 8.1 什么是checkpointcheckpoint是数据库的一个内部事件,检查点激活时会触发数据库写进程(DBWR),将数据缓冲区里的脏数据块写到数据文件中. 8. ...

  7. 第17课 - make 中的路径搜索(上)

    第17课 - make 中的路径搜索(上) 1. 问题 在以往的 make 学习中,我们使用到的 .c 文件和 .h 文件都与 makefile 处在同一个路径.在实际的工程项目中,所有的源文件和头文 ...

  8. [LeetCode]621. 任务调度器(贪心)

    题目 给定一个用字符数组表示的 CPU 需要执行的任务列表.其中包含使用大写的 A - Z 字母表示的26 种不同种类的任务.任务可以以任意顺序执行,并且每个任务都可以在 1 个单位时间内执行完.CP ...

  9. 高可用负载均衡集群——keepalive(1)

    Keepalived介绍 keepalived 是一个类似于 layer3, 4 & 5 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 5层交换. Keepalived 的作用 ...

  10. EAM在不同行业的应用

    EAM在不同行业的应用 EAM从出现至今,已让很多资产密集型企业受益,甚至在一些行业领域里已经是公认的.不可或缺的管理方案,比如电力行业.轨道交通行业等.但由于不同行业或者企业业务类型不同,导致了资产 ...