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

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