7-0 如虎添翼——使用DOM操作增强操作的动态响应.pptxVIP

零号任务如虎添翼——使用DOM操作增强操作的动态响应汇报人：xxx时间：2026

任务说明01

在模块6创建的博客页面的基础上，实现对博客的功能扩展及验证，具体要求如下：（1）增加标签：在博客头部增加：添加博客按钮、提供添加与修改的浮窗。（2）实现增加、删除、修改博客功能的函数。（3）通过开发者工具的控制台验证实现的函数。（4）使用console.log()输出调试信息。 零号任务任务说明

知识准备02

01选择节点目录02创建和插入节点05类名与样式操作06替换节点04节点属性修改03节点删除07元素内容与文本操作08调试技巧

1.选择节点知识准备（1）节点模块3与模块6中，简单介绍了DOM这一概念。接下来，将深入介绍如何通过DOM操作网页内容。【例0-1】有如下HTML结构，其运行结果如图所示。右图展示了HTML结构中的各个元素在DOM树中是如何组织。每个矩形框代表一个DOM节点，箭头或线条表示这些节点之间的层级关系。blogContainer是根节点，具有id=blogContainer和class=container属性。从根节点分支出3个子节点，分别是post、postfeatured和另一个post。

1.选择节点知识准备（2）不同方式获取DOM元素DOM操作是网页与JavaScript（简写为JS）交互的桥梁，允许开发者动态地访问和更新HTML文档的内