在学习 JavaScript 的过程中，理解 DOM（文档对象模型）是至关重要的。DOM 是一种用于描述 HTML 和 XML 文档的编程接口。它将文档视作一棵树，节点代表文档的各个部分，使得 JavaScript 可以动态地访问和更新文档的内容、结构和样式。

DOM 的基本概念

DOM 把每个 HTML 元素都视为一个对象。通过这些对象，可以获取和修改页面的元素、属性和内容。

节点（Node）：DOM 中的基本单位，代表文档中的一个部分，比如元素节点、文本节点等。
元素节点（Element Node）：对应 HTML 文档中的标签，例如 <div>、<p>、<span> 等。
文本节点（Text Node）：包含节点文本内容的节点，属于元素节点的子节点。

例如，对于下面的 HTML 代码：

<div id="container">
  <p>Hello, world!</p>
</div>

在这个结构中，<div> 和 <p> 都是元素节点，而 "Hello, world!" 是文本节点。

DOM 树

我们可以将整个文档看作是一棵树，最顶端的元素是根节点（通常是 document 对象），然后是各个元素节点和文本节点。以下是上述 HTML 的 DOM 树示意图：

document
  └── html
       └── body
            └── div#container
                 └── p
                     └── "Hello, world!"

如何使用 JavaScript 操作 DOM

JavaScript 提供了多种方法来操作 DOM，这使得我们可以通过编程的方式来动态改变网页内容。常见的 DOM 操作包括创建、修改和删除元素。

创建元素

使用 document.createElement 方法可以创建一个新的 DOM 元素。例如，创建一个新的 div 元素并将其加入到文档中：

// 创建一个新的 div 元素
var newDiv = document.createElement("div");
newDiv.textContent = "这是一个新创建的 div。";

// 将新元素添加到文档中
document.body.appendChild(newDiv);

修改元素

你可以通过 DOM API 来修改元素的内容或属性。例如，改变已有元素的文本：

var existingParagraph = document.querySelector("p"); // 选择第一个 <p> 元素
existingParagraph.textContent = "内容已被修改！"; // 修改文本内容

删除元素

要删除 DOM 中的元素，可以使用 parentNode.removeChild() 方法。比如，删除刚刚添加的 div 元素：

var divToRemove = document.querySelector("div"); // 选择需要删除的 div
divToRemove.parentNode.removeChild(divToRemove); // 删除 div

小案例：动态生成带有用户输入的列表

以下是一个简单的示例，通过用户输入动态生成一个列表。用户可以在输入框中输入内容，并点击按钮将其添加到列表中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态列表示例</title>
</head>
<body>
    <input type="text" id="inputItem" placeholder="输入内容">
    <button id="addButton">添加到列表</button>
    
    <ul id="itemList"></ul>

    <script>
        document.getElementById("addButton").onclick = function() {
            var input = document.getElementById("inputItem").value; // 获取用户输入

            if (input) { // 确保输入非空
                var li = document.createElement("li"); // 创建新列表项
                li.textContent = input; // 设置内容
                document.getElementById("itemList").appendChild(li); // 添加到列表中

                document.getElementById("inputItem").value = ""; // 清空输入框
            }
        };
    </script>
</body>
</html>

在这个案例中，用户可以在输入框中输入项的名称，然后点击 添加到列表 按钮，JavaScript 将创建新的列表项并将其添加到未排序的列表中。

结论

理解 DOM 是学习 JavaScript 的基础，它使得我们能够创建动态和交互式的网页。掌握 DOM 操作方法后，你将能够灵活地处理网页中的元素，为用户提供更好的体验。接下来，在我们的下一个章节中，将更深入地探讨如何选择和修改 DOM 元素，这将进一步扩展你的前端开发技能。

Jupyter AI

19 什么是DOM