HTML5网页制作与前端开发（AI协同）课件 模块7　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）设置浮窗，用于添加和修改博客内容任务实现实现添加新博客的功能，同理可得编辑功能的实现方式和效果参考效果图任务实现在控制台中输入“deleteBlog(13);”删除id为13的博客内容，弹出弹窗询问操作警告。任务实现在必要的操作中，使用console.log()可以方便开发调试。可以询问AI助手获取建议谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026一号任务事半功倍——使用事件处理机制提高交互的精准性任务说明01 零号任务已经实现添加、删除、修改博客功能的逻辑，本任务通过事件监听器实现页面交互，并且确保对事件进行精准处理。具体要求如下。（1）通过事件监听器实现添加、删除、修改博客功能的页面交互。（2）使用事件对象获取事件触发元素，阻止默认行为或事件冒泡。一号任务任务说明知识准备0201添加和移除事件监听器03事件对象的使用目录02常见事件类型及其使用场景04事件冒泡和捕获1.添加和移除事件监听器知识准备（1）添加监听器element.addEventListener(event,handler[,options]);①event：事件类型（如click、keydown等）。②handler：当事件触发时执行的回调函数。③options：可选参数，可以是一个布尔值或一个对象，用于指定事件监听器的行为。常见的选项如下。capture：布尔值，指定事件是否在捕获阶段触发（默认值为false，在冒泡阶段触发）。once：布尔值，指定事件监听器是否只触发一次（默认值为false）。passive：布尔值，指定事件监听器是否永远不会调用preventDefault()（默认为false）。1.添加和移除事件监听器知识准备（2）移除监听器element.removeEventListener(event,handler[,options]);移除事件监听需确保参数与添加时完全一致，包括回调函数引用。【例1-1】点击事件的添加与移除。2.常见事件类型及其使用场景知识准备在Web开发中，合理使用事件，可以实现丰富的用户交互和动态效果。【例1-2】双击放大图片。constimage=document.querySelector("#image");image.addEventListener("dblclick",()=>{console.log("图片被双击");image.style.transform="scale(1.5)";//放大图片});【例1-3】快捷键功能示例。document.addEventListener("keydown",(e)=>{if(e.ctrlKey&&e.key==="s"){e.preventDefault();console.log("Ctrl+S被按下");}});【例1-4】实时搜索。constsearchInput=document.querySelector("#searchInput");searchInput.addEventListener("keyup",(e)=>{console.log("输入内容：",e.target.value);//调用搜索接口});【例1-5】阻止默认提交行为。constform=document.querySelector("#myForm");form.addEventListener("submit",(e)=>{e.preventDefault();console.log("表单已提交，数据已处理");});2.常见事件类型及其使用场景知识准备【例1-6】表单验证。constemailInput=document.querySelector("#emailInput");emailInput.addEventListener("change",(e)=>{if(!e.target.value.includes("@")){console.log("请输入有效的邮箱地址");}});【例1-7】懒加载图片。window.addEventListener("scroll",()=>{constimg=document.querySelector("img.lazy");if(img.offsetTop<window.innerHeight+window.scrollY){img.src=img.dataset.src;//加载图片}});【例1-8】显示/隐藏导航栏。constnavbar=document.querySelector("#navbar");window.addEventListener("scroll",()=>{if(window.scrollY>100){navbar.style.top="-50px";//隐藏导航栏}else{navbar.style.top="0";//显示导航栏}});【例1-9】动态调整布局。window.addEventListener("resize",()=>{if(window.innerWidth<768){console.log("切换到移动端布局");document.body.style.backgroundColor="lightblue";}else{console.log("切换到桌面端布局");document.body.style.backgroundColor="white";}

});3.事件对象的使用知识准备事件对象（event或e）是事件触发时自动传递给事件处理函数的参数，它包含与事件相关的所有信息。通过事件对象，开发者可以获取触发事件的元素、阻止默认行为或控制事件的传播。常用属性和方法如下。（1）event.target获取触发事件的元素。确定事件的具体触发源，特别是在事件委托中非常有用。例如，单击按钮时，event.target会返回被点击的按钮元素。【例1-10】获取触发事件的元素。3.事件对象的使用知识准备（2）event.preventDefault()阻止事件的默认行为，适用于需要自定义事件行为的场景，如表单验证失败时阻止提交，或阻止链接的默认跳转等行为。【例1-11】阻止事件的默认行为。（3）event.stopPropagation()阻止事件冒泡，即阻止事件从当前元素向上层传递，适用于需要隔离事件传播的场景。例如，在下拉菜单中单击时不触发父元素的点击事件。【例1-12】阻止事件冒泡。4.事件冒泡和捕获知识准备4.事件冒泡和捕获知识准备控制传播与事件冒泡、事件捕获的关系在于：控制传播提供了对事件传播过程的主动干预能力，在事件冒泡或捕获阶段阻止事件的进一步传播，从而精确控制事件的流向和行为。这种机制在需要隔离事件或确保特定逻辑优先执行时非常有用，是对事件冒泡和事件捕获的重要补充。【例1-13】单击列表项时输出其内容。上面的例子使用了事件委托，通过将事件监听器绑定到父元素（#myList）来处理子元素（<li>）的点击事件。这种方式有以下丰富的适用场景。动态列表：如待办事项列表，用户可以通过单击删除或编辑某一项。表格操作：在表格中单击某一行或某一列时触发特定操作。导航菜单：单击菜单项时切换内容或执行其他操作。任务实现03任务实现01修改Blog类中的

createHTML()方法，在每个博客卡片底部添加一个“修改”按钮和另一个“删除”按钮02将单独的操作方法迁移到事件监听器中。将addNewBlog()、

saveBlog()、closePreviewDialog()、deleteBlog()、

editBlog()改为事件监听器中的逻辑。任务实现阻止默认行为或事件冒泡。需要阻止默认行为或事件冒泡，可以在事件处理函数中使用e.preventDefault()或e.stopPropagation()。03谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026二号任务举重若轻——使用闭包提效及防抖技术任务说明01（1）实现博客内容的搜索功能。（2）使用防抖技术优化搜索功能和其他高频事件。（3）减少不必要的函数调用，提升页面响应速度和性能。二号任务任务说明知识准备0201闭包目录匿名函数02防抖技术031.闭包知识准备（1）闭包的概念闭包是指函数能够捕获并记住其定义时的作用域环境。即使函数在其词法（LexicalScope）作用域之外执行，它仍然能够访问定义时的外部变量。这种特性使得闭包在JavaScript中非常强大，尤其是在处理异步操作和封装数据时。【例2-1】基本闭包示例。为什么不直接调用outerFunction()，而是使用constclosureExample=outerFunction();

闭包的重要意义在于让函数能够“记住”并访问其定义时的作用域环境，即使函数在其词法作用域之外执行。如果直接调用outerFunction()，闭包的作用就无法体现，因为返回的innerFunction没有被保存。1.闭包知识准备（2）在函数内部访问外部函数中的变量在函数内部可以访问其外部函数中的变量，是闭包的核心特性之一。通过闭包，我们可以在函数内部访问和操作外部函数的变量，而不需要将这些变量暴露在全局作用域中。【例2-2】使用闭包封装计数器在这个例子中，count变量被封装在counter()函数内部，外部无法直接访问count，但通过闭包，increment()函数可以访问并修改count的值。这种特性使得闭包非常适合用于封装私有变量和实现数据隐藏。1.闭包知识准备（3）闭包的优势【例2-3】使用闭包实现数据隐藏2.匿名函数知识准备（1）匿名函数的定义匿名函数是指没有名称的函数，通常作为参数传递给其他函数，或者用于立即执行函数表达式（EImmediatelyInvokedFunctionExpression）。匿名函数在JavaScript中非常常见，特别是在处理回调函数时。【例2-4】匿名函数作为定时器回调。在这个例子中，setTimeout()函数的第一个参数是一个匿名函数，它将在1秒后执行。（2）匿名函数作为参数传递在JavaScript中，函数可以作为参数传递给其他函数，这种特性使得我们可以将行为（函数）作为数据传递，从而实现更灵活的代码设计。【例2-5】匿名函数作为参数传递。在这个例子中，function(){console.log('Thisisacallbackfunction');}是一个匿名函数。Greet()函数接收一个回调函数作为其参数，并在执行完主要逻辑后调用该回调函数。具体来说，这个匿名函数被作为回调函数传递给greet()函数，并在其内部被执行。3.防抖技术知识准备（1）原理①定义：防抖（Debounce）技术用于限制某个函数在短时间内多次触发时的执行次数。②目的：减少不必要的计算和资源消耗，适用于频繁触发的事件（如输入、滚动、窗口调整等）。（2）工作流程①触发事件时，启动一个定时器。②如果在定时器到期前事件再次触发，则重置定时器。③只有当事件停止触发一段时间后，定时器到期，回调函数才会执行。当事件触发时，不会立即执行回调函数，而是启动一个定时器；如果在定时器到期之前事件再次触发，定时器会被重置，回调函数的执行会被推迟；只有当事件停止触发一段时间后，定时器才会到期，回调函数才会被执行。这种机制可以有效减少频繁触发事件时的回调函数执行次数，从而优化性能。3.防抖技术知识准备（3）实现方式基本实现：防抖函数可以通过闭包和定时器来实现。每次事件触发时，清除之前的定时器并重新设置一个新的定时器。【例2-6】基本防抖函数的实现。在这个例子中，有如下几个要点。闭包的作用：timeoutId被封装在debounce()函数的闭包中，确保每次调用返回的函数都能访问和修改同一个timeoutId。定时器的管理：每次事件触发时，clearTimeout(timeoutId)会清除之前的定时器，防止回调函数被多次执行。setTimeout()会重新设置一个新的定时器，延迟执行回调函数。回调函数的执行：只有当事件停止触发超过delay时间（例如300毫秒）后，定时器才会到期，回调函数才会被执行。通过防抖技术，可以有效减少频繁触发事件的回调函数执行次数，从而优化性能。防抖的核心在于延迟执行、重置定时器、减少执行次数。任务实现03任务实现01实现防抖函数将防抖函数定义放在

<script>

标签顶部。02实现搜索功能在零号任务中已经添加id为searchInput的搜索输入框，需要具体实现监听searchInput的input事件。使用debouncedSearch()函数处理搜索逻辑，确保搜索操作不会过于频繁。在debouncedSearch()函数中，获取所有博客卡片（.blog-card），并根据输入的搜索词过滤显示内容。任务实现使用防抖技术优化搜索功能将搜索输入框的input事件处理函数包装在debounce()函数中，确保搜索操作不会过于频繁。 03优化其他高频事件04任务实现实现后能得到防抖效果，如图所示。此外，使用防抖技术编辑删除按钮，旨在防止连续单击的频繁操作。谢谢大家汇报人：xxx时间：2026技能补强齐心协力——开发多人协作编辑器汇报人：xxx时间：2026技能知识011.WebSocket技能知识（1）WebSocket简介WebSocket是一种在单个TCP（TransmissionControlProtocol，传输控制协议）连接上进行全双工通信的协议，允许客户端和服务器之间进行实时数据交换。与传统的HTTP请求不同，WebSocket提供持久化的连接，适合需要实时通信的场景，如多人协作编辑器。（2）实时通信在多人协作编辑器中，WebSocket用于实时同步用户的编辑内容。通过WebSocket，服务器可以广播每个用户的编辑操作，确保所有用户的编辑器内容保持一致。实现方式如下。实现方式：①客户端通过WebSocket向服务器发送编辑操作。②服务器接收操作后，广播给其他客户端。③客户端收到广播后，更新本地编辑器内容。2.数据同步机制通过WebSocket实时同步编辑内容，将用户的编辑操作迅速传递给服务器和其他客户端，便于后续在服务器或客户端上应用OT算法来处理操作冲突，确保文档的一致性，可以看作OT的一种简化实现。若对此算法感兴趣，可以向AI助手提问并了解如何确保多个用户在不同时间对同一文档进行的修改能够正确合并。3.编辑器的基本构成技能知识（1）文本操作①HTMLEditingAPIs通过document.execCommand()方法，我们可以实现对文本的格式化操作，如设置加粗、斜体、下划线、对齐方式等。这些操作直接修改DOM结构，适用于富文本编辑器。常用命令如下。bold：将文本设置为加粗样式。italic：使文本呈现斜体效果。underline：为文本添加下划线。justifyLeft、justifyCenter、justifyRight：设置文本左对齐、居中对齐或右对齐。②SelectionAPIwindow.getSelection()

用于获取用户选中的文本内容，结合

Range

对象，我们可以进行对选中文本的精确操作，如剪切、复制、粘贴等。核心功能如下。获取选中文本的范围和内容。对选中文本进行操作（如插入、删除、格式化）。

（2）用户权限管理通过WebSocket实现简单的锁定机制，确保同一时间只有一个用户可以编辑特定内容。当用户获得锁定时，其他用户无法编辑该内容，避免冲突。实现方式如下。①客户端请求锁定时，服务器检查内容是否已被锁定。②如果未被锁定，则设置锁定状态并广播给其他客户端。③锁定状态下，其他客户端无法编辑内容。具体示例代码如下：4.剪贴板功能的安全考量技能知识ClipboardAPIandEvents使用navigator.clipboard.writeText()和navigator.clipboard.readText()实现安全的复制和粘贴功能。这些API提供了对剪贴板的直接访问，同时遵循浏览器的安全策略。安全问题：剪贴板操作可能涉及敏感数据，因此浏览器对剪贴板的访问进行了严格限制。只有在用户主动触发的事件（如单击按钮）中，才能访问剪贴板内容。（1）撤销与重做通过维护undoStack和redoStack，实现编辑器的撤销和重做功能。每次用户输入时，当前编辑器的状态会被压入undoStack，进行撤销操作时从栈中恢复之前的状态。（2）冲突解决在多人协作编辑器中，冲突解决是一个重要问题。虽然目前代码中没有实现复杂的冲突解决机制，但通过WebSocket实时同步内容，可以避免大部分可能存在的冲突。2.数据同步机制技能实践021.准备工作技能实践（1）确保已经安装了Node.js创建一个项目目录并初始化Node.js项目。

mkdircollaborative-editor cdcollaborative-editor npminit-y（2）安装所需的依赖库。

npminstallws npminstall-glocaltunnelws：用于创建WebSocket服务器。localtunnel：用于将本地服务器暴露到公网，方便多人协作。（3）新建文件。 在根目录下新建WebSocket服务器的server.js文件和编辑器页面index.html文件。2.使用AI助手辅助完成server.js技能实践

server.js文件需要通过AI助手完成，我们提供关键点和逻辑描述的导图如图所示，让AI助手生成代码，并且不断提问获得更加精确的结果。3.通过代码和API实现编辑器技能实践

编辑器的关键点和逻辑描述的导图如图所示，其中文本编辑相关API提供更为便捷的文本DOM操作，更多用法可通过官方文档或AI助手学习。4.运行WebSocket和HTTP服务器并测试技能实践（1）启动本地服务①启动HTTP服务器：在项目的根目录下启动一个静态文件服务器。

http-server.

②使用LocalTunnel公开本地服务：为了使本地服务可以在互联网上被访问，从而实现多人协作编辑，需要使用LocalTunnel。执行以下命令（确保端口号与WebSocket服务器监听的端口号一致），这将生成一个临时的公网URL。

lt--port8080③启动WebSocket服务器：在项目根目录下启动之前编写的WebSocket服务器。

nodeserver.js（2）调整客户端连接配置更新WebSocket连接地址：根据LocalTunnel提供的公网URL，修改前端代码中的WebSocket连接地址LocalTunnel（分配的地址），注意替换为你实际得到的LocalTunnelURL。

constsocket=newWebSocket('wss://your-lt-url.loca.lt');4.运行WebSocket和HTTP服务器并测试技能实践（3）测试多用户协作环境①在同一局域网内测试：虽然LocalTunnel使得不同网络下的用户可以访问你的应用，但在同一局域网内的设备上测试多人协作编辑功能会更加简便。可以直接通过HTTP服务器提供的IP地址加上端口号（如http://localhost:8080或局域网内的实际IP地址）来访问应用，并尝试从多个窗口或设备同时连接以验证实时协作功能是否正常工作。②跨网络测试：利用LocalTunnel生成的公网URL，可以在不同的网络环境下打开浏览器，访问该URL来测试多人协作编辑功能。确保所有用户都能看到实时更新的内容以及正确的锁定状态变化。

在代码实现中通过简单的UUID生成方法，判断不同用户的操作，方便后续调试，其效果如图所示。思考与练习请同学们注意：填空题考查DOM元素获取方法、事件处理及防抖技术的核心机制；判断题分析DOM集合特性、元素内容操作、事件传播机制及防抖的作用；选择题判别元素获取方法、元素创建方式、DOM加载事件、防抖技术核心及WebSocket的应用场景