目录
- 文档对象模型(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、异步编程等,你将能够创建出更加复杂和强大的网页应用程序。