HTML DOM 节点

在 HTML 文档中，每个元素都被表示为一个节点，这些节点构成了文档对象模型（DOM）。DOM 是用来访问和操作 HTML 文档的标准 API，通过 DOM，我们可以动态地改变 HTML 元素的内容、样式和属性。

节点类型

HTML DOM 中主要有以下几种节点类型：

1. 元素节点（Element Node）：代表 HTML 元素，如 <div>、<p>、<h1> 等。
2. 文本节点（Text Node）：代表元素中的文本内容，如 <p> 元素中的文字。
3. 属性节点（Attribute Node）：代表 HTML 元素的属性，如 <a href="https://www.example.com"> 中的 href 属性。
4. 注释节点（Comment Node）：代表 HTML 注释，如 <!-- This is a comment -->。

访问节点

我们可以使用 DOM 提供的方法来访问和操作节点，其中最常用的方法是通过元素的 ID、类名、标签名或选择器来获取元素节点。

通过 ID 获取元素

<div id="myDiv">This is a div element</div>
<script>
    var myElement = document.getElementById("myDiv");
</script>

通过类名获取元素

<div class="myClass">This is a div element</div>
<script>
    var elements = document.getElementsByClassName("myClass");
</script>

通过标签名获取元素

<p>This is a paragraph</p>
<p>This is another paragraph</p>
<script>
    var paragraphs = document.getElementsByTagName("p");
</script>

通过选择器获取元素

<div class="container">
    <p class="myClass">This is a paragraph</p>
</div>
<script>
    var element = document.querySelector(".container .myClass");
</script>

操作节点

一旦获取了元素节点，我们就可以对其进行各种操作，比如修改内容、样式、属性等。

修改内容

<div id="myDiv">This is a div element</div>
<script>
    var myElement = document.getElementById("myDiv");
    myElement.textContent = "This is a new content";
</script>

修改样式

<div id="myDiv">This is a div element</div>
<script>
    var myElement = document.getElementById("myDiv");
    myElement.style.color = "red";
</script>

修改属性

<a id="myLink" href="#">Click me</a>
<script>
    var myLink = document.getElementById("myLink");
    myLink.href = "https://www.example.com";
</script>

以上是关于 HTML DOM 节点的基本介绍，下一节我们将深入讨论如何使用 DOM API 操作节点。