第三章：javascript-DOM對象模型-補充課件

1、JavaScriptDOM對象模型第三章-擴展回顧與作業(yè)點評document對象提供了哪三種訪問DOM元素的方法？使用什么樣式屬性控制元素的隱藏/顯示？如何動態(tài)的改變一個標(biāo)簽的值？預(yù)習(xí)檢查根據(jù)你的理解，什么是DOM？W3C標(biāo)準(zhǔn)定義的DOM由哪三部分組成？標(biāo)準(zhǔn)節(jié)點操作包括哪些操作？預(yù)習(xí)檢查如何編寫JavaScript腳本程序？JavaScript與Java基本語法的異同？任務(wù)-實現(xiàn)企業(yè)網(wǎng)站輪播圖需求說明根據(jù)給定圖片，實現(xiàn)輪播展示。6任務(wù)分解每一次只顯示一張圖片每隔一個時間切換另外一張輪播完所有圖片，再重新開始設(shè)置鏈接文本，跟隨圖片輪播鼠標(biāo)經(jīng)過時，輪播停止，移開自動輪播任務(wù)目標(biāo)掌握document

2、對象模型用法了解DOM樹模型學(xué)會document查找html標(biāo)簽學(xué)會document改變html標(biāo)簽的內(nèi)容學(xué)會document改變html標(biāo)簽樣式掌握事件處理掌握時間函數(shù)的用法DOM模型的相關(guān)概念什么是DOM？文檔對象模型（Document Object Model）通過DOM可以動態(tài)改變文檔內(nèi)容動態(tài)改變文檔內(nèi)容的原理1、解析文檔（如HTML）并生成DOM樹2、通過DOM標(biāo)準(zhǔn)接口+編程語言改變文檔內(nèi)容DOM模型的相關(guān)概念解析文檔生成DOM樹的過程DOM節(jié)點 喜歡的水果 DOM應(yīng)用生成的DOM樹結(jié)構(gòu)是什么？DOM模型的相關(guān)概念DOM樹中的節(jié)點類型和節(jié)點關(guān)系文檔節(jié)點document元素節(jié)點文本節(jié)點

3、.屬性節(jié)點父子關(guān)系同級關(guān)系DOM模型的相關(guān)概念W3C規(guī)定的三類DOM標(biāo)準(zhǔn)接口Core DOM（核心DOM），適用于各種結(jié)構(gòu)化文檔XML DOM（Java OOP），專用于XML文檔HTML DOM，專用于HTML文檔選用DOM標(biāo)準(zhǔn)接口，結(jié)合支持的編程語言訪問DOM樹，如Java、JavaScript、C#等12常用DOM操作接口Core DOM接口訪問頁面節(jié)點HTML DOM接口獲取屬性的方法Core DOM的操作查看節(jié)點獲取頁面標(biāo)簽getElementById( ) ：通過id訪問getElementsByName( ) ：通過name名稱訪問，集合數(shù)組。getElementsByTagNa

4、me( ) ：通過標(biāo)簽名訪問，集合數(shù)組。改變標(biāo)簽內(nèi)容的方法innerHTML和innerText區(qū)別：innerHTML可以解析html標(biāo)簽，如： document.getElementById(clock).innerHTML=時間;表示以h1標(biāo)簽顯示“時間”文本innerText純文本，如： document.getElementById(clock).innerText=時間;顯示時間文本HTML DOM的特有對象和操作什么是HTML DOM對象 HTML文檔中的每個節(jié)點都是DOM對象，每類對象都有1套屬性、方法。最常用的是表格和各類表單元素對象HTML DOM接口改變標(biāo)簽屬性先找到該標(biāo)

5、簽，直接通過.方式找到屬性，再修改，如：var pic1=document.getElementById(pic);pic1.src=images/apple.jpg;HTML DOM的特有對象和操作HTML DOM對象 的屬性訪問function change() var imgs=document.getElementById(s1); imgs.src=images/apple.jpg;function show() var hText=document.getElementById(s1).alt; alert(圖片的alt是：+hText)HTML DOM接口改變標(biāo)簽樣式Style屬

6、性可以改變標(biāo)簽樣式，如：var pic1=document.getElementById(pic);pic1.style.color=red;還可以修改標(biāo)簽的類選擇器名稱document.getElementById(t1).className=test;任務(wù)分析：輪播圖不斷改變img標(biāo)簽的src屬性就可以實現(xiàn)不斷顯示不同的圖片還可以有其他方式實現(xiàn)：例如某一時刻顯示一張圖片，其他圖片隱藏元素的顯示和隱藏如何實現(xiàn)如圖所示的頁面效果？頁面中圖片、層等元素的顯示和隱藏visibilityvisibility屬性的值值描述visible表示元素是可見的hidden表示元素是不可見的object.sty

7、le.visibility=值displaydisplay屬性的值值描述none表示此元素不會被顯示block表示此元素將顯示為塊級元素，此元素前后會帶有換行符object.style.display=值事件響應(yīng)事件事件是指瀏覽器中發(fā)生的事，比如頁面加載，用戶單擊按鈕，鼠標(biāo)移動等。腳本程序可以檢測到瀏覽器中發(fā)生的事（即事件），并作出反應(yīng)。常用事件：加載:onload單擊：onclick內(nèi)容改變：onchange獲得焦點：onfocus鼠標(biāo)經(jīng)過：onmouseover鼠標(biāo)移開：onmouseout定時函數(shù)setTimeout()用法setTimeout（“調(diào)用的函數(shù)”, “指定的時間后）setI

8、nterval()方法setInterval（調(diào)用的函數(shù), 指定的時間間隔）clearInterval(mytime):清除時間函數(shù)var myTimesetTimeout(disptime( ) , 1000 );var myTimesetInterval(disptime( ) , 1000 );setTimeout()只執(zhí)行disptime()一次，如果要多次調(diào)用使用setInterval()者者讓disptime()自身再次調(diào)用setTimeout()每隔1秒(1000毫秒)執(zhí)行函數(shù)disptime()一次時鐘顯示特效完成任務(wù)任務(wù)分析圖片在頁面加載時，每隔某個時間改變圖片鼠標(biāo)經(jīng)過數(shù)字上

9、面時，停止播放圖片（即時間函數(shù)停止）鼠標(biāo)移開時，再重新播放（即重新開始時間函數(shù)調(diào)用）結(jié)構(gòu)找到文件中banner的div,寫入下列代碼： 1 2 設(shè)定樣式#banner width: 1000px;height:300px;margin: 0 auto;position:relative;#pic_list lilist-style:none;position:absolute;top:250px; left:500px;#pic_list li adisplay:block; height:20px; width:20px; text-decoration:none; color:#FFF;

10、background-color:#CCC; line-height:20px; text-align:center; border:dotted 1px #FFFFFF;float:left;#pic_list li a:hover background-color:#F63;#pic_list a#num1background-color:#F63;添加腳本var count=0; /定義計數(shù)器，圖片顯示的序號var mytime; /時間變量/根據(jù)參數(shù)id判斷，是響應(yīng)鼠標(biāo)經(jīng)過事件還是時間事件function showImg(id)count+;/如果id變量有值，響應(yīng)鼠標(biāo)經(jīng)過事件，停止輪

11、播(清除時間函數(shù))，且使圖片顯示指定的idif(id0)clearInterval(mytime); /清除時間函數(shù)count=id; /傳遞的計數(shù)器為指定的序號 if(count2) /這里只有兩張圖片，當(dāng)序號為2時，重新設(shè)置計數(shù)器為1顯示count=1;/動態(tài)改變img屬性值，圖片放置在images目錄下，命名為ad_1.jpg和ad_2.jpgdocument.getElementById(pic).src=images/ad_+count+.jpg;/動態(tài)改變序號的樣式，顯示那張圖片，這相應(yīng)的序號顯示為#F63色，不顯示的圖片序號顯示為灰色for(var i=1;i=2;i+)if(i=count)document.getElementById(num+i).style.backgroundColor=#F63;elsedocument.getElementById(num+i).style.backgroundColor=#CCC;/鼠標(biāo)移開后調(diào)用該函數(shù)/啟動時間函數(shù)，