原生javascript和jQuery的遍歷方法
阿新 • • 發佈：2018-11-10
找得可能不完整 歡迎補充指教
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>