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 遍历参考。

打印页面