jQuery - DOM 遍歷

jQuery 是一款非常強大的工具，它提供了各種 DOM 遍歷方法，幫助我們在 HTML 或 XML 文件中隨機以及順序地選擇元素。DOM 中的元素被組織成樹狀資料結構，可以透過遍歷來導航和定位 HTML 或 XML 文件中的內容。

文件物件模型 (DOM) - 是 W3C（全球資訊網聯盟）標準，允許我們建立、更改或從 HTML 或 XML 文件中刪除元素。

可以將 DOM 樹想象成一個節點集合，這些節點透過父子關係和兄弟關係相互關聯，根節點從頂層父節點開始，在 HTML 文件中是 HTML 元素。

在開始遍歷 DOM 之前，讓我們瞭解一下父、子和兄弟的術語。讓我們看一個例子

<body>
   <p>This is paragrah</p>

   <div><span>This is div</span></div>

   <button id="b1">Get width</button>
   <button id="b2">Set width</button>
</body>

在上面的示例中，我們在頂部有一個<body>元素，它被稱為所有元素的父元素。<body>元素內部的<div>、<p>和<button>元素被稱為兄弟元素。再次，<div>內部的<span>元素是<div>的子元素，而<div>被稱為<span>元素的父元素。

<div>元素是<p>元素的下一個兄弟元素，而<p>是<div>元素的上一個兄弟元素。

遍歷 DOM

大多數 DOM 遍歷方法不會修改 jQuery DOM 物件，它們用於根據給定條件從文件中篩選元素。jQuery 提供了以下三個方向的遍歷方法：

向上遍歷 - 此方向表示遍歷祖先節點（父、祖父、曾祖父等）。
向下遍歷 - 此方向表示遍歷後代節點（子、孫子、曾孫子等）。
橫向遍歷 - 此方向表示遍歷兄弟節點（同一層級的兄弟姐妹）。

我們將從下一章開始學習所有上述遍歷方法。

jQuery 遍歷參考

您可以在以下頁面獲取所有 jQuery 遍歷 DOM 方法的完整參考：jQuery 遍歷參考。

列印頁面