HTML DOM 导航

在 web 前端开发中，HTML DOM（文档对象模型）导航是非常重要的一部分。通过导航，我们可以访问和操作 HTML 文档中的元素，属性和文本内容。在这个章节中，我们将学习如何使用 HTML DOM 导航来查找和操作文档中的元素。

查找元素

要查找文档中的元素，我们可以使用各种方法来选择元素。其中最常见的方法是使用 getElementById()，getElementsByClassName()，getElementsByTagName() 和 querySelector() 等方法。

getElementById()

getElementById() 方法通过元素的 id 属性来查找元素。例如，如果我们有一个 id 为 "header" 的元素，我们可以通过以下方式来获取它：

<div id="header">这是一个标题</div>
<script>
  var header = document.getElementById("header");
</script>

getElementsByClassName()

getElementsByClassName() 方法通过元素的 class 属性来查找元素。例如，如果我们有一个 class 为 "content" 的元素，我们可以通过以下方式来获取它：

<div class="content">这是内容</div>
<script>
  var content = document.getElementsByClassName("content")[0];
</script>

getElementsByTagName()

getElementsByTagName() 方法通过元素的标签名来查找元素。例如，如果我们想获取所有的 <p> 元素，我们可以这样做：

<p>第一段落</p>
<p>第二段落</p>
<script>
  var paragraphs = document.getElementsByTagName("p");
</script>

querySelector()

querySelector() 方法可以通过 CSS 选择器来查找元素。例如，如果我们想获取 id 为 "header" 的元素，我们可以这样做：

<div id="header">这是一个标题</div>
<script>
  var header = document.querySelector("#header");
</script>

操作元素

一旦我们找到了需要操作的元素，我们可以通过 HTML DOM 提供的方法和属性来对元素进行操作。常见的操作包括修改元素的文本内容，样式，属性等。

修改文本内容

要修改元素的文本内容，我们可以使用 textContent 或 innerHTML 属性。例如，如果我们想修改 id 为 "header" 的元素的文本内容，我们可以这样做：

<div id="header">原始标题</div>
<script>
  var header = document.getElementById("header");
  header.textContent = "新标题";
</script>

修改样式

要修改元素的样式，我们可以使用 style 属性。例如，如果我们想修改 id 为 "header" 的元素的背景颜色，我们可以这样做：

<div id="header">这是一个标题</div>
<script>
  var header = document.getElementById("header");
  header.style.backgroundColor = "red";
</script>

修改属性

要修改元素的属性，我们可以直接操作元素的属性。例如，如果我们想给一个链接添加 target 属性，我们可以这样做：

<a href="https://example.com">链接</a>
<script>
  var link = document.querySelector("a");
  link.setAttribute("target", "_blank");
</script>

通过以上的示例，我们可以看到如何使用 HTML DOM 导航来查找和操作文档中的元素。在实际开发中，灵活运用这些方法和属性，可以实现丰富多彩的交互效果。