【Java 进阶篇】JavaScript DOM 编程：理解文档对象模型

6. 修改元素的属性

var element = document.getElementById("myElement");
element.setAttribute("title", "新的标题");
1
2

上面的代码将改变 id 为 “myElement” 的元素的 title 属性。

7. 获取元素的属性值

var element = document.getElementById("myElement");
var title = element.getAttribute("title");
1
2

上面的代码将获取 id 为 “myElement” 的元素的 title 属性值。

8. 添加事件监听器

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});
1
2
3
4

上面的代码将为 id 为 “myButton” 的按钮元素添加一个点击事件监听器，当按钮被点击时，将弹出一个提示框。

DOM 事件

DOM 事件是 web 开发中的一个关键概念，允许开发者对用户与网页的交互作出响应。以下是一些常见的 DOM 事件：

1. click 事件

click 事件在元素被点击时触发。你可以为按钮、链接或其他元素添加 click 事件监听器，以便在用户点击时执行相应的操作。

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});
1
2
3
4

2. mouseover 和 mouseout 事件

mouseover 事件在鼠标指针移入元素时触发，而 mouseout 事件在鼠标指针移出元素时触发。这些事件可用于创建悬停效果。

var element = document.getElementById("myElement");
element.addEventListener("mouseover", function() {
  element.style.backgroundColor = "yellow";
});

element.addEventListener("mouseout", function() {
  element.style.backgroundColor = "white";
});
1
2
3
4
5
6
7
8

上面的代码将在鼠标指针移入元素时将元素的背景颜色更改为黄色，而在鼠标指针移出元素时将其还原为白色。

3. keydown 事件

keydown 事件在用户按下键盘上的键时触发。你可以使用这个事件来捕获用户的按键操作，例如输入文本或控制游戏。

document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    alert("Enter 键被按下了！");
  }
});
1
2
3
4
5

上面的代码将在用户按下 Enter 键时触发一个提示框。

4. submit 事件

submit 事件在表单提交时触发。你可以使用这个事件来验证用户输入或执行其他操作，然后阻止表单提交或继续提交。

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  if (!validateForm()) {
    event.preventDefault(); // 阻止表单提交
  }
});
1
2
3
4
5
6

上面的代码将在表单提交时调用 validateForm 函数来验证用户的输入，如果验证失败，则阻止表单提交。

总结

DOM 是 web 开发中的一个关键概念，它允许开发者使用 JavaScript 来访问和操作网页的内容。通过获取元素、改变文本内容、操作样式、添加事件监听器和处理事件，你可以创建交互性丰富的网页。在深入学习 web 开发时，掌握 DOM 操作是必不可少的一部分。

希望本篇博客能够帮助你更好地理解 DOM，以及如何使用 JavaScript 进行 DOM 编程。