在 HTML 文档对象模型（DOM）中，导航是指通过节点之间的关系来遍历和访问文档结构。每个节点都有与之相关的父节点、子节点和兄弟节点。通过这些关系，您可以在 DOM 树中定位和操作特定的元素。

常用的导航属性：

  • parentNode：获取当前节点的父节点。
  • childNodes：获取当前节点的所有子节点。
  • firstChild：获取当前节点的第一个子节点。
  • lastChild：获取当前节点的最后一个子节点。
  • previousSibling：获取当前节点的前一个兄弟节点。
  • nextSibling：获取当前节点的下一个兄弟节点。

示例：

假设有以下 HTML 结构：

<div id="parent">
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
</div>

您可以使用以下 JavaScript 代码来导航这些节点：

// 获取父节点
var parent = document.getElementById("parent");

// 获取所有子节点
var children = parent.childNodes;

// 获取第一个子节点
var firstChild = parent.firstChild;

// 获取最后一个子节点
var lastChild = parent.lastChild;

// 获取第一个子节点的下一个兄弟节点
var nextSibling = firstChild.nextSibling;

// 获取最后一个子节点的前一个兄弟节点
var previousSibling = lastChild.previousSibling;

需要注意的是，childNodes 返回的是一个包含所有子节点的 NodeList，其中可能包括元素节点、文本节点和注释节点等。如果您只关心元素节点，可以使用 children 属性，它返回一个仅包含元素节点的 HTMLCollection。

通过这些导航属性，您可以在 DOM 树中灵活地定位和操作元素，实现动态的网页交互。

更多详细信息和示例代码，请参考 菜鸟教程。