JavaScript封装函数:获取下一个/上一个兄弟元素节点
要求:
- 获得下一个/上一个兄弟元素节点,不包括文本节点等
- 解决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封装函数:获取下一个/上一个兄弟元素节点的更多相关文章
- Shell $?获取函数返回值或者上一个命令的退出状态
Shell $?获取函数返回值或者上一个命令的退出状态 来自:互联网 时间:2021-01-12 阅读:2 $? 是一个特殊变量,用来获取上一个命令的退出状态,或者上一个函数的返回值. 所谓退出状态, ...
- 原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...
- getNextElement( )函数——获取下一个特定的元素节点
function getNextElement(node){ //定义getNextElement()函数 if (node.nodeType==){ //条件:如果node参数nodetype属性为 ...
- javascript 在一个函数参数中包含另一个函数的引用
javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) { alert(a); //调用参数 ...
- javascript封装函数入门
封装函数的入门 一.使用函数有两步: 1.定义函数,又叫声明函数, 封装函数. 定义函数的三个要素:功能,参数,返回值. function 函数名(形参){ 函数代码 return 结果} //2.调 ...
- 怎样获取当前文档所有的元素节点(即html标签节点)
方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*" ...
- kubernetes获取崩溃容器/上一个容器的应用日志
kubectl logs命令将显示当前容器的日志.当你想知道为什么前一个容器终止时,你想看到的是前一个容器的日志,而不是当前容器的.可以通过添加--previous选项来完成: $ kubectl l ...
- 关于jQuery获取不到动态添加的元素节点的问题
遇到问题: 当我获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 问题 ...
- js获取上一个兄弟元素
需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) pr ...
随机推荐
- C#还原对图像做的修改
在C#程序中对图像进行处理,有的时候需要将处理后的图像还原,便于观察两者之间的区别,避免重新运行程序造成的麻烦.我是将之前写的Tab页中打开的图像进行还原,将原始图像数据保存在数据流中,然后从数据流中 ...
- 实现:git本地创建多个分支互不干扰
git本地创建多个分支互不干扰 在项目开发过程中,经常会遇到下面这种情况: 业务情景:在做某个需求a时,先需要修改紧急bug b:发版时发的是远程dev的代码 方式一(推荐): (1)本地已有分支de ...
- Linux 用户与权限
这些天一直在看Linux的命令但是却没有写文章,因为感觉没有必要,哪些简单的命令,vi cat cd 啥的,是个做开发的就知道,所以就没写; 用户管理 第一个我们知道的用户就是Root 没错哦,这就是 ...
- Oracle12C创建视图权限不足
授权: GRANT CREATE VIEW TO c##scott; 作者:彼岸舞 时间:2020\06\23 内容关于:Oracle 本文属于作者原创,未经允许,禁止转发
- JVM学习第三天(JVM的执行子系统)之字节码指令
早上看了Class类文件结构,晚上继续来看字节码指令,毕竟谁也不是一步登天的(说白了还是穷); 字节码指令 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的数字(称为操作码,Opcode ...
- [oracle/sql]关于清除重复,not in方案和not exists方案的对比
有这样一张表: CREATE TABLE tb_sc ( id NUMBER not null primary key, studentid int not null, courseid int no ...
- linux 用户、用户组的操作
1.查看linux系统下的所有用户 方式一:grep bash /etc/passwd 方式二:查看etc/passwd文件,其他第三个参数大于500的都是用户自己新增的 vim /etc/passw ...
- Nginx升级加固SSL/TLS协议信息泄露漏洞(CVE-2016-2183)
Nginx升级加固SSL/TLS协议信息泄露漏洞(CVE-2016-2183) 漏洞说明 // 基于Nginx的https网站被扫描出SSL/TLS协议信息泄露漏洞(CVE-2016-2183),该漏 ...
- poi自动生成Ecxel表格和Chart图表
最近因为业务需求,需要做poi自动导出Ecxel表格和Chart折线图的功能. 所以我在网上找到了一篇关于poi生成Chart图表的博客,代码很详细,但是缺少相关注释说明. 想要将它改造成自己需要的样 ...
- Django-配置镜像源,虚拟环境详解
0.配源虚拟 全局配源 阿里云镜像站:https://developer.aliyun.com/mirror/ # 在cmd中操作,查找文件 C:\Users\Administrator>pip ...