[转]原生JS-查找相邻的元素-siblings方法的实现
在针对element的操作里,查找附近的元素是一个不可少的过程,比如在实现tab时,其中的一个div增加了“on”class,其他的去除“on”class。如果用jquery的朋友就肯定不会陌生siblings,这个非常的好用,本文针对这个方法的实现进行分析和解剖。
身为一个菜鸟,我们很容易忽视了element的previousSibling 和 nextSibling 属性,previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级),nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。现在知道思路了吧,前提是要了解这两个属性,那么思路就很简单了,就是利用previousSibling 和 nextSibling,找到元素前面的元素和后面的元素。但是这里还要注意一个问题,那就是元素的nodeType,毕竟我们不想找y一些文本节点和属性节点,所以”nodeType ===1″ 作为判断条件。
源码如下:
var siblingElem = function(elem){
var _nodes = []
,_elem = elem
;
while ((elem = elem.previousSibling)){
if(elem.nodeType === 1){
_nodes.push(elem);
break;
}
}
elem = _elem;
while ((elem = elem.nextSibling)){
if(elem.nodeType === 1){
_nodes.push(elem);
break;
}
}
return _nodes;
}
使用可以这样子:
var dy = document.getElementById('dy');
var sib = siblingElem(dy);
sib得到的就是 dy的附近的元素了。
是不是很简单,jquery中的siblings还有很多复杂的操作,但是实现的原理是类似的。
来自 http://www.subying.com/archives/46.html ---subying's blog
[转]原生JS-查找相邻的元素-siblings方法的实现的更多相关文章
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- 原生JS查找元素
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- 原生js利用data选择元素
//js var a = document.querySelector('[data-word=a]') console.log(a) html <dl class="find-car ...
- 原生js实现清除子元素节点
var table = document.body.querySelector('.mui-table-view'); while(table.hasChildNodes()) //当table下还存 ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
随机推荐
- 移动端调试神器-vConsole
什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...
- [Postman]响应(7)
Postman响应查看器有助于确保API响应的正确性.API响应由正文,标题和状态代码组成.邮递员在不同的标签中组织正文和标题.选项卡旁边会显示API调用的状态代码和完成时间. 响应还包含HTTP规范 ...
- JavaScript 对象(上)
简述: 1.是 JavaScript 的基本类型 2.是一种复合值,可通过名字访问这些值 3.可看作属性的无序集合,每个属性都是一个名/值对(属性名是字符串或标识符) 4.可以从一个称为原型的对象继承 ...
- 【PHP篇】变量与常量
变量: 变量的作用域为函数区域 判断是否存在:isset($变量名)://返回bool 判断是否为空:empty($变量名)//变量未声明或者值为空返回1,否则返回false 清除变量:unset($ ...
- JS获取链接中域名等信息
以访问百度为例子http://pan.baidu.com/share/qrcode?w=150&h=150&url=http%3A%2F%2F172.16.1.96%2FWeb%2FG ...
- Linux 下 Shell 的自动交互
在编写脚本的时候经常会遇到这种情况,某些程序的命令执行的之后可能会要求用户进行输入,这个时候就需要一些特殊写法来应对这种问题了.这里参考 这篇文章提到可以使用 delimiter 分界符来解决. 也就 ...
- Ocelot简易教程(七)之配置文件数据库存储插件源码解析
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...
- mybatis框架(2)---mapper代理方法
mapper代理方法 在我们在写MVC设计的时候,都会写dao层和daoimp实现层,但假如我们使用mapper代理的方法,我们就可以不用先daoimp实现类 当然这得需要遵守一些相应的规则: (1) ...
- 在微信小程序中使用图表
前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载 ...
- Mybatis 事务管理
mybatis的事务和数据源有着非常密切的联系.上文讲述了mybatis的数据源,本文要讲述的便是mybatis的事物 1.事务的分类 我们还是已一段xml配置文件为例 <environment ...