博學谷——讓IT教學更簡單，讓IT學習更有效《JavaScript+jQueryWeb前端開發(fā)技術（微課版）》教學設計課程名稱：授課班級：授課學期：教師姓名：年月

課題名稱學習單元4JavaScript中的DOM操作計劃課時8課時教學引入炫酷的特效以及與用戶的實施互動提升了網(wǎng)站的用戶體驗度。要利用JavaScript實現(xiàn)網(wǎng)頁交互特效，JavaScript基礎語法是基礎，更多的需要利用DOM與BOM編程來實現(xiàn)。本單元圍繞注冊頁面表單驗證功能的實現(xiàn)，首先對DOM操作進行介紹。教學目標1.知識目標（1）掌握DOM、DOM節(jié)點樹等相關基本概念；（2）掌握HTML元素常用操作定義與使用；（3）掌握DOM節(jié)點常用操作定義與使用。2.技能目標（1）能夠利用元素操作進行頁面元素動態(tài)設置；（2）能夠利用節(jié)點操作進行頁面元素動態(tài)設置；（3）能夠利用DOM實現(xiàn)網(wǎng)頁交互效果，解決一些實際應用問題。3.素養(yǎng)目標（1）培養(yǎng)自主學習能力素養(yǎng)；（2）編碼過程中遵循編碼規(guī)范，培養(yǎng)學生規(guī)范意識。教學重點HTML元素常用操作定義與使用DOM節(jié)點常用操作定義與使用教學難點HTML元素常用操作定義與使用DOM節(jié)點常用操作定義與使用運用利用DOM實現(xiàn)網(wǎng)頁交互效果，解決一些實際應用問題教學過程任務4.1為注冊頁面注冊驗證——DOM基本概念及獲取元素（4課時）一、任務描述在程序設計過程中為提高網(wǎng)站的響應速度，設計時應盡量減少服務器回傳，即減少服務器數(shù)據(jù)庫查詢次數(shù)，降低服務器負載。其中注冊頁面的信息驗證就是一個典型應用。在本任務中，首先對注冊頁面注冊時表單元素非空驗證，具體驗證如下。①當各個表單元素失去焦點時進行內(nèi)容的非空驗證，如果內(nèi)容為空，彈出對話框進行提示；②為注冊頁面注冊提交事件，單擊【立即注冊】按鈕時，如果頁面上存在值為空的表單元素，系統(tǒng)會彈出“注冊失敗”對話框，否則彈出“注冊成功”對話框。關于表單元素的功能性驗證，我們將在后續(xù)任務實施中詳細講解。二、任務分析本任務要實現(xiàn)的表單元素值非空的驗證，只需要分別獲取各個表單元素的值，然后對各個值是否是空值進行判斷即可。當各個表單元素失去焦點時自動對本身值進行非空驗證，此時只需要獲取表單元素并為表單元素注冊onblur事件，然后在事件處理過程中調(diào)用驗證函數(shù)即可實現(xiàn)；當單擊【立即注冊】按鈕實現(xiàn)非空驗證時，用戶只需獲取表單并為表單注冊onsubmit事件，然后在事件處理過程中同時調(diào)用各個表單元素的驗證函數(shù)，所有驗證函數(shù)均驗證通過時，系統(tǒng)彈出“注冊成功”的彈出框進行提示。三、知識點講解1、什么是DOMDOM是文檔對象模型（DocumentObjectModel）的縮寫，是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。DOM定義了訪問和操作HTML文檔的標準方法，通過DOM，可以完成HTML文檔內(nèi)所有元素的獲取、訪問、標簽屬性和樣式設置等操作。2、DOM節(jié)點樹從原理上來看，每當瀏覽器打開一個網(wǎng)頁時，DOM就會根據(jù)這個網(wǎng)頁結(jié)構(gòu)創(chuàng)建一個文檔對象，DOM就是一個樹形結(jié)構(gòu)模型。在這個樹結(jié)構(gòu)模型中，網(wǎng)頁中的每一個元素、屬性和文本都表現(xiàn)為一個個相互連接的節(jié)點，節(jié)點是DOM中最小的組成單位，HTML文檔中的所有節(jié)點構(gòu)成了一棵DOM節(jié)點樹。DOM就是以節(jié)點的方式表示文檔中的各種內(nèi)容。DOM節(jié)點樹中所有節(jié)點均可通過JavaScript進行訪問，因此，可以利用操作節(jié)點的方式操作HTML中的元素。一般來說，節(jié)點至少擁有nodeType(節(jié)點類型)、nodeName(節(jié)點名稱)和nodeValue(節(jié)點值)這3個基本屬性，常見的節(jié)點類型如表1所示。Node.屬性名值相應的對象說明ELEMENT_NODE1Element元素節(jié)點ATTRIBUTE_NODE2Attr屬性節(jié)點TEXT_NODE3Text文本節(jié)點COMMENT_NODE8Comment注釋節(jié)點DOCUMENT_NODE9Document文檔節(jié)點3、獲取元素（1）根據(jù)id查找元素在DOM中查找HTML元素最簡單的方法是使用getElementById()方法，它是由document對象提供的，通過使用元素的id來查找元素的方法。語法格式如下：document.getElementById('id')根據(jù)HTML元素指定的id獲取唯一的HTML元素，如果沒有找到指定id的元素則返回null，如果頁面中包含多個相同id的節(jié)點，那么只返回第一個元素。（2）根據(jù)標簽查找元素根據(jù)標簽名獲取元素有兩種方式，分別是通過document對象獲取元素和通過element對象獲取元素，語法格式如下：document.getElementsByTagName('標簽名');element.getElementsByTagName('標簽名');根據(jù)HTML元素指定的標簽名稱獲取的是一組對象，返回值是一個集合，它可以像數(shù)組一樣用索引的方式來訪問元素。document對象是從整個文檔中查找元素，而element是元素對象的統(tǒng)稱，通過元素對象可以查找該元素的子元素或后代元素，實現(xiàn)局部查找元素的效果。（3）通過name查找元素通過name屬性來獲取元素應使用document.getElementsByName()方法，基本語法格式如下：document.getElementsByName('元素名稱');該方法一般用于獲取表單元素，由于元素的name屬性的值不要求必須是唯一的，多個元素也可以有相同的名字，因此返回結(jié)果是一個集合類型。（4）通過類名查找元素HTML5中為document對象新增document.getElementsByClassName()方法，該方法用于通過類名來獲得某些元素集合，基本語法格式如下：document.getElementsByClassName('類名稱');（5）通過選擇器查找元素HTML5中為方便獲取操作的元素，為document對象新增了querySelector()和querySelectorAll()兩個方法。querySelector()方法用于返回指定選擇器的第一個元素對象，querySelectorAll()方法用于返回指定選擇器的所有元素對象集合，基本語法格式如下：document.querySelector()('CSS選擇器');document.querySelectorAll()('CSS選擇器');兩個方法的參數(shù)都指定一個或多個匹配元素的CSS選擇器，可以使用它們的id、類、類型、屬性、屬性值等來選取元素。（6）通過document對象屬性查找元素document對象提供了一些屬性，可用于獲取文檔中的元素，常用的屬性如表2所示。屬性說明document.body返回文檔中的body元素document.title返回文檔中的title元素document.documentElement返回文檔中的html元素document.forms返回文檔中所有form對象的引用document.images返回文檔中所有image對象的引用在上表中，document對象用的body屬性用于返回body元素，而documentElement屬性用于返回HTML文檔的根節(jié)點html元素。四、任務實施1、準備工作基礎工程文件夾下已經(jīng)寫好了基礎的靜態(tài)頁面代碼，后續(xù)的JavaScript功能實現(xiàn)都在基礎工程的代碼上進行添加。2、添加JavaScript代碼打開register.html注冊頁文件，在body區(qū)域找到form表單，在form表單下面添加JavaScript代碼塊。3、定義各個表單元素的驗證函數(shù)本任務首先獲取各個表單元素的值，然后對值進行非空判斷，如果值為空返回假并彈出對話框進行提示，如果值不為空返回為真。4、調(diào)用各個表單元素的驗證函數(shù)為提高程序的運行效率，也為用戶提供更好的交互性，程序設計時分別在各個表單元素失去焦點時對元素值進行驗證判斷；另外當用戶單擊【立即注冊】按鈕時，對所有表單元素進行驗證判斷。5、測試運行保存并運行網(wǎng)頁。五、課堂實踐通過測試題的方式檢測學生知識學習，通過任務實踐掌握DOM基本概念及獲取元素的基本方法。任務4.2為注冊頁面添加驗證響應特效——DOM節(jié)點操作（4課時）一、復習鞏固教師通過任務4.1的完成情況和測試題的測試結(jié)果進行分析，對學生掌握薄弱的知識點和技能點進行復習鞏固。二、任務描述在任務4.1中為注冊頁面注冊了表單元素非空的驗證事件，驗證成功與失敗都是通過彈出對話框進行信息提示來響應的。為使頁面能夠更友好的交互，當某一表單元素進行驗證時，通過改變自身樣式以及添加提示信息進行驗證結(jié)果的提示，響應及時、效果明顯的驗證結(jié)果輸出，大大方便了用戶的注冊操作。三、任務分析當對每一個表單元素進行為空驗證時，根據(jù)結(jié)果修改元素樣式進行響應。通過DOM樣式屬性改變元素的樣式，通過DOM元素內(nèi)容操作可改變提示文本信息，通過節(jié)點操作還可以動態(tài)創(chuàng)建并顯示一個圖片，以便更直觀的顯示提示結(jié)果。四、知識點講解1、元素操作（1）操作元素內(nèi)容在JavaScript中，若要對獲取的元素內(nèi)容進行操作，則可以利用DOM提供的屬性和方法實現(xiàn)，其中常用的屬性和方法如表3所示。分類名稱說明屬性element.innerHTML設置或返回元素開始和結(jié)束標簽之間的HTML，包括HTML標簽，同時保留空格和換行element.innerText設置或返回元素的文本內(nèi)容，在返回的時候會去除HTML標簽和多余空格、換行，在設置的時候會進行特殊字符轉(zhuǎn)義element.textContent設置或返回指定節(jié)點的文本內(nèi)容，同時保留空格和換行方法document.writer()向文檔寫入指定的內(nèi)容document.writerln()向文檔寫入指定的內(nèi)容并換行（2）操作元素屬性在HTML中，元素有一些自帶的屬性，開發(fā)者也可以為元素添加自定義屬性。在DOM中，為方便JavaScript獲取、修改和遍歷指定HTML元素的相關屬性，提供了操作元素屬性的屬性和方法，其中常用的屬性和方法如表4所示。分類名稱說明屬性attributes返回一個元素的屬性集合方法setAttribute(name,value)設置或者修改指定屬性的值getAttribute(name)返回指定元素的屬性值removeAttribute(name)從元素中刪除指定的屬性（3）操作元素樣式操作元素樣式通常有兩種方式，一種是操作style屬性，另一種是操作className屬性。另外還可以通過HTML5新增的classList操作元素的類選擇器列表來操作元素樣式。①操作style屬性在DOM中，style是一個對象，代表一個單獨的樣式聲明，可以通過應用該樣式的文檔或者元素來訪問style對象，使用style屬性改變樣式的語法如下：HTML元素對象.style.樣式屬性=“樣式名稱”在style對象中有許多樣式屬性，常用的主要是背景、文本、邊框等，如表5所示。類別屬性描述background(背景)background設置或返回元素的背景屬性backgroundColor設置元素的背景顏色backgroundImage設置元素的背景圖像backgroundRepeat設置是否以及如何重復背景圖像text(文本)fontSize設置元素的字體大小fontWeight設置字體的粗細textAlign排列文本textDecoration設置文本的修飾textIndent設置或返回文本第一行的縮進font設置同一行字體的屬性color設置文本的顏色（2）操作className屬性在開發(fā)中，如果樣式修改的較多，可以將多個樣式定義在一個類選擇器中，通過修改類選擇器名的方式更改元素樣式，其語法如下：HTML元素對象.className=“樣式名稱”（3）操作classList屬性由于一個元素的類選擇器可以有多個，HTML5新增的classList（只讀）可以操作元素的類選擇器列表。例如，div元素的class值為“boxheadertitle”，則可以利用“div元素對象.classList”的方式獲取類選擇器列表，但若想要刪除列表中的一個值，如title，則需要classList的相關操作方法和屬性。具體如表6所示。分類名稱描述屬性length可以獲取元素類名的個數(shù)方法add()可以給元素添加類名，一次只能添加一個remove()可以將元素的類名刪除，一次只能刪除一個toggle()切換元素的樣式，若元素之前沒有指定名稱的樣式則添加，如果有則移除item()根據(jù)接收的數(shù)字索引參數(shù)，獲取元素的類名contains判斷元素是否包含指定名稱的樣式，若包含則返回true，否則返回false2、節(jié)點操作（1）獲取節(jié)點在DOM樹中，各個節(jié)點之間具有一定層次關系，用戶可以根據(jù)層次關系進行節(jié)點的獲取，常用獲取節(jié)點的屬性如表7所示。功能屬性描述獲取父級節(jié)點parentNode獲取當前元素節(jié)點的最近的一個父節(jié)點獲取子級節(jié)點childNodes獲取當前元素的所有子節(jié)點的集合children獲取當前元素的所有子元素節(jié)點firstChild獲取當前節(jié)點的首個子節(jié)點lastChild獲取當前節(jié)點的最后一個字節(jié)點firstElementChild獲取第一個子元素節(jié)點lastElementChild獲取最后一個子元素節(jié)點獲取兄弟節(jié)點nextSibling獲取下一個兄弟節(jié)點previousSibling獲取上一個兄弟節(jié)點nextElementSibling獲取當前元素下一個兄弟元素節(jié)點previousElementSibling獲取當前元素上一個兄弟元素節(jié)點獲取節(jié)點名稱nodeName獲取當前節(jié)點名稱獲取節(jié)點值nodeValue獲取當前節(jié)點的值獲取節(jié)點類型nodeType獲取當前節(jié)點的類型（2）創(chuàng)建節(jié)點在獲取元素的節(jié)點后，還可以利用DOM提供的很多方法動態(tài)創(chuàng)建元素節(jié)點，主要方法如下：①document.write()：創(chuàng)建元素，如果頁面文檔流加載完畢，再調(diào)用會導致頁面重繪。②element.innerHTML：將內(nèi)容寫入某個DOM節(jié)點，不會導致頁面全部重繪。③document.createElement()：創(chuàng)建元素節(jié)點，創(chuàng)建多個元素時效率稍微低一點，但結(jié)構(gòu)更加清晰。④document.createTextNode()：創(chuàng)建文本節(jié)點。⑤document.createAttribute()：創(chuàng)建屬性節(jié)點。（3）添加節(jié)點在DOM中，常用的添加節(jié)點方法主要有以下兩種。①appendChild()：該方法用于將一個節(jié)點添加到指定