原生JS查找相邻元素—

在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素，但在JS中并没有这样的方法，可以用previousSibling和nextSibling结合来实现。

不过在JS中用获取node的方法会有意想不到的多余的空文本，所以需要加入判断条件来判断元素类型。nodeType==1，表示是元素节点。

代码如下：

function siblingElems(elem){

var nodes=[ ];

var _elem=elem;

while((elem=elem.previousSibling)){

if(elem.nodeType==1){

nodes.push(elem);

}

}

var elem=_elem;

while((elem=elem.nextSibling)){

if(elem.nodeType==1){

nodes.push(elem);

}

}

}

使用如下：

var el=document.getElementById("ele");

var sib=siblingElems(el); //获得相邻元素数组

原生JS查找相邻元素——siblings方法相关推荐

原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
原生js——无法获取元素高度的的问题
原生js--无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题,原来一直没有注意到这个小细节: 1)如果width:150px:是写在 css 样式表(外链式)里 ...
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点. 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点. 没有子节点则返回 ...
原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
漫谈原生JS添加元素的两种方法
漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过 ...
8种在JavaScript数组中查找指定元素的方法（用于开发中数据的处理）
1.Array.prototype.includes() includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false. 该方法支持两个参数value ...
8种在JavaScript数组中查找指定元素的方法
来源 | https://www.fly63.com 前言有时候我们想以某种条件来查找一个数组中是否有满足改条件的元素,然后返回该元素,或者该元素的索引值. JavaScript 给我们提供了多种方 ...

原生JS查找相邻元素——siblings方法

原生JS查找相邻元素——siblings方法相关推荐

最新文章

热门文章