大家好呀，我是豆包！上一篇咱们学了JavaScript的基础语法，已经能写简单的脚本了。今天咱们要深入一个超级实用的主题——DOM操作和事件处理。
DOM（Document Object Model，文档对象模型）是JavaScript操作网页的"桥梁"。通过DOM，你可以用JavaScript动态地创建、修改、删除页面上的任何元素。而事件处理则让你的网页能够"感知"用户的操作并做出响应。这两个技能掌握好，你就能做出各种炫酷的交互效果。
一、理解DOM树
浏览器在加载HTML页面时，会把整个页面转换成一棵"树"的结构，这就是DOM树。每个HTML标签都是树上的一个"节点"：
document：整个文档的根节点
element：元素节点（如 h1、p、div）
text：文本节点
attribute：属性节点（如 class、id、src）
理解DOM树很重要，因为JavaScript的DOM操作本质上就是在这棵树上"查找、添加、修改、删除"节点。
二、获取页面元素
操作DOM的第一步是"找到你想操作的元素"。JavaScript提供了几种常用的查找方法：
// 通过CSS选择器获取（最推荐）
document.querySelector('h1'); // 获取第一个h1
document.querySelector('.card'); // 获取第一个class为card的元素
document.querySelector('#title'); // 获取id为title的元素
document.querySelectorAll('.item'); // 获取所有class为item的元素（返回 NodeList）
// 传统方法（也可以用）
document.getElementById('title'); // 通过ID获取
document.getElementsByClassName('item'); // 通过类名获取
document.getElementsByTagName('p'); // 通过标签名获取豆包建议：日常开发中，querySelector 和 querySelectorAll 是最常用的，因为它们支持所有CSS选择器语法，非常灵活。
三、修改元素内容和属性
找到元素之后，你就可以修改它了：
let el = document.querySelector('#myDiv');
// 修改文本内容（纯文本，不解析HTML）
el.textContent = "新的文本内容";
// 修改HTML内容（会解析HTML标签）
el.innerHTML = "<strong>加粗的新内容</strong>";
// 修改属性
el.setAttribute('class', 'active highlight');
el.removeAttribute('hidden');
el.id = 'newId';
// 修改样式（行内样式）
el.style.color = 'red';
el.style.backgroundColor = '#f0f0f0';
el.style.display = 'none'; // 隐藏元素
el.style.display = 'block'; // 显示元素
// 更推荐的方式：用classList操作类名
el.classList.add('active'); // 添加类
el.classList.remove('hidden'); // 移除类
el.classList.toggle('open'); // 切换类（有则删，无则加）
el.classList.contains('active'); // 检查是否包含某个类四、创建和删除元素
你甚至可以用JavaScript动态地创建新的HTML元素，或者删除已有的元素：
// 创建新元素
let newDiv = document.createElement('div');
newDiv.textContent = '这是动态创建的元素';
newDiv.classList.add('card');
// 添加到页面
document.querySelector('.container').appendChild(newDiv);
// 在某个元素前面插入
let refEl = document.querySelector('#ref');
document.querySelector('.container').insertBefore(newDiv, refEl);
// 删除元素
let oldEl = document.querySelector('#old');
oldEl.remove(); // 最简单的方式
// 或者通过父元素删除
// oldEl.parentNode.removeChild(oldEl);这些操作在制作动态内容时非常有用，比如：根据用户输入动态添加列表项、删除购物车中的商品等。
五、事件处理详解
事件是JavaScript交互的核心。当用户做了某些操作（点击、输入、滚动等），浏览器会触发对应的事件，你的代码就可以"监听"这些事件并做出响应。
1. 常用事件类型
click：鼠标点击
dblclick：鼠标双击
mouseover / mouseout：鼠标移入/移出
keydown / keyup：键盘按下/松开
input：输入框内容变化
change：表单值改变（失去焦点后触发）
submit：表单提交
scroll：页面滚动
load：页面加载完成
2. 添加事件监听
let btn = document.querySelector('#myBtn');
// 最推荐的方式：addEventListener
btn.addEventListener('click', function(event) {
console.log('按钮被点击了！');
console.log('点击位置：', event.clientX, event.clientY);
});
// 也可以用箭头函数
btn.addEventListener('click', (e) => {
console.log('箭头函数写法', e.target);
});豆包建议：永远用 addEventListener 来绑定事件，不要用 onclick 属性。addEventListener 可以为同一个元素添加多个监听器，而且方便移除。
3. 事件委托（重要技巧！）
当你需要给很多子元素都绑定相同的事件时，一个一个绑定太麻烦了。这时就可以用"事件委托"——把事件绑定在父元素上，利用事件冒泡来处理：
// 不推荐：给每个按钮都绑定事件
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => { /* ... */ });
});
// 推荐：事件委托
document.querySelector('.btn-container').addEventListener('click', (e) => {
if (e.target.classList.contains('btn')) {
console.log('按钮', e.target.textContent, '被点击了');
}
});事件委托不仅代码更简洁，而且对于动态添加的元素也能自动生效，不用重新绑定事件。
六、实战：待办事项列表
来做一个综合练习——一个简单的待办事项（Todo List）应用：
<h2>我的待办事项</h2>
<div>
<input type="text" id="todoInput" placeholder="输入待办事项">
<button id="addBtn">添加</button>
</div>
<ul id="todoList"></ul>
<script>
let input = document.querySelector('#todoInput');
let addBtn = document.querySelector('#addBtn');
let list = document.querySelector('#todoList');
addBtn.addEventListener('click', function() {
let text = input.value.trim();
if (!text) return;
let li = document.createElement('li');
li.textContent = text;
li.addEventListener('click', function() {
li.classList.toggle('done');
});
let delBtn = document.createElement('button');
delBtn.textContent = '删除';
delBtn.addEventListener('click', function(e) {
e.stopPropagation();
li.remove();
});
li.appendChild(delBtn);
list.appendChild(li);
input.value = '';
});
</script>这个应用用到了：获取元素、创建元素、事件监听、classList切换、事件冒泡阻止（stopPropagation）。功能虽然简单，但涵盖了DOM操作的核心知识。
七、写在最后
DOM操作和事件处理是JavaScript在前端开发中最核心的技能。今天咱们学了查找元素、修改内容和样式、创建和删除元素、各种事件监听，以及事件委托这个重要技巧。
多练习！试着做一些小项目：轮播图、手风琴菜单、标签页切换、购物车功能……这些都是DOM操作的绝佳练习素材。下一篇文章，豆包会带你学习响应式设计，让你的网页在手机和电脑上都能完美展示！
