js 原生方法获取所有兄弟节点

<!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>

原文地址：https://www.cnblogs.com/mengfangui/p/9070841.html

时间： 2024-07-28 21:03:46

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

js通用方法获取元素,节点父子关系查找

/* *通用方式来获取元素 * 1.通过id来获取元素document.getElementById('属性名') * 2.通过便签名来获取元素document.getElementsByTagName('属性名');得到的是一个数组 * 3.通过class属性来获取元素有兼容性问题document.getElementsByClassName('class属性名');得到是一个数组 * 4.通过name属性来获取元素存在兼容性问题document.getElementsByName('name

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

使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 function getEle(ele,index){ var obj = document.querySelectorAll(ele); if(index){ if(obj.length ==1){ return obj; } return obj[inde

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

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

jQuery和JS原生方法对比

input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析) (交互时的效果跟浏览器以及操作系统相关) <input/>的局限性 <input/>是自闭合标签(不能嵌套其他的标签),所以不能定义复杂样式按钮,所谓复杂的样式,一般指图文混杂的按钮,如下图所示: 如果想实现复杂的按钮样式,我们可以选择使用button标签. 搜索框中的form标签<form></form> <form>基本

js原生方法的使用（面试必问）

废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数组不变化.传第三个参数,没有作用. splice(),接收无数个参数,第一个为开始的index(从0开始),第二个为删除的元素的个数(0代表不删除,1代表删除一个...),第三个为添加的元素,第四个也为添加的元素.....,返回值是删除的元素组成的数组,如果删除了0个就返回空数组,原数组会被改变成被

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

浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕==onload() ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 function ready(fn) { if (document.addEventListener) { document.addEventListener('DOMContentLoaded', f

纯js 原生JavaScript获取域名主机

function getHost(url) { var host = "null"; if(typeof url == "undefined"|| null == url) { url = window.location.href; } var regex = /^\w+\:\/\/([^\/]*).*/; var match = url.match(regex); if(typeof match != "undefined" &&

js原生方法map实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js 获取元素所有兄弟节点实例

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下复制代码 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(