目录
- 文档对象模型（DOM）
- DOM的基本组成
- 访问和修改DOM
- 事件监听与处理
- 事件监听器
- 常见事件类型
- 实践：使用DOM操作和事件处理增强网页
- 结语
JavaScript的真正威力在于它能够操作和响应网页上的元素。这主要通过文档对象模型（DOM）和事件处理实现。本节课将深入探讨DOM的结构、如何使用JavaScript进行DOM操作，以及如何监听和处理各种事件。
文档对象模型（DOM）
DOM是HTML和XML文档的编程接口，它将文档呈现为一个由节点和对象（如元素、属性甚至文本）组成的树结构。这使得JavaScript可以轻松地访问和操作文档的内容和结构。
DOM的基本组成
- 节点（Node）：DOM树中的每个元素都是一个节点，包括元素节点、文本节点和属性节点。
- 元素（Element）：HTML标签，如
<div>或<p>。 - 属性（Attribute）：元素的特性，如
class或id。 - 文本（Text）：元素内的文本内容。
访问和修改DOM
JavaScript提供了多种方法来访问和修改DOM：
document.getElementById()：通过ID选择元素。document.querySelector()：根据CSS选择器查找第一个元素。document.querySelectorAll()：根据CSS选择器查找所有匹配的元素。
// 获取元素
var header = document.getElementById('header');// 修改内容
header.textContent = '新的标题';// 修改属性
var link = document.querySelector('a');
link.href = 'https://www.example.com';
事件监听与处理
事件是用户或浏览器触发的动作，如点击、滚动或按键。JavaScript可以监听这些事件并执行相应的代码。
事件监听器
addEventListener：为指定元素添加事件监听器。removeEventListener：移除事件监听器。
// 添加事件监听器
button.addEventListener('click', function() {alert('按钮被点击了！');
});// 移除事件监听器
button.removeEventListener('click', handleClick);
常见事件类型
click：鼠标点击。mouseover和mouseout：鼠标悬停和离开。keydown和keyup：键盘按键按下和释放。load和resize：页面加载和大小调整。
实践：使用DOM操作和事件处理增强网页
让我们通过一个示例来展示如何结合DOM操作和事件处理来创建交互式的网页元素。
<!DOCTYPE html>
<html>
<head><title>DOM操作与事件处理示例</title>
</head>
<body><h1 id="header">点击按钮改变标题</h1><button id="changeHeader">改变标题</button><ul id="todoList"><li>购买牛奶</li><li>打扫房间</li><li>回复邮件</li></ul><button id="clearCompleted">清除完成的任务</button><script>// 获取元素var changeHeaderButton = document.getElementById('changeHeader');var header = document.getElementById('header');var todoList = document.getElementById('todoList');var clearCompletedButton = document.getElementById('clearCompleted');// 改变标题的函数function changeHeader() {header.textContent = '标题已改变！';}// 为按钮添加点击事件changeHeaderButton.addEventListener('click', changeHeader);// 清除完成的任务function clearCompletedTasks() {var tasks = todoList.getElementsByTagName('li');for (var i = tasks.length - 1; i >= 0; i--) {if (tasks[i].style.textDecoration === 'line-through') {todoList.removeChild(tasks[i]);}}}// 为清除按钮添加事件监听器clearCompletedButton.addEventListener('click', clearCompletedTasks);// 监听键盘事件实现快捷键功能document.addEventListener('keydown', function(event) {if (event.key === 'Enter') {changeHeader();}});</script>
</body>
</html>
结语
通过本节课的学习，你应该对DOM的结构、如何使用JavaScript进行DOM操作，以及如何监听和处理事件有了深入的理解。这些技能是JavaScript编程中的基础，掌握它们将使你能够创建出具有丰富交互性的网页。继续深入学习JavaScript的高级特性，如Ajax、JSON、异步编程等，你将能够创建出更加复杂和强大的网页应用程序。
