DOM 操作：认为有用
以下部分问题需要您编写一些DOM 操作代码来完成——例如，通过 JavaScript 创建新的 HTML 元素，将其文本内容设置为等于特定的字符串值，并将它们嵌套在页面上现有的元素内部。
我们尚未在课程中明确教授过这部分内容，但您应该会看到一些使用了它的示例，我们希望您能够自行研究需要哪些 DOM API 来成功回答问题。一个好的起点是我们的DOM 脚本入门教程。
事件 1
我们第一个与事件相关的任务涉及一个 <button>，当它被点击时，会更新其文本标签。HTML 不应被修改；只需修改 JavaScript。
要完成此任务，请创建一个事件监听器，该监听器在按钮（btn）被点击时更改其内部的文本，并在再次点击时将其改回。
js
const btn = document.querySelector("button");
// Add your code here
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
if (btn.className === "on") {
btn.textContent = "Machine is off";
btn.className = "off";
} else {
btn.textContent = "Machine is on";
btn.className = "on";
}
});
事件 2
现在我们来看看键盘事件。
要完成此任务，请创建一个事件监听器，当按下键盘上的 WASD 键时，该监听器会移动提供的画布上的圆圈。圆圈使用 drawCircle() 函数绘制，该函数接受以下参数作为输入：
x— 圆圈的 x 坐标。y— 圆圈的 y 坐标。size— 圆圈的半径。
警告： 在测试代码时，您必须在尝试键盘命令之前聚焦画布（例如，单击它，或使用键盘 Tab 键切换到它）。否则它们将不起作用。
js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
function drawCircle(x, y, size) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(x, y, size, 0, 2 * Math.PI);
ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x, y, size);
// Don't edit the code above here!
// Add your code here
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
// ...
// Don't edit the code above here!
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "a":
x -= 5;
break;
case "d":
x += 5;
break;
case "w":
y -= 5;
break;
case "s":
y += 5;
break;
}
drawCircle(x, y, size);
});
事件 3
下一个事件相关的任务将测试您对事件冒泡的知识。我们希望您在 <button> 的父元素（<div class="button-bar"> … </div>）上设置一个事件监听器，当点击任何按钮时被调用时，它会将 button-bar 的背景设置为按钮的 data-color 属性中包含的颜色。
我们希望您在不遍历所有按钮并为每个按钮设置自己的事件监听器的情况下解决此问题。
js
const buttonBar = document.querySelector(".button-bar");
// Add your code here
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const buttonBar = document.querySelector(".button-bar");
function setColor(e) {
buttonBar.style.backgroundColor = e.target.getAttribute("data-color");
}
buttonBar.addEventListener("click", setColor);