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

零号任务如虎添翼——使用DOM操作增强操作的动态响应汇报人：xxx时间：2026任务说明01在模块6创建的博客页面的基础上，实现对博客的功能扩展及验证，具体要求如下：（1）增加标签：在博客头部增加：添加博客按钮、提供添加与修改的浮窗。（2）实现增加、删除、修改博客功能的函数。（3）通过开发者工具的控制台验证实现的函数。（4）使用console.log()输出调试信息。 零号任务任务说明知识准备0201选择节点目录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文档的内容、结构和样式。通过节点选择方法，我们可以精确获取页面上的特定元素节点，并对其进行各种操作。主要方法及其示例如图所示。1.

选择节点知识准备（2）不同方式获取DOM元素DOM操作是网页与JavaScript（简写为JS）交互的桥梁，允许开发者动态地访问和更新HTML文档的内容、结构和样式。通过节点选择方法，我们可以精确获取页面上的特定元素节点，并对其进行各种操作。

HTMLCollection是一种动态的集合，它会自动反映DOM树中的变化。如果你在页面上添加了一个新的post类的元素，postsByClass集合会立即包含这个新元素。

NodeList是一种静态的集合，它不会自动更新。即使你在页面上添加了一个新的post类的元素，allPostsByQuery集合也不会自动包含这个新元素，除非重新执行querySelectorAll()方法。HTMLCollection和NodeList分别是什么？2.创建和插入节点知识准备【例0-3】在前面例子的基础上实现如下代码。3.删除节点知识准备删除指定的子节点使用removeChild()方法。parentNode.removeChild(node);//从DOM树中删除指定的子节点【例0-4】删除第一个post子节点，在前面的例子的基础上添加如下代码。3.删除节点3.删除节点3.删除节点知识准备设置节点属性值使用setAttribute()方法。获取节点属性值使用getAttribute()方法。

3.删除节点4.修改节点属性判断节点是否有指定属性使用hasAttribute()方法。3.删除节点知识准备3.删除节点4.修改节点属性【例0-5】修改节点属性，在前面例子的基础上添加如下代码。5.类名与样式操作知识准备在DOM操作中，除了通过setAttribute和getAttribute来修改和获取元素的属性外，还可以使用classList属性来操作元素的类名，以及通过style属性直接设置内联样式，如图所示。6.替换节点知识准备替换父节点中的某个子节点使用replaceChild()方法。newNode是新的节点，oldNode是要被替换的节点。replaceChild(newNode,oldNode)【例0-6】使用replaceChild()方法替换节点。上述代码将父节点的第一个子节点替换为新创建的节点。这种操作常用于动态更新页面内容的场景，例如在用户交互后更新列表项、替换表单输入框的内容，或者在加载新数据时刷新页面中的特定部分。7.元素内容与文本操作知识准备获取或设置节点值使用nodeValue()方法。letnodeValue=textNode.nodeValue;//获取或设置节点值（对于文本节点）。获取或设置节点的文本内容使用textContent()方法。element.textContent;//获取或设置节点的文本内容【例0-7】在前面例子的基础上添加如下代码。7.元素内容与文本操作知识准备

除操作纯文本内容外，我们还可以通过innerHTML来操作包含HTML标签的内容。以下是innerHTML和textContent的区别及适用场景。

innerHTML：获取或设置元素的HTML内容，包括标签和文本，适用于需要操作HTML结构的场景。

textContent：获取或设置元素的文本内容，忽略HTML标签，适用于只需要操作文本内容的场景。8.调试技巧知识准备使用console.log()检查元素状态console.log(message);//向控制台输出一条消息，用于调试【例0-8】在前面例子的基础上添加如下代码。这段代码使用console.log()输出调试信息，先输出所有post类元素的数量，再检查featuredPost的data-id属性值，帮助验证代码是否正确运行。任务实现03任务实现（1）添加与修改博客功能（2）删除博客功能（3）增加输入框与添加按钮（4）设置浮窗，用于添加和修改博客内容任务实现实现添加新博客的功能，同理可得编辑功能的实现方式和效果