HTML元素操作之改變盒子內(nèi)容

HTML元素操作之改變盒子內(nèi)容授課班級20高職網(wǎng)絡(luò)授課學(xué)時2課時授課地點授課時間學(xué)情分析通過上學(xué)期的學(xué)習(xí)，同學(xué)們已經(jīng)掌握了HTML+CSS3有關(guān)知識并具有制作靜態(tài)頁面的能力；同時，前面已經(jīng)學(xué)習(xí)了JavaScript腳本語言的基礎(chǔ)知識和三大核心內(nèi)容的BOM。但對如何使用JavaScript操作頁面文檔還不清楚。教學(xué)目標(biāo)知識目標(biāo)1、掌握獲取元素的方法2、掌握對元素內(nèi)容進行操作方法能力目標(biāo)培養(yǎng)學(xué)生的不同思維方式和深入探究能力素養(yǎng)目標(biāo)培養(yǎng)學(xué)生的專注力和組織紀(jì)律性教學(xué)重點獲取元素、對元素內(nèi)容進行操作教學(xué)難點DOM提供的屬性和方法的實際應(yīng)用教學(xué)方式課堂講授為主，將抽象具體化，配合教學(xué)PPT、圖例輔助講解。并演示如何應(yīng)用，重點內(nèi)容總結(jié)運行原理。教學(xué)資源多媒教傳智|高考教輔平臺、課件課前課前自學(xué)教學(xué)內(nèi)容利用網(wǎng)絡(luò)資源，傳智|高考教輔平臺完成對HTML元素操作內(nèi)容的預(yù)習(xí)教師活動1、傳智|高考教輔平臺發(fā)布自學(xué)視頻和學(xué)習(xí)任務(wù)：HTML元素操作2、發(fā)布測試，了解學(xué)生對知識的掌握程度。學(xué)生活動觀看自學(xué)視頻、完成測試練習(xí)設(shè)計意圖1、培養(yǎng)學(xué)生自主學(xué)習(xí)能力。2、通過課前預(yù)習(xí)對HTML元素操作內(nèi)容有初步了解課中知識回顧教學(xué)內(nèi)容1、DOM（DocumentObjectModel），即文檔對象模型，一套規(guī)范文檔內(nèi)容的通用型標(biāo)準(zhǔn)2、操作HTML文檔中的元素、節(jié)點、屬性等教師活動提問：1、什么是DOM？2、DOM主要用途？學(xué)生活動學(xué)生回答設(shè)計意圖鞏固前面所學(xué)知識知識講解教學(xué)內(nèi)容利用HTML元素操作改變盒子大小教師活動展示改變盒子內(nèi)容的頁面并分析操作知識點講解（1）、獲取操作的元素1、document對象提供的方法方法說明document.getElementById()返回對擁有指定id的第一個對象的引用document.getElementsByName()返回帶有指定名稱的對象集合document.getElementsByTagName()返回帶有指定標(biāo)簽名的對象集合document.getElementsByClassName()返回帶有指定類名的對象集合（不支持IE6~8）2、document對象提供的屬性屬性說明document.body返回文檔的body元素document.documentElement返回文檔的html元素document.forms返回對文檔中所有Form對象引用document.images返回對文檔中所有Image對象引用3、Element對象方法getElementsByTagName()getElementsByClassName()4、HTML5新增的獲取元素的方法document.querySelector()document.querySelectorAll()（2）、元素內(nèi)容操作屬性：innerHTML、innerText和textContent方法：document.write()演示改變盒子內(nèi)容代碼操作<style>.box{width:50px;height:50px;background:#eee;margin:0auto;}</style><divid="box"class="box"></div><script>varbox=document.getElementById('box');vari=0;//保存用戶單擊盒子的次數(shù)box.onclick=function(){//處理盒子的單擊事件++i;if(i%2){//單擊次數(shù)為奇數(shù)，變大this.innerHTML='大';}else{//單擊次數(shù)為偶數(shù)，變小this.innerHTML='小';}};</script>學(xué)生活動認真聽講，積極回答問題設(shè)計意圖提高學(xué)生的分析問題和解決問題的能力；并培養(yǎng)學(xué)生思維方式和深入探究能力。課后操作任務(wù)教學(xué)內(nèi)容1、練習(xí)獲取HTML的元素操作2、完成改變盒子大小案