你好！DOM (Document Object Model - 文档对象模型) 是我们用 JavaScript 与 HTML 页面沟通的桥梁。掌握它，你就能让静态的网页“活”起来。
1. 什么是 DOM？
你可以把一份HTML文档想象成一棵“家族树”。<html> 是最顶层的祖先，它有 head 和 body 两个孩子。body 可能又有 h1, div, p 等多个孩子，div 里面可能还有其他元素...
DOM 就是这棵树的模型。JavaScript 通过操作这棵树上的节点（也就是HTML标签、属性、文本等），来改变页面的结构、样式和内容。
2. 如何选取DOM元素？
要操作一个元素，首先得找到它。以下是几种最常用的方法：
a. 通过 ID 选取 (最常用)
document.getElementById('元素ID')
这是最快、最直接的方法，因为页面中的 ID 应该是唯一的。
<!-- HTML -->
<p id="intro">这是一个介绍段落。</p>
<script>
// JS
const introParagraph = document.getElementById('intro');
console.log(introParagraph.textContent); // 输出: 这是一个介绍段落。
</script>
b. 通过 CSS 选择器选取 (最灵活)
document.querySelector('CSS选择器'): 返回第一个匹配的元素。document.querySelectorAll('CSS选择器'): 返回所有匹配的元素，形成一个NodeList(可以像数组一样遍历)。
这是现代开发中最推荐的方式，因为你可以使用任何CSS选择器（如 .classname, tagname, [attribute] 等）。
<!-- HTML -->
<div class="content">第一条内容</div>
<div class="content">第二条内容</div>
<script>
// JS
// 选取第一个 class 为 content 的元素
const firstContent = document.querySelector('.content');
console.log(firstContent.textContent); // 输出: 第一条内容
// 选取所有 class 为 content 的元素
const allContents = document.querySelectorAll('.content');
allContents.forEach(function(element, index) {
console.log(`第 ${index + 1} 个div:`, element.textContent);
});
</script>
3. 如何修改DOM元素？
找到元素后，我们就可以修改它了。
a. 修改内容
element.textContent: 只修改文本内容，会忽略HTML标签。更安全、性能更好。element.innerHTML: 修改为包含HTML标签的内容。注意：有安全风险，不要用它来插入用户输入的内容，可能导致XSS攻击。
<!-- HTML -->
<h1 id="title">旧标题</h1>
<div id="container"></div>
<script>
// JS
const title = document.getElementById('title');
title.textContent = "这是新的标题"; // 安全地修改文本
const container = document.getElementById('container');
container.innerHTML = "<strong>这是一个加粗的段落</strong>"; // 插入HTML
</script>
b. 修改样式
通过 element.style 属性，你可以修改元素的内联样式。属性名需要使用驼峰命名法（如 backgroundColor 代替 background-color）。
<!-- HTML -->
<div id="box" style="width: 100px; height: 100px; border: 1px solid black;"></div>
<script>
// JS
const box = document.getElementById('box');
box.style.backgroundColor = 'lightblue';
box.style.borderRadius = '10px';
</script>
4. 如何创建和添加DOM元素？
这在动态生成内容时非常有用，比如你的练习题二。
document.createElement('标签名'): 创建一个新元素节点。父元素.appendChild(子元素): 将一个新创建的子元素添加到父元素的末尾。
<!-- HTML -->
<ul id="my-list">
<li>第一项</li>
</ul>
<script>
// JS
// 1. 获取父元素 ul
const list = document.getElementById('my-list');
// 2. 创建一个新的 li 元素
const newItem = document.createElement('li');
// 3. 设置新元素的内容
newItem.textContent = "我是新添加的第二项";
// 4. 将新元素添加到 ul 列表的末尾
list.appendChild(newItem);
</script>
5. 事件处理：让页面响应用户操作
事件处理是交互的核心。我们使用 addEventListener 来监听用户的操作（如点击、鼠标移动等）。
element.addEventListener('事件名称', function() { ... });
<!-- HTML -->
<button id="my-button">点我</button>
<p id="status-text">等待操作...</p>
<script>
// JS
const button = document.getElementById('my-button');
const statusText = document.getElementById('status-text');
button.addEventListener('click', function() {
// 当按钮被点击时，这里的代码会执行
statusText.textContent = "按钮被点击了！";
statusText.style.color = 'green';
});
</script>