[转]原生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 ...
随机推荐
- iOS----KVC和KVO 详解
一. KVC 1.KVC介绍 KVC 就是键值编码(key-value-coding). 2.KVC 的主要作用: (1)通过键值路径为对象的属性赋值.主要是可以为私有的属性赋值. AppleView ...
- nRF52832 SDK15.3.0 基于ble_app_uart demo FreeRTOS移植
参考资料:https://blog.csdn.net/u010860832/article/details/86235993 这里把移植经验记录下来,供有需要的同学参考,有不对的地方也请大家批评指正. ...
- [原创]K8 cping 3.0大型内网渗透扫描工具
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- 今日头条面试题——LRU原理和Redis实现
很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU. 我的第一反应应该是内存不够的场景下,淘汰旧内容的策略.LRU ... Least R ...
- npm包实现发布正式和测试版
npm publish的時候 怎麽發測試版和正式版本呢? 通常我們一般情況下 直接 npm publish 提交自己的開發包后,在項目中 npm install @packageName 是下載下來剛 ...
- Java集合框架总结—超详细-适合面试
Java集合框架总结—超详细-适合面试 一.精简: A.概念汇总 1.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和Map是Java集合框架的根接口, ...
- Android UI(一)Layout 背景局部Shape圆角设计
Jeff Lee blog: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...
- java基础系列--volatile关键字
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7833881.html 1.volatile简述 据说,volatile是java语言中最轻 ...
- 网络协议抓包分析——ARP地址解析协议
前言 计算机之间可以相互通信的前提是要知道对方的地址,才可以发送信息给其他计算机,就像别人要联系你也得先知道你的电话号码一样.这里的地址因为网络分层的原因就包括IP地址和MAC地址(即网卡地址.硬件地 ...
- L1与L2损失函数和正则化的区别
本文翻译自文章:Differences between L1 and L2 as Loss Function and Regularization,如有翻译不当之处,欢迎拍砖,谢谢~ 在机器学习实 ...