首頁 > 開發者 > JavaScript
jQuery遍曆DOM的父級元素、子級元素和同級元素的方法總結，jquerydom
如，顯示了HTML中的結構樹，通過 JQuery 遍曆，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍曆。
遍曆 - 父級（祖先）
向上遍曆DOM數。
通過如下三個方法，我們可以擷取父級元素：
1.JQuery parent()
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進行遍曆。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 通過parent()函數，可擷取當前元素的直接父級元素 var elem = $('span').parent(); console.log(elem);});
2.JQuery parents()
parents() 方法返回被選元素的所有父元素。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 通過parent()函數，可擷取當前元素的所有父級元素 var elem = $('span').parents(); console.log(elem); });
3.JQuery parentsUntil()
parentsUntil() 方法返回介於兩個給定元素之間的所有父級元素
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 擷取span在body標籤下的所有父級元素 var elem = $('span').parentsUntil('body'); console.log(elem);});
遍曆 - 子級（後代）
向下遍曆DOM樹。
向下遍曆可以使用如下兩個函數：
1.children()
2.find()
1.JQuery children()
children() 方法返回被選元素的所有直接子項目。
該方法只會向下一級對 DOM 樹進行遍曆。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 擷取section標籤下的所有直接子項目 var elem = $('section').children(); console.log(elem);});
2.JQuery find()
find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 擷取section標籤下的所有p標籤的子項目 var elem = $('section').find('p'); console.log(elem); // 擷取section標籤下的所有子項目 var elems = $('section').find('*'); console.log(elems);});
遍曆 - 同級（兄弟）
有以下幾個方法：
1.sibings()
除自身外，遍曆同級的所有元素，修改適用於同級所有元素
2.next()
除自身外，僅下一個元素修改
3.nextAll()
除自身外，修改下面的所有元素
4.nextUntil()
除自身外，對下面的元素進行區間修改
5.prev()
修改上一個元素
6.preAll()
修改位於元素之上的所有元素
7.preUntil()
對位於區間之上的元素進行區間修改
<style> .bd *{ margin:5px; padding:3px; border:3px solid black; } </style></head><body><div class="bd"><p></p><h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> </div></body>
$(document).ready(function(){ //$("h1").siblings().css({border:"3px solid red"}) //$("h4").nextAll().css({border:"4px solid grey"}); $("h2").prev().css({border:"3px solid green"});});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
