七天速成JavaScript！Day 5: DOM操作和事件处理练习

 在七天学习计划的第五天，我们将专注于 JavaScript 中的 DOM 操作和事件处理。通过练习和实践，你将学习如何通过 JavaScript 操纵 HTML 文档中的元素，并处理用户交互事件。这些练习将帮助你构建交互性更强的 Web 应用程序。

欢迎来到七天速成 JavaScript 的第五天！今天我们将着重介绍 DOM 操作和事件处理。准备好了吗？让我们开始练习吧！

DOM 操作 

DOM（Document Object Model）是 HTML 文档的编程接口，它允许我们通过 JavaScript 操作 HTML 元素。请根据以下练习，练习 DOM 操作：

// 练习 1: 获取一个具有 "id" 属性为 "myElement" 的 HTML 元素，并将其内容输出到控制台
var element = document.getElementById("myElement");
console.log("元素的内容为：" + element.innerHTML);

// 练习 2: 修改元素的样式，设置背景颜色为红色
element.style.backgroundColor = "red";

事件处理 

JavaScript 可以用来处理各种用户交互事件，例如点击、鼠标移动等。请根据以下练习，练习事件处理：

// 练习 3: 在一个具有 "id" 属性为 "myButton" 的按钮上添加点击事件处理程序，并在点击时输出一条消息到控制台
var button = document.getElementById("myButton");
button.addEventListener("click", function() {console.log("按钮被点击了！");
});

完成了以上练习后，请在浏览器中打开包含练习代码的 HTML 文件，并观察结果。尝试点击按钮或者查看控制台输出，以验证你的代码是否正确。如果你遇到了问题或者想要检查答案，请随时查阅 JavaScript 的文档或者寻求帮助。

结语

恭喜你完成了七天学习计划的第五天练习！在今天的练习中，你已经学会了通过 JavaScript 操纵 HTML 文档中的元素，并处理用户交互事件。这些知识将为你构建交互性更强的 Web 应用程序打下坚实的基础。明天我们将继续学习 AJAX 和数据请求，敬请期待！记得坚持练习，保持学习的动力。加油！

  相关课程： 7 天快速入门 JavaScript