原生javascript和jQuery的遍历方法

找得可能不完整欢迎补充指教

DOM遍历
一共四种：
parentNode（遍历第一个父节点）
childNodes（遍历所有子节点）
nextSibling（遍历下一个字节点）
previousSibling（遍历上一个子节点）

<body>
    <div>div</div>
    <div id="oDiv">
        <span id="oSpan">1</span>
        <i>2</i>
        <strong>3</strong>
    </div>
    <div class="oDiv3" id="oDiv3">div3</div>
    <script>
       var oDiv = document.getElementById("oDiv");
       var oSpan = document.getElementById("oSpan");
       //parentNode属性会返回当前DOM元素的父元素
       oDiv.parentNode;  //返回body
       oSpan.parentNode;  //返回id为oDiv的div
       //childNodes属性会返回当前元素的所有子节点
       oDiv.childNodes; //返回id为oDiv下的子节点集合  包括空文本节点  

       //nextSibling   返回下一个兄弟节点  后面可以加.className和.id  如果当前元素和下一个元素之间有空格  就会返回undefined
        oDiv.nextSibling.className; //如果后面有空格 返回undefined  如果下一个节点没有class名也会返回undefined  不然则会返回下一个节点的class名
        oDiv.nextSibling.id; //如果后面有空格 返回undefined 如果下一个节点没有id名也会返回undefined  不然则会返回下一个节点的id名
        oDiv.nextSibling   //如果后面有空格  则会返回文本节点（就是空节点）没有空格就会返回下一个DOM元素

        //previousSibling  和上面nextSibling一样  不过previousSibling返回的是上一个兄弟节点
        oDiv.nextSibling.className;
        oDiv.previousSibling.id
        oDiv.previousSibling;
    </script>
</body>

#jQuery遍历

parent() --查找调用此方法的第一个父元素返回jq对象
children() --查找调用此方法的所有子元素括号里面可以放选择器返回jq对象
find() --查找调用此方法的下面的所有元素括号里传选择器会返回指定jq对象如果括号里面不传选择器返回空jq对象
next() --查找调用此方法的下一个兄弟元素
nextAll() --查找调用此方法的下面的所有兄弟元素可以传选择器
perv() --查找调用此方法的上一个兄弟元素
pervAll() --查找调用此方法的上面的所有兄弟元素可以传选择器
siblings() --查找调用此方法的所有兄弟元素可以传选择器

<body>
    <div>div</div>
    <div id="oDiv">
        <span>
            <span id="oSpan"></span>
        </span>
        <i >2</i>
        <strong>3</strong>
    </div>
    <div id="oDiv3">div3</div>
    <div class="oDiv3">div3</div>
    <script src="../js/jquery-2.0.3.min.js"></script>
    <script>
       $("#oDiv").parent()//查找调用此方法的第一个父元素 
       $("#oDiv").children()  //查找调用此方法的所有子元素 括号里面可以放选择器  
       $("#oDiv").find()  //查找调用此方法下面的所有元素 括号里面可以放选择器  
       $("#oDiv").next()  //查找调用此方法的下一个兄弟元素 
       $("#oDiv").nextAll()//查找调用此方法的下面的所有兄弟元素 
       $("#oDiv").prev() //查找调用此方法的上一个兄弟元素 
       $("#oDiv").prevAll() //查找调用此方法的上面的所有兄弟元素
       $("#oDiv").siblings() //查找调用此方法的所有兄弟元素
       
    </script>
</body>

原生javascript和jQuery的遍历方法

猜你喜欢