在针对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方法的实现的更多相关文章

  1. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  2. 原生JS查找元素

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...

  3. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制

    这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...

  5. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

  6. 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  7. 原生js利用data选择元素

    //js var a = document.querySelector('[data-word=a]') console.log(a) html <dl class="find-car ...

  8. 原生js实现清除子元素节点

    var table = document.body.querySelector('.mui-table-view'); while(table.hasChildNodes()) //当table下还存 ...

  9. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

随机推荐

  1. Im4java 操作 ImageMagick 处理图片

    背景 之前用的是JMagick,各种限制各种坑,直到使用了Im4java,真是相当的好用啊. 项目描述 ImageMagic的安装可参考:图片处理软件 ImageMagick 的安装和使用 Im4ja ...

  2. 第63节:Java中的Spring MVC简介笔记

    前言 感谢! 承蒙关照~ Java中的Spring MVC简介笔记 MVC简介 Spring MVC 基本概念 Spring MVC 项目搭建 maven 使用Spring MVC进行开发 实现数据绑 ...

  3. 机器学习入门12 - 分类 (Classification)

    原文链接:https://developers.google.com/machine-learning/crash-course/classification/ 1- 指定阈值 为了将逻辑回归值映射到 ...

  4. Python - 关于代码阅读的一些建议

    初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...

  5. 比较empty()与 isset()d的区别

    比较empty()与 isset()的区别 注意:empty()在PHP5.5之前只能检测变量 isset()只能检测变量 两者之间的联系:empty($var) 等价于 !isset($var)|| ...

  6. iOS----KVC和KVO 详解

    一. KVC 1.KVC介绍 KVC 就是键值编码(key-value-coding). 2.KVC 的主要作用: (1)通过键值路径为对象的属性赋值.主要是可以为私有的属性赋值. AppleView ...

  7. __import__

    __import__有个参数 fromlist =[]1.当这个参数为空的时候__import__('a.b.c') 等效于 import a 2.__import__('a.b.c', fromli ...

  8. PythonDay02——编程语言、python介绍以及安装解释器、运行程序的两种方式、变量

    一.编程语言 1.1 机器语言:直接用计算机能理解的二进制指令编写程序,直接控制硬件 1.2 汇编语言:用英文标签取代二进制指令去编写程序,本质也是直接控制硬件 1.3 高级语言:用人能理解的表达方式 ...

  9. Django -- 发送HTML格式的邮件

    提前在setting中设置邮箱server from django.core.mai import EmailMessage subject, from_email, to = 'xxx', 'nor ...

  10. Man方法

    Main方法相当一个主线程,JVM会自动寻找class文件中的main方法并执行(请思考tomcat加载java web项目启动的线程数和每次tomcat服务器接收到请求,是不是要发起一个线程去处理) ...