在 web 前端开发中，HTML DOM（文档对象模型）导航是非常重要的一部分。通过导航，我们可以访问和操作 HTML 文档中的元素，属性和文本内容。在这个章节中，我们将学习如何使用 HTML DOM 导航来查找和操作文档中的元素。
查找元素
要查找文档中的元素，我们可以使用各种方法来选择元素。其中最常见的方法是使用 getElementById()，getElementsByClassName()，getElementsByTagName() 和 querySelector() 等方法。
getElementById()
getElementById() 方法通过元素的 id 属性来查找元素。例如，如果我们有一个 id 为 "header" 的元素，我们可以通过以下方式来获取它：
---- ------------------------ -------- --- ------ - ---------------------------------- ---------
getElementsByClassName()
getElementsByClassName() 方法通过元素的 class 属性来查找元素。例如，如果我们有一个 class 为 "content" 的元素，我们可以通过以下方式来获取它：
---- -------------------------- -------- --- ------- - ---------------------------------------------- ---------
getElementsByTagName()
getElementsByTagName() 方法通过元素的标签名来查找元素。例如，如果我们想获取所有的 <p> 元素，我们可以这样做：
----------- ----------- -------- --- ---------- - ----------------------------------- ---------
querySelector()
querySelector() 方法可以通过 CSS 选择器来查找元素。例如，如果我们想获取 id 为 "header" 的元素，我们可以这样做：
---- ------------------------ -------- --- ------ - ---------------------------------- ---------
操作元素
一旦我们找到了需要操作的元素，我们可以通过 HTML DOM 提供的方法和属性来对元素进行操作。常见的操作包括修改元素的文本内容，样式，属性等。
修改文本内容
要修改元素的文本内容，我们可以使用 textContent 或 innerHTML 属性。例如，如果我们想修改 id 为 "header" 的元素的文本内容，我们可以这样做：
---- ---------------------- -------- --- ------ - ---------------------------------- ------------------ - ------ ---------
修改样式
要修改元素的样式，我们可以使用 style 属性。例如，如果我们想修改 id 为 "header" 的元素的背景颜色，我们可以这样做：
---- ------------------------ -------- --- ------ - ---------------------------------- ---------------------------- - ------ ---------
修改属性
要修改元素的属性，我们可以直接操作元素的属性。例如，如果我们想给一个链接添加 target 属性，我们可以这样做：
-- --------------------------------- -------- --- ---- - ---------------------------- --------------------------- ---------- ---------
通过以上的示例，我们可以看到如何使用 HTML DOM 导航来查找和操作文档中的元素。在实际开发中，灵活运用这些方法和属性，可以实现丰富多彩的交互效果。