chunyu_project/media/learn/courses/13/chapters/56.md

DOM 操作与事件

学习目标

• 理解 DOM 树结构
• 掌握元素选择方法
• 学会事件处理

选择元素

document.getElementById("header");
document.querySelector(".title");
document.querySelectorAll("p");

修改内容

const el = document.querySelector("h1");
el.textContent = "新标题";
el.style.color = "red";
el.classList.add("active");

事件处理

const btn = document.querySelector("button");
btn.addEventListener("click", function() {
    console.log("按钮被点击了！");
});

常见事件

事件	说明
click	点击事件
mouseover	鼠标悬停
keydown	键盘按下
submit	表单提交

动手练习

1. 实现点击按钮改变背景色
2. 制作图片轮播效果
3. 实现表单验证功能