DOM 的定义
DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构，允许开发者通过编程方式动态访问和操作文档的内容、结构和样式。
DOM 的作用
DOM 的主要作用是为开发者提供一种与网页内容交互的方式，使得可以通过 JavaScript 等脚本语言动态地修改网页的内容、结构和样式。
通过 DOM，开发者可以访问和修改 HTML 元素、属性和文本内容。例如，可以动态地添加、删除或修改页面中的元素。
DOM 允许开发者处理用户交互事件，如点击、鼠标移动、键盘输入等。通过事件监听器，可以响应用户的操作并执行相应的逻辑。
DOM 提供了对 CSS 样式的访问和修改能力，使得开发者可以动态地改变元素的样式，实现动画效果或响应式设计。
通过 DOM，开发者可以遍历文档树，查找特定的元素或节点，并对其进行操作。这在处理复杂文档结构时非常有用。
DOM 的树状结构
DOM 将文档表示为一个树状结构，每个节点代表文档中的一个部分。例如，HTML 文档中的每个标签、属性和文本内容都对应 DOM 树中的一个节点。
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
上述 HTML 文档对应的 DOM 树结构如下：
- Document
- html
- head
- title
- "DOM Example"
- title
- body
- h1
- "Hello, World!"
- p
- "This is a paragraph."
- h1
- head
- html
DOM 操作示例
以下是一个简单的 JavaScript 示例，展示了如何使用 DOM 动态修改网页内容：
// 获取 h1 元素
const heading = document.querySelector('h1');
// 修改 h1 元素的文本内容
heading.textContent = 'Welcome to the DOM!';
// 创建一个新的段落元素
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph added via JavaScript.';
// 将新段落添加到 body 中
document.body.appendChild(newParagraph);
通过 DOM，开发者可以灵活地操作网页内容，实现丰富的交互效果和动态更新。
