[转]原生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 ...
随机推荐
- 关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述
transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的,其实他们都是由matrix 矩阵转换来: animation的五种 ...
- compose函数
compose函数 在学习redux源码的时候看到了其中的工具函数compose,compose函数的作用就是组合函数,依次组合传入的函数: 后一个函数作为前一个函数的参数 最后一个函数可以接受多个参 ...
- Spark面试题
RDD怎么理解? RDD 是 Spark 的灵魂,也称为弹性分布式数据集.一个 RDD 代表一个可以被分区的只读数据集.RDD 内部可以有许多分区(partitions),每个分区又拥有大量的记录(r ...
- Python3 模块 -- Fabric自动化模版
安装 pip3 install fabric3 创建软连接 find / -type f -name "fab" /usr/local/python3/bin/fab ln -s ...
- ⑦JSP2.0的福利(标签文件)
前言 本篇接着上一篇博客:[传送门] 这次讲的是JSP2.0的特性之一,我们可以编写标签文件,指没有标签处理器和标签类库描述符的定制动作指令,不编译,无标签类描述符. 本文结构: ①标签文件简介 ②第 ...
- eclipse使用maven打包的时候发现静态资源没包含进去
今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install ) 后来发现是因为在pom.xml里没有配置打包静态资源的 ...
- solr调用lucene底层实现倒排索引源码解析
1.什么是Lucene? 作为一个开放源代码项目,Lucene从问世之后,引发了开放源代码社群的巨大反响,程序员们不仅使用它构建具体的全文检索应用,而且将之集成到各种系统软件中去,以及构建Web应用, ...
- Mycat - 高可用与负载均衡实现,满满的干货!
前言 开心一刻 和朋友去吃小龙虾,隔壁桌一个小女孩问妈妈:"妈妈,小龙虾回不了家,它妈妈会不会着急?" 她妈妈愣住了,我扒虾的手停下了,这么善良的问题,怎么下得了口.这是老板急忙过 ...
- netty源码解解析(4.0)-14 Channel NIO实现:读取数据
本章分析Nio Channel的数据读取功能的实现. Channel读取数据需要Channel和ChannelHandler配合使用,netty设计数据读取功能包括三个要素:Channel, Eve ...
- 翻译:INSERT(已提交到MariaDB官方手册)
本文为mariadb官方手册:INSERT的译文. 原文:https://mariadb.com/kb/en/insert/我提交到MariaDB官方手册的译文:https://mariadb.com ...