<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>js 原生方法获取所有兄弟节点</title>

    </head>

    <body>

        <ul>

            <li id="first">1</li>

            <li>2</li>

            <li>3</li>

        </ul>

        <script type="text/javascript">

            //方法一：

            //            function sibling(elem) {

            //                var r = [];

            //                var n = elem.parentNode.firstChild;

            //                for(; n; n = n.nextSibling) {

            //                    if(n.nodeType === 1 && n !== elem) {

            //                        r.push(n);

            //                    }

            //                }

            //                return r;

            //            }

            //方法二

            function sibling(elm) {

                var a = [];

                var p = elm.parentNode.children;

                for(var i = 0, pl = p.length; i < pl; i++) {

                    if(p[i] !== elm) a.push(p[i]);

                }

                return a;

            }

            var siblings = sibling(document.getElementById('first'));

            console.log(siblings);

        </script>

    </body>

</html>

js 原生方法获取所有兄弟节点的更多相关文章

  1. 遍历DOM树，获取所有兄弟节点

    获取兄弟节点的常用方法有:  方法  说明 siblings()  选取所有兄弟节点 next()  选取后面兄弟节点 nextAll()  选取所有后面的兄弟节点 nextUntil()  选取所有 ...

  2. 像jq那样获取对象的js原生方法

    使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...

  3. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  4. js原生方法传参的细节（面试必问）

    废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...

  5. 图片首尾平滑轮播(JS原生方法—节流)<原创>

    首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...

  6. js原生_获取url键值对

    思路: 1.先对url进行处理,获取 ?后的字符串 postid=10457794&actiontip=保存修改成功') 2. 字符串通过&标识,不同参数转为数组 ["pos ...

  7. JS原生方法被覆盖后的恢复办法

    alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...

  8. js原生方法的重写

    讲干货,不啰嗦,通过prototype可以获取到JavaScript的原型对象,进而可以在对象原型上添加新的属性和方法,当该方法与原方法名称一样时会覆盖原方法既:重写,当不一样时既:添加 如:实现数组 ...

  9. JS原生方法实现jQuery的ready()

    浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...

随机推荐

  1. sun.misc.BASE64Encoder()编码有换行符需要手动去除passwordEncode.replace("\n","");

    String passwordEncode = new BASE64Encoder().encodeBuffer(password.getBytes());//sun.misc.BASE64Encod ...

  2. Python的高阶函数小结

    一. 高阶函数定义 简而言之,Python的高阶函数就是指一个函数作为参数传递给另外一个函数的用法. 举一个最简单的高阶函数来说明: >>> def add(x,y,f): retu ...

  3. 基里巴斯（path）

    基里巴斯(path) 题目描述 最近,帕特里克沉迷于世界地图上的太平洋地区.他发现了一个名字奇异的岛国:基里巴斯共和国,简称基里巴斯,是一个太平洋岛国. 其由33个岛屿组成. "可惜它快被淹 ...

  4. android2.2 watchdog分析

    1 watchdog分析 Watchdog就是“看门狗”.其最初存在的意义是因为以前嵌入式设备上的程序经常跑飞(电磁干扰之类的),所以专门设置了一个硬件看门狗,每个一段时间,看门狗就去检查一下某个参数 ...

  5. 分布式文件系统之Glusterfs

    1.环境规划如下 centos7.4   三个节点一块 sdb  3G大小的测试硬盘 2.Glusterfs  卷的类型比较多,这里我们测试最常用的一种   Distributed Replicate ...

  6. 完善慕课网Vue2.0购物车功能

    vue一个Made in China创造出来的框架真的很66666~ 如果你是刚入门还不太懂也没有看慕课网上这门视频的,请先看一遍或许你会收获满满~ 使用vue2.0实现购物车和地址选配功能这门课程, ...

  7. HDU 4487 Maximum Random Walk

    Maximum Random Walk Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. 用Razor来生成模板 using razor for template

    原文发布时间为:2011-09-15 -- 来源于本人的百度文章 [由搬家工具导入] http://razorengine.codeplex.com/

  9. 如何在win2003下安装sql2008[多次安装sql2008失败者必看]

    原文发布时间为:2010-11-02 -- 来源于本人的百度文章 [由搬家工具导入] 如何在win2003下安装sql2008[多次安装sql2008失败者必看] 1. 安装win2003，升级全部补 ...

  10. [LeetCode] Permutations II 排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...