第7章 DOM 教學(xué)設(shè)計(jì)

第3章面向?qū)ο螅ㄉ希禞avaScript前端開發(fā)案例教程》教學(xué)設(shè)計(jì)課程名稱：JavaScript前端開發(fā)案例教程授課年級：年級授課學(xué)期：學(xué)年第一學(xué)期教師姓名：某某老師年月日課題名稱第7章DOM計(jì)劃學(xué)時(shí)5學(xué)時(shí)內(nèi)容分析DOM（DocumentObjectModel）文檔對象模型可以用于完成HTML和XML文檔的操作。其中，在JavaScript中利用DOM操作HTML元素和CSS樣式則是最常用的功能之一，例如，改變盒子的大小、標(biāo)簽欄的切換、購物車等。本章將針對如何在JavaScript中進(jìn)行DOM操作進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)及基本要求了解什么是DOM掌握元素與樣式的操作掌握節(jié)點(diǎn)的操作教學(xué)重點(diǎn)獲取元素、元素操作、節(jié)點(diǎn)操作教學(xué)難點(diǎn)獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加教學(xué)方式教學(xué)采用教師課堂講授為主概念性知識點(diǎn)：提出為什么，將抽象具體化，配合教學(xué)PPT、圖例輔助講解。功能性知識點(diǎn)：提需求，并上機(jī)演示如何應(yīng)用，重點(diǎn)內(nèi)容總結(jié)運(yùn)行原理。綜合實(shí)戰(zhàn)操作：分析整體的設(shè)計(jì)思路和步驟，對具體操作進(jìn)行上機(jī)演練。教學(xué)過程第一學(xué)時(shí)（認(rèn)識DOM、獲取元素、內(nèi)容操作、屬性操作、樣式操作）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧前面學(xué)過的內(nèi)容，引出本節(jié)課主題。在前面講解了BOM對象的使用，BOM對瀏覽器進(jìn)行操作，而DOM用來對文檔進(jìn)行操作，因此本節(jié)課將會(huì)講解如何利用DOM對象來對文檔進(jìn)行操作。（3）明確學(xué)習(xí)方向。了解什么是DOM，DOM的版本和發(fā)展歷史。掌握HTML節(jié)點(diǎn)樹的概念，能夠說出節(jié)點(diǎn)之間的關(guān)系。認(rèn)識常用的DOM對象，能夠區(qū)分元素與節(jié)點(diǎn)。掌握節(jié)點(diǎn)的類型。二、知識講解什么是DOMDOM（DocumentObjectModel），即文檔對象模型。一套規(guī)范文檔內(nèi)容的通用型標(biāo)準(zhǔn)。簡要介紹DOM的發(fā)展歷史。簡要介紹DOM第1級、第2級、第3級的主要變化。主要用途：操作HTML、XML文檔。DOMHTML節(jié)點(diǎn)樹DOM中為操作HTML文檔提供了一些屬性和方法，將HTML文檔以節(jié)點(diǎn)樹的形式進(jìn)行操作。演示如何將一段HTML代碼轉(zhuǎn)換成節(jié)點(diǎn)樹。區(qū)分各個(gè)節(jié)點(diǎn)的關(guān)系，什么是根節(jié)點(diǎn)、子節(jié)點(diǎn)、父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。DOM對象的繼承關(guān)系分析document對象的繼承關(guān)系。分析document.getElementById()返回的元素對象的繼承關(guān)系。區(qū)分document對象、Node對象、Element對象的區(qū)別和關(guān)系。通過代碼演示節(jié)點(diǎn)操作與元素操作的區(qū)別。列舉常見節(jié)點(diǎn)類型，通過代碼演示如何比較兩個(gè)對象節(jié)點(diǎn)類型是否相同。獲取操作的元素在操作元素前，需要先獲取元素。document提供了一些方法，用來根據(jù)id、name和class屬性以及標(biāo)簽名的方式獲取元素。通過代碼演示常用獲取元素方法的使用。注意返回的對象可能有一個(gè)或多個(gè)。當(dāng)返回的是對象集合時(shí)，通過“[下標(biāo)]”的方式來獲取其中的對象。補(bǔ)充講解HTML5新增的獲取元素的方法。列舉document中的一些用于獲取元素的屬性。演示這些屬性的使用方法。通過代碼驗(yàn)證利用document的屬性獲取到的對象，與通過方法獲取到的對象是否是同一個(gè)對象。除了使用document對象可以獲取對象，通過元素對象也可以獲取對象。通過代碼演示如何通過元素對象來獲取對象，并注意與document對象獲取對象時(shí)的區(qū)別，元素對象這種方式通常只用于獲取該元素內(nèi)部的對象。演示如何通過元素對象的children屬性來獲取該元素的子元素。補(bǔ)充講解HTMLCollection與NodeList的區(qū)別。元素內(nèi)容操作列舉Element對象提供的操作元素內(nèi)容的屬性。列舉document對象提供的操作元素內(nèi)容的方法。通過代碼演示這些屬性和方法的具體使用。對比innerHTML、innerText和textContent屬性的區(qū)別。對比innerHTML屬性和document.write()方法的區(qū)別。元素屬性操作列舉常用的元素屬性操作的屬性和方法。通過代碼演示元素屬性的獲取、修改、移除等操作。元素樣式操作演示元素樣式操作的基本語法。講解如何將CSS樣式名轉(zhuǎn)換成style的屬性名。列舉常見的style屬性名。通過代碼演示如何對元素的樣式進(jìn)行添加。注意float樣式在不同瀏覽器中的處理方案。演示通過className屬性對元素的class屬性進(jìn)行操作。演示通過classList屬性對元素的class屬性進(jìn)行操作。通過具體代碼實(shí)現(xiàn)修改class、切換class、刪除class等效果。三、【案例】改變盒子大小案例分析單擊頁面中的盒子，點(diǎn)一下變大，再點(diǎn)一下變小。改變盒子大小和內(nèi)部的文字通過更改innerHTML屬性，來改變盒子內(nèi)的文字。通過對寬、高樣式操作，來改變盒子的大小。實(shí)現(xiàn)大小切換根據(jù)單擊次數(shù)，奇數(shù)時(shí)變大，偶數(shù)時(shí)變小。四、【案例】標(biāo)簽欄切換效果開發(fā)背景標(biāo)簽欄在網(wǎng)頁中使用非常普遍。其優(yōu)勢在于可以在有限的空間內(nèi)展示多塊的內(nèi)容。案例分析用戶可以通過標(biāo)簽在多個(gè)內(nèi)容塊之間進(jìn)行切換。代碼實(shí)現(xiàn)編寫HTML頁面，準(zhǔn)備4個(gè)標(biāo)簽，和對應(yīng)的4個(gè)<div>內(nèi)容。利用JavaScript獲取元素，并添加鼠標(biāo)滑過事件。當(dāng)鼠標(biāo)滑過某個(gè)元素時(shí)，對所有標(biāo)簽進(jìn)行遍歷，通過樣式操作實(shí)現(xiàn)標(biāo)簽的選中效果，并控制對應(yīng)內(nèi)容的顯示或隱藏。測試程序。五、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第二學(xué)時(shí)（獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加、節(jié)點(diǎn)刪除）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。在前面學(xué)習(xí)了DOM的元素操作方式，除了元素操作，在DOM中還有一種很重要的操作方式，就是節(jié)點(diǎn)操作。本節(jié)將對節(jié)點(diǎn)操作進(jìn)行講解。（3）明確學(xué)習(xí)方向。掌握節(jié)點(diǎn)方式訪問節(jié)點(diǎn)的常用屬性的使用。掌握節(jié)點(diǎn)追加的相關(guān)方法的使用。掌握節(jié)點(diǎn)刪除操作。二、知識講解獲取節(jié)點(diǎn)列舉獲取節(jié)點(diǎn)的相關(guān)屬性。注意節(jié)點(diǎn)操作與元素操作的區(qū)別，對比childNodes和children，節(jié)點(diǎn)操作會(huì)包含文本節(jié)點(diǎn)等其他類型的節(jié)點(diǎn)。對比節(jié)點(diǎn)操作和元素操作，獲取到的是否為同一個(gè)對象。通過案例演示節(jié)點(diǎn)的查看獲取。節(jié)點(diǎn)追加document對象提供了一些創(chuàng)建節(jié)點(diǎn)的方法，可以創(chuàng)建元素、文本、屬性等類型的節(jié)點(diǎn)。通過節(jié)點(diǎn)追加相關(guān)方法，可以在指定節(jié)點(diǎn)的子節(jié)點(diǎn)末尾添加一個(gè)節(jié)點(diǎn)，或者將某個(gè)節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前。對于屬性節(jié)點(diǎn)也可以對其進(jìn)行獲取或設(shè)置操作。通過代碼演示節(jié)點(diǎn)創(chuàng)建、節(jié)點(diǎn)追加、屬性節(jié)點(diǎn)操作方法的使用。節(jié)點(diǎn)刪除列舉常用的節(jié)點(diǎn)刪除方法。通過代碼演示節(jié)點(diǎn)刪除，以及屬性節(jié)點(diǎn)刪除三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第三學(xué)時(shí)（案例：列表的增刪和移動(dòng)）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。運(yùn)用節(jié)點(diǎn)操作實(shí)現(xiàn)列表的交互功能。運(yùn)用面向?qū)ο缶幊谈玫亟M織代碼。二、知識講解案例分析演示案例實(shí)現(xiàn)效果，分析具體功能。根據(jù)數(shù)據(jù)自動(dòng)生成列表?？梢詫α斜磉M(jìn)行上移、下移、添加、刪除操作。組件化設(shè)計(jì)：為HTML中的class添加前綴。列表是網(wǎng)站后臺的常用組件，一個(gè)后臺頁面可能會(huì)非常復(fù)雜，包含許多功能模塊，為同一個(gè)模塊的代碼添加相同的class前綴，可以使代碼組件化，更易維護(hù)。準(zhǔn)備工作編寫HTML代碼，設(shè)計(jì)列表的結(jié)構(gòu)與樣式。編寫SmartList函數(shù)，用來封裝列表自動(dòng)生成的代碼。該函數(shù)的第1個(gè)參數(shù)表示class前綴，第2個(gè)參數(shù)表示將頁面打開后，自動(dòng)添加到列表的數(shù)據(jù)。調(diào)用SmartList函數(shù)，并將默認(rèn)顯示的數(shù)據(jù)以數(shù)組的形式傳進(jìn)去。為了更方便的獲取元素，將獲取元素的代碼封裝成Find構(gòu)造函數(shù)。演示Find構(gòu)造函數(shù)的使用，創(chuàng)建find對象然后自動(dòng)獲取元素。自動(dòng)生成列表演示自動(dòng)生成列表的實(shí)現(xiàn)原理，先將頁面中的現(xiàn)有的1個(gè)列表項(xiàng)當(dāng)成模板，通過JavaScript讀取這個(gè)模板，然后基于模板克隆一個(gè)新的列表項(xiàng)，更改value屬性后，添加到列表末尾。設(shè)計(jì)一個(gè)List構(gòu)造函數(shù)，用來實(shí)現(xiàn)列表的添加。在SmartList函數(shù)中遍歷傳入的數(shù)組，將數(shù)組中每一項(xiàng)的值賦值給新添加列表項(xiàng)的value屬性。通過瀏覽器訪問測試，觀察頁面打開后，列表項(xiàng)是否已經(jīng)生成。實(shí)現(xiàn)列表的移動(dòng)和刪除列表移動(dòng)的實(shí)現(xiàn)原理，查找當(dāng)前元素的前一個(gè)節(jié)點(diǎn)或后一個(gè)節(jié)點(diǎn)，然后將當(dāng)前元素移動(dòng)到指定節(jié)點(diǎn)的前后。為查找元素的對象增加prev()、next()方法，用于查找前后的元素節(jié)點(diǎn)。注意判斷節(jié)點(diǎn)的類型，如果找不到則返回null。為上移、下移按鈕添加事件，實(shí)現(xiàn)列表項(xiàng)的移動(dòng)。為刪除按鈕添加事件，實(shí)現(xiàn)列表項(xiàng)的刪除。實(shí)現(xiàn)列表的添加在頁面中增加“添加項(xiàng)目”的按鈕，單擊后顯示添加到新列表的輸入框。分析添加項(xiàng)目實(shí)現(xiàn)原理。編寫代碼完成列表添加功能。通過瀏覽器訪問測試，觀察新列表項(xiàng)是否能添加成功。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第四學(xué)時(shí)（動(dòng)手實(shí)踐：購物車）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握DOM操作的綜合運(yùn)用。掌握購物車功能的開發(fā)。二、知識講解案例分析購物車是電子商務(wù)網(wǎng)站的常見功能。利用購物車，可以保存用戶選購的多件商品。在購物車頁面中，可以進(jìn)行商品數(shù)量的添加與減少，選中與取消選中（選中表示本次購買，未選中表示以后再購買），從購物車中刪除等。顯示每件商品的小計(jì)價(jià)格。顯示購物車已選擇商品數(shù)量和總計(jì)價(jià)格。準(zhǔn)備工作編寫HTML代碼，設(shè)計(jì)購物車的結(jié)構(gòu)和顯示樣式。封裝ShopCart()函數(shù)，第1個(gè)參數(shù)表示class前綴，第2個(gè)參數(shù)表示頁面打開后顯示在購物車中的商品數(shù)據(jù)。封裝Find()構(gòu)造函數(shù)，用來查找元素。添加購物車商品編寫Cart()構(gòu)造函數(shù)，用來創(chuàng)建購物車。將需要操作的對象保存到成員屬性中，方便在成員方法中使用。在Ctotype對象中編寫add()方法，用來向購物車中添加一件商品。讀取網(wǎng)頁中的模板元素，新添加的商品基于模板克隆。編寫Item()構(gòu)造函數(shù)，用來創(chuàng)建購物車中的商品對象。通過成員屬性data保存商品數(shù)據(jù)（數(shù)量、價(jià)格等）。在Itotype對象中編寫updateSubtotal()方法，用來獲取小計(jì)。修改商品修改商品包括商品數(shù)量修改以及刪除商品操作。為元素添加事件，通過調(diào)用對象的屬性和方法完成具體操作。為商品數(shù)量按鈕添加事件，每當(dāng)商品數(shù)量發(fā)生變化時(shí)，更新小計(jì)和總計(jì)。為商品刪除鏈接添加事件，每當(dāng)商品刪除時(shí)，更新總