課程教學(xué)設(shè)計(jì)課程名稱本課名稱所授章節(jié)項(xiàng)目6商品放大鏡——DOM對(duì)象授課對(duì)象選用教材《JavaScript前端開(kāi)發(fā)程序設(shè)計(jì)項(xiàng)目式教程》課時(shí)數(shù)2【學(xué)情分析】知識(shí)基礎(chǔ)學(xué)生已能操作現(xiàn)有DOM元素，但對(duì)于如何在運(yùn)行時(shí)動(dòng)態(tài)地向頁(yè)面中“注入”全新的內(nèi)容（創(chuàng)建節(jié)點(diǎn)）、復(fù)制現(xiàn)有內(nèi)容（克隆節(jié)點(diǎn)）或清理不需要的內(nèi)容（刪除節(jié)點(diǎn)）缺乏了解。能力基礎(chǔ)能夠修改頁(yè)面，但無(wú)法實(shí)現(xiàn)內(nèi)容的動(dòng)態(tài)增刪，如評(píng)論列表、購(gòu)物車(chē)商品增減等功能。素養(yǎng)基礎(chǔ)渴望掌握構(gòu)建動(dòng)態(tài)、可交互Web應(yīng)用的完整能力，對(duì)實(shí)現(xiàn)內(nèi)容的動(dòng)態(tài)管理有強(qiáng)烈需求?！窘虒W(xué)目標(biāo)】知識(shí)目標(biāo)1.掌握使用document.createElement()、createTextNode()創(chuàng)建新節(jié)點(diǎn)的方法。

2.掌握使用appendChild()、insertBefore()將節(jié)點(diǎn)插入DOM樹(shù)的方法。

3.掌握使用cloneNode()復(fù)制節(jié)點(diǎn)和replaceWith()替換節(jié)點(diǎn)的方法。

4.掌握使用remove()方法刪除節(jié)點(diǎn)。能力目標(biāo)1.能夠根據(jù)用戶操作或數(shù)據(jù)變化，動(dòng)態(tài)地向頁(yè)面中添加新的元素。

2.能夠?qū)崿F(xiàn)如“添加評(píng)論”、“復(fù)制表單”、“刪除列表項(xiàng)”等常見(jiàn)交互功能。素養(yǎng)目標(biāo)1.培養(yǎng)動(dòng)態(tài)內(nèi)容管理和內(nèi)存管理的意識(shí)。

2.提升構(gòu)建完整Web應(yīng)用的功能模塊能力?！窘虒W(xué)分析】?jī)?nèi)容分析本課完成了DOM操作的“增、刪、改、查”閉環(huán)。重點(diǎn)在于讓學(xué)生掌握如何主動(dòng)地、動(dòng)態(tài)地改變DOM樹(shù)的結(jié)構(gòu)，而不僅僅是修改現(xiàn)有節(jié)點(diǎn)的屬性。這是實(shí)現(xiàn)現(xiàn)代Web應(yīng)用動(dòng)態(tài)性的核心。重點(diǎn)createElement

+

appendChild

創(chuàng)建并添加節(jié)點(diǎn)；remove()

刪除節(jié)點(diǎn)；cloneNode(deep)

深/淺復(fù)制。難點(diǎn)理解insertBefore的參考節(jié)點(diǎn)參數(shù)；掌握cloneNode的deep參數(shù)對(duì)復(fù)制行為的影響。【教學(xué)策略和方法】教學(xué)策略采用“問(wèn)題情境驅(qū)動(dòng)-分步技能解鎖-綜合任務(wù)挑戰(zhàn)”的教學(xué)策略。以“待辦事項(xiàng)列表”這一經(jīng)典應(yīng)用場(chǎng)景貫穿始終，讓學(xué)生在解決真實(shí)問(wèn)題的過(guò)程中，自然習(xí)得各項(xiàng)DOM操作技能。教學(xué)方法任務(wù)驅(qū)動(dòng)法、演示法、案例教學(xué)法、小組協(xié)作法?！菊n程思政】本課課程思政元素工程規(guī)范、效率意識(shí)、責(zé)任擔(dān)當(dāng)。切入方法與舉措1.工程規(guī)范：強(qiáng)調(diào)應(yīng)優(yōu)先使用標(biāo)準(zhǔn)的DOMAPI（如createElement）來(lái)構(gòu)建動(dòng)態(tài)內(nèi)容，而非拼接字符串后使用innerHTML，以保證代碼的可維護(hù)性和安全性。

2.效率意識(shí)：通過(guò)對(duì)比innerHTML（一次性重繪）和appendChild（多次重繪）的性能差異，引導(dǎo)學(xué)生思考在不同場(chǎng)景下選擇最優(yōu)方案，培養(yǎng)性能優(yōu)化意識(shí)。

3.責(zé)任擔(dān)當(dāng)：在講解remove()時(shí)，引申出前端開(kāi)發(fā)者對(duì)用戶體驗(yàn)的責(zé)任——及時(shí)清理無(wú)用DOM，可以減少內(nèi)存占用，提升應(yīng)用流暢度?！窘虒W(xué)實(shí)施過(guò)程】步驟環(huán)節(jié)（用時(shí)）具體內(nèi)容活動(dòng)設(shè)計(jì)意圖教師學(xué)生1情境導(dǎo)入

(5分鐘)展示一個(gè)“待辦事項(xiàng)（To-DoList）”應(yīng)用的初始界面。提問(wèn)：如何實(shí)現(xiàn)點(diǎn)擊“添加”按鈕后，在列表下方動(dòng)態(tài)增加一個(gè)新的待辦項(xiàng)？引出動(dòng)態(tài)創(chuàng)建和插入節(jié)點(diǎn)的需求。演示靜態(tài)頁(yè)面，提出核心問(wèn)題，激發(fā)學(xué)生思考。觀察并思考：現(xiàn)有的DOM操作知識(shí)不足以解決此問(wèn)題，需要學(xué)習(xí)新技能。以高頻應(yīng)用場(chǎng)景切入，明確學(xué)習(xí)目標(biāo)，激發(fā)求知欲。2技能解鎖1：創(chuàng)建與插入節(jié)點(diǎn)

(20分鐘)1.創(chuàng)建節(jié)點(diǎn)：

-

document.createElement('li')

-

document.createTextNode('買(mǎi)牛奶')

2.組裝節(jié)點(diǎn)：

-

li.appendChild(textNode)

3.插入節(jié)點(diǎn)：

-

ul.appendChild(li)

-

parent.insertBefore(newNode,existingNode)

演示：現(xiàn)場(chǎng)編碼，實(shí)現(xiàn)“添加待辦事項(xiàng)”功能。邊講邊寫(xiě)代碼，清晰展示從創(chuàng)建到插入的完整流程。特別解釋insertBefore的用法。跟隨老師敲代碼，理解每個(gè)API的作用，并嘗試修改任務(wù)內(nèi)容。掌握動(dòng)態(tài)構(gòu)建DOM結(jié)構(gòu)的基礎(chǔ)方法。3技能解鎖2：復(fù)制與替換節(jié)點(diǎn)

(15分鐘)1.復(fù)制節(jié)點(diǎn)：

-

form.cloneNode(false)

(淺拷貝，僅復(fù)制表單本身)

-form.cloneNode(true)

(深拷貝，復(fù)制表單及其所有子元素)

2.替換節(jié)點(diǎn)：

-

oldElement.replaceWith(newElement)

演示：實(shí)現(xiàn)“一鍵復(fù)制整個(gè)聯(lián)系表單”的功能。強(qiáng)調(diào)深淺拷貝的區(qū)別，并指出克隆后原節(jié)點(diǎn)的事件監(jiān)聽(tīng)器會(huì)丟失，為后續(xù)事件委托做鋪墊。動(dòng)手練習(xí)，觀察深淺拷貝在控制臺(tái)輸出的差異。學(xué)習(xí)高效復(fù)用現(xiàn)有DOM結(jié)構(gòu)的技巧。4技能解鎖3：刪除節(jié)點(diǎn)

(10分鐘)1.刪除節(jié)點(diǎn)：

-

element.remove()

(現(xiàn)代、推薦)

-

parentNode.removeChild(child)

(傳統(tǒng)方法)

2.安全提示：

-刪除前最好確認(rèn)，避免誤操作。

演示：為待辦事項(xiàng)列表的每一項(xiàng)添加“刪除”按鈕。對(duì)比新舊兩種刪除方法，推薦使用更簡(jiǎn)潔的remove()。為自己的待辦事項(xiàng)列表添加刪除功能。掌握清理DOM樹(shù)的安全、有效方法。5綜合任務(wù)挑戰(zhàn)

(20分鐘)任務(wù)：完善待辦事項(xiàng)應(yīng)用

1.用戶可以在輸入框輸入內(nèi)容，點(diǎn)擊“添加”按鈕，動(dòng)態(tài)創(chuàng)建一個(gè)新的列表項(xiàng)。

2.每個(gè)列表項(xiàng)右側(cè)有一個(gè)“刪除”按鈕，點(diǎn)擊后該項(xiàng)從列表中移除。

3.（拓展）嘗試為新添加的“刪除”按鈕綁定點(diǎn)擊事件。巡視指導(dǎo)，重點(diǎn)關(guān)注學(xué)生如何將輸入框的值作為文本節(jié)點(diǎn)內(nèi)容，以及如何正確綁定刪除事件。獨(dú)立或結(jié)對(duì)編程，完成一個(gè)功能完整的待辦事項(xiàng)小應(yīng)用。在綜合性任務(wù)中融會(huì)貫通所學(xué)知識(shí)，體驗(yàn)創(chuàng)造的樂(lè)趣。6課堂小結(jié)

(5分鐘)總結(jié)DOM動(dòng)態(tài)操作的四大核心方法：“創(chuàng)建-插入”、“復(fù)制-替換”、“刪除”。強(qiáng)調(diào)這是實(shí)現(xiàn)現(xiàn)代Web應(yīng)用動(dòng)態(tài)性的基石。預(yù)告下一節(jié)課將把這些技能應(yīng)用于“商品放大鏡”項(xiàng)目。引導(dǎo)學(xué)生回顧知識(shí)脈絡(luò)，強(qiáng)調(diào)其重要性?；仡櫜⑹崂肀菊n所學(xué)的API和應(yīng)用場(chǎng)景。鞏固知識(shí)，建立完整的DOM操作認(rèn)知體