<!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. Mysql实战之高可用HMA

    author:JevonWei 版权声明:原创作品 主节点高可用 MHA是一款开源的MySQL的高可用程序,他为MySQL主从复制架构提供了automating master failover功能.M ...

  2. P2165 [AHOI2009]飞行棋

    题目描述 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入输出格式 输入格式: 第一行为 ...

  3. 抄书 Richard P. Stanley Enumerative Combinatorics Chapter 2 Sieve Methods

    2.1 Inclusion-Exclusion Roughly speaking, a "sieve method" in enumerative combinatorics is ...

  4. [LOJ#2323]「清华集训 2017」小Y和地铁

    [LOJ#2323]「清华集训 2017」小Y和地铁 试题描述 小Y是一个爱好旅行的OIer.一天,她来到了一个新的城市.由于不熟悉那里的交通系统,她选择了坐地铁. 她发现每条地铁线路可以看成平面上的 ...

  5. 深海机器人（cogs 742）

    «问题描述:深海资源考察探险队的潜艇将到达深海的海底进行科学考察.潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动.深海机器人在移动中还必须沿途采集海底生物标本.沿途生物 ...

  6. spring boot 运行jsp原理分析

    Spring-boot运行jsp原理分析   结论: 启动server的时候会创建临时目录 在浏览器中访问jsp文件的时候通过内置Tomcat将jsp转换为java,保存在临时目录中 然后编译为cla ...

  7. Codevs 1159 最大全0子矩阵 悬线法！！！！

    1159 最大全0子矩阵 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在一个0,1方阵中找出其中最大的全0子矩阵,所谓最大是指O ...

  8. 【Hihocoder1634】Puzzle Game（DP）

    题意:有一个n*m的矩阵,每个矩阵里有一个数字a[i][j].现在要求将其中一个格子的值改为p,使得修改后矩阵的最大子矩阵和最小,求这个最小值 n,m<=150,abs(a[i][j])< ...

  9. 【HDOJ5981】Guess the number（DP）

    题意:A和B玩一个游戏:A在[L,R]之间随机选取一个数X,之后由B来猜这个数, 如果猜的数比X小,则A就告诉B你猜的数小了, 如果猜的数等于X则游戏结束, 如果猜的数大于X,则在这之后A只会回答B是 ...

  10. pyspider 爬虫教程（一）：HTML 和 CSS 选择器

      虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息.但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识.不过,没想到这个教程居然会变成一篇译文,在这个 ...