WebAPIsContents目錄

WebAPI簡介DOM簡介

獲取元素

注冊事件

操作元素內容

操作元素屬性能夠說出什么是WebAPI能夠說出什么是DOM能夠獲取頁面元素能夠給元素注冊事件能夠操作DOM元素的屬性目標TARGET學習的主要內容要點提示WebAPIs簡介導讀掌握程度：了解1.1WebAPIs簡介導讀視javascript的組成部分WebAPI主要學習的內容要點提示js基礎和WebAPIs兩個階段的關聯性掌握程度：了解1.2js基礎和WebAPIs兩個階段的關聯性視API和WebAPI要點提示API和WebAPI掌握程度：理解1.3API和WebAPI視學習目標要點提示DOM導讀掌握程度：了解1.4DOM導讀視DOM的作用DOM樹要點提示DOM簡介掌握程度：了解1.5DOM簡介視答1、什么是節點？2、什么是元素？課堂問答答視課堂問答1.5DOM簡介通過ID獲取元素

要點提示getElementById獲取元素掌握程度：應用1.6getElementById獲取元素視結視getElementById的語法注意事項1：js代碼寫在標簽后面注意事項2：參數是區分大小寫的字符串注意事項3：返回的是1個元素對象1.6getElementById獲取元素課堂問答視知識總結結通過標簽名獲取元素要點提示掌握程度：應用2.1getElementsByTagName獲取某類標簽元素結視getElementsByTagName獲取某類標簽元素getElementsByTagName的2種語法（document.和父元素.）注意事項1：返回值是元素對象的集合（偽數組）2.1getElementsByTagName獲取某類標簽元素課堂問答視知識總結結通過class獲取元素通過選擇器獲取單個元素通過選擇器獲取所有元素要點提示H5新增獲取元素方式掌握程度：應用2.2

H5新增獲取元素方式結視練getElementsByClassName語法querySelector()語法和返回值querySelectorAll()語法和返回值2.2

H5新增獲取元素方式課堂問答視知識總結結練練習HTML頁面，有一個ul，ul中有3個li標簽：<ul><li></li><li></li><<li></li></ul>，請分別獲取第一個li和最后一個li，并打印到控制臺！提示創建一個ul和多個使用不同的方式獲取其中的li10分鐘2.2

H5新增獲取元素方式獲取元素的鞏固練習視結練獲取body元素獲取html元素

要點提示獲取body和html元素掌握程度：應用2.3獲取body和html元素視事件事件三要素要點提示事件三要素掌握程度：理解2.4事件三要素視給元素綁定事件常用的事件類型要點提示執行事件過程掌握程度：應用3.1執行事件過程答視練1、事件三要素是哪些？2、給元素注冊事件的步驟是什么？3.1執行事件過程課堂問答練答視課堂問答練習頁面中有一個按鈕，當鼠標點擊按鈕的時候，彈出“你好”警示框。提示獲取元素（按鈕）綁定事件（單擊事件）編寫事件處理代碼（彈出對話框）10分鐘3.1執行事件過程注冊事件鞏固練習視答練通過innerText修改元素的內容要點提示操作元素-修改元素內容掌握程度：應用3.2操作元素-修改元素內容視練練習頁面加載完，div中展示當前時間單擊按鈕，div中展示當前時間提示獲取div元素修改div元素的內容10分鐘3.2操作元素-修改元素內容innerText鞏固練習視練通過innerHTML修改元素內容innerText和innerHTML的區別獲取元素的內容要點提示innerText和innerHTML的區別掌握程度：應用3.3

innerText和innerHTML的區別答視1、innerText和innerHTML的區別？3.3

innerText和innerHTML的區別課堂問答答視課堂問答修改屬性的值要點提示操作元素-修改元素屬性掌握程度：應用3.4操作元素-修改元素屬性視上午復習

獲取元素可以通過硬件或硬件或硬件或硬件系來獲取

事件的三要素分別是硬件、硬件、硬件

修改元素的內容可以通過硬件或硬件正文-單擊此處標題樣式微軟雅黑24號上午復習

獲取元素可以通過ID或硬標簽名件或

class或選擇器來獲取

事件的三要素分別是事件源、事件類型、事件處理程序件

修改元素的內容可以通過innerText或innerHTML正文-單擊此處標題樣式微軟雅黑24號根據不同的時間，顯示不同的圖片

要點提示分時問候案例掌握程度：應用4.1分時問候案例視練練習根據不同時間，頁面顯示不同圖片，同時顯示不同的問候語。如果上午時間打開頁面，顯示上午好，顯示上午的圖片。提示獲取元素（img、div）獲取當前日期時間的小時數（日期內置對象）判斷小時數，改變圖片和問候語5分鐘4.1分時問候案例分時問候案例鞏固練習視練修改表單元素的屬性（value、disabled）事件處理函數中的this要點提示操作元素-修改表單屬性掌握程度：應用4.2操作元素-修改表單屬性視案例分析案例布局要點提示仿京東顯示隱藏密碼明文案例（上）掌握程度：應用4.3仿京東顯示隱藏密碼明文案例（上）視練練習動動手，完成案例的html布局吧！提示大盒子div子元素：input和圖片調整樣式5分鐘4.3仿京東顯示隱藏密碼明文案例（上案例練習視練單擊圖片切換input的type要點提示仿京東顯示隱藏密碼明文案例（下）掌握程度：應用4.4仿京東顯示隱藏密碼明文案例（下）視練練習點擊眼睛按鈕，把密碼框類型改為文本框，看見密碼提示獲取元素（按鈕）注冊單擊事件使用一個全局變量flag，記錄type的狀態根據flag的值，改變type和src5分鐘4.4仿京東顯示隱藏密碼明文案例（下案例練習視練行內方式，修改樣式屬性要點提示操作元素-修改樣式屬性掌握程度：應用5.1操作元素-修改樣式屬性視隱藏元素要點提示仿淘寶關閉二維碼案例掌握程度：應用5.2仿淘寶關閉二維碼案例視設置每個li的背景圖要點提示循環精靈圖掌握程度：應用5.3循環精靈圖視練練習利用for循環設置一組元素的精靈圖背景提示獲取所有的li使用for遍歷每一個li設置每個li的背景圖的位置（li索引號*44就是每個圖片的y坐標）5分鐘5.3循環精靈圖案例鞏固練習視練獲得焦點事件失去焦點事件要點提示顯示隱藏文本框內容掌握程度：應用5.4顯示隱藏文本框內容視class方式，修改樣式要點提示使用className修改樣式屬性掌握程度：應用6.1使用className修改樣式屬性視案例分析案例實現要點提示密碼框驗證信息掌握程度：應用6.2密碼框驗證信息視練練習用戶如果離開密碼框，里面輸入個數不是6~16，則提示錯誤信息，否則提示輸入正確信息提示獲取元素（文本框）注冊失去焦點事件（onblur）判斷輸入框內容的長度修改提示內容、圖標、樣式5分鐘6.2密碼框驗證信息案例練習視練總結作業要點提示操作元素總結以及作業掌握程度：了解6.3操作元素總結以及作業視今日復習獲取元素可以通過硬件或硬件或硬件或硬件來獲取事件的三要素分別是硬件、硬件、硬件修改元素的內容可以通過硬件或硬件修改元素的屬性由硬件系統修改元素的樣式屬性由硬件系統與軟件系統計給元素注冊事件的步驟硬件系、軟件系、軟件系正文-單擊此處標題樣式微軟雅黑24號今日復習獲取元素可以通過ID或標簽名或class或選擇器來獲取事件的三要素分別是事件源、事件類型、事件處理程序修改元素的內容可以通過innerText或innerHTML修改元素的屬性由元素對象.屬性名=值修改元素的樣式屬性由元素對象.style.樣式屬性名=值件與元素對象.className=‘類名’給元素注冊事件的步驟獲取元素、注冊事件、編