第11节课：DOM操作与事件处理——JavaScript控制网页的秘诀

学问小小谢

于 2024-08-05 18:03:58 发布

阅读量188

点赞数 15

分类专栏： HTML学习文章标签： javascript 开发语言 html 学习前端

本文链接：https://blog.csdn.net/XWXXX666/article/details/140933457

版权

HTML学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

学问小小谢

关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
第11节课：DOM操作与事件处理——JavaScript控制网页的秘诀

JavaScript的真正威力在于它能够操作和响应网页上的元素。这主要通过文档对象模型（DOM）和事件处理实现。本节课将深入探讨DOM的结构、如何使用JavaScript进行DOM操作，以及如何监听和处理各种事件。
复制链接

扫一扫

专栏目录