JavaScriptDOM編程

1、高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 北京傳智播客教育 JavaScript DOMJavaScript DOM編程編程講師：趙曉虎講師：趙曉虎高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 課程說(shuō)明l內(nèi)容：使用JavaScript操作DOM進(jìn)行DHtml開發(fā)。l目標(biāo)：能夠使用JavaScript操作DOM實(shí)現(xiàn)常見(jiàn)的DHtml效果。l參考書：張孝祥JavaScript網(wǎng)頁(yè)開發(fā)體驗(yàn)式學(xué)習(xí)教程高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 為什么要學(xué)習(xí)JavaScript操作DOMlJavaScript最終是要操作Html頁(yè)面，讓Ht

2、ml變成DHtml，而操作Html頁(yè)面就要用到DOM。DOM就是把Html頁(yè)面模擬成一個(gè)對(duì)象，就像XDocument一樣，把Xml模擬成了一個(gè)對(duì)象，提供了操作各個(gè)節(jié)點(diǎn)的方法，直接調(diào)用就可以了。l如果JavaScript只是執(zhí)行一些計(jì)算、循環(huán)等操作，而不能操作Html也就失去了它存在的意義。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 DOM入門(把標(biāo)簽當(dāng)做對(duì)象來(lái)處理)lDOM就是Html頁(yè)面的模型，將每個(gè)標(biāo)簽都做為一個(gè)對(duì)象，JavaScript通過(guò)調(diào)用DOM中的屬性、方法就可以對(duì)網(wǎng)頁(yè)中的文本框、層等元素進(jìn)行編程控制。比如通過(guò)操作文本框的DOM對(duì)象，就可以讀取文本框中的值、設(shè)

3、置文本框中的值。 JavaScriptDOM就是C#.Net Framwork。沒(méi)有.net，C#只能for、while，連WriteLine、MessageBox都不行。DOM就是一些讓JavaScript能操作Html頁(yè)面控件的類、函數(shù)。lDOM也像WinForm一樣，通過(guò)事件、屬性、方法進(jìn)行編程。lCSS+JavaScript+DOM=DHtmll學(xué)習(xí)階段只考慮IE。用IE Collection安裝IE所有版本，學(xué)習(xí)使用IE6（要調(diào)試必須使用本機(jī)安裝的版本）。/js DOM在不同的瀏覽器下支持不一樣。(IETester)高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 D

4、OM模型高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 獲取頁(yè)面元素lwindow.idldocument.getElementById()高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 事件l在DOM中有很多事件。演示：1. /注意body的范圍。2.有時(shí)事件的響應(yīng)代碼比較多，就要放到一個(gè)函數(shù)中： function UserMouseDown() alert(網(wǎng)頁(yè)被你點(diǎn)壞了_,賠吧！); alert(逗你玩呢); lonmousedown=“UserMouseDown();”中，UserMouseDown后的括號(hào)不能丟（不能寫成onmousedown=“U

5、serMouseDown” ），帶()表示調(diào)用函數(shù)，直接寫函數(shù)名表示設(shè)置事件的處理函數(shù)為UserMouseDown。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 動(dòng)態(tài)設(shè)置事件lJavaScript也可以像.Net中那樣動(dòng)態(tài)設(shè)置事件，Button.Click+=function F1() alert(In F1); function F2() alert(In F2); l注意： onclick=“document.onclick=F1;” 此處的F1不要加括號(hào)，加括號(hào)就編程了調(diào)用F1()函數(shù)，并且把返回值賦值給document.onclick了。l可以通過(guò)winform的事

6、件來(lái)演示onclick=“hanshu()”與onclick=hanshu;的區(qū)別。如果講解，見(jiàn)備注1.高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象(Dom中的一個(gè)頂級(jí)對(duì)象。)lwindow對(duì)象代表當(dāng)前瀏覽器窗口。l使用window對(duì)象的屬性、方法的時(shí)候可以省略window。l比如：window.alert(hello);可以省略成alert(hello);window.document可以直接寫documentl能不寫window就不要寫，這樣可以減少js文件的字節(jié)數(shù)。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的方

7、法1lwindow.alert(大家好！);/彈出警告對(duì)話框lwindow.confirm(確定要?jiǎng)h除嗎？);/確定、取消對(duì)話框，返回true或false;lwindow.navigate(url);/將網(wǎng)頁(yè)重新導(dǎo)航到url,只支持IE、Opera11.6,建議使用window.location.href=url;/支持大多數(shù)瀏覽器高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的方法2lwindow.setInterval(code,delay)/每隔一段時(shí)間執(zhí)行指定的代碼（類似于winForm中的Timer控件。）第一個(gè)參數(shù)：指定的代碼字符串第二個(gè)參數(shù)：時(shí)

8、間間隔（毫秒數(shù)）var intervalId=setInterval(“alert(hello);”,1000);lwindow.clearInterval(intervalId);/停止計(jì)時(shí)器clearInterval()取消setInterval的定時(shí)執(zhí)行，相當(dāng)于Timer中的Enabled=False。因?yàn)閟etInterval可以設(shè)定多個(gè)定時(shí)，所以clearInterval要指定清除那個(gè)定時(shí)器的標(biāo)識(shí)，即setInterval的返回值。案例：文本框自增。進(jìn)度條案例：見(jiàn)備注1.高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的方法3lsetTimeout也

9、是定時(shí)執(zhí)行，但是不像setInterval那樣是重復(fù)的定時(shí)執(zhí)行，只執(zhí)行一次只執(zhí)行一次，clearTimeout也是清除定時(shí)。很好區(qū)分：Interval：間隔；timeout：超時(shí)。var timeoutId = setTimeout(alert(hello), 2000);l案例：實(shí)現(xiàn)標(biāo)題欄走馬燈的效果，也就是瀏覽器的標(biāo)題文字每隔500ms向右滾動(dòng)一下。提示：標(biāo)題為document.title屬性。實(shí)現(xiàn)代碼參考備注。l練習(xí)：剛進(jìn)入的時(shí)候還是向左滾動(dòng)，點(diǎn)擊【向左】按鈕就向左連續(xù)滾動(dòng)，點(diǎn)擊【向右】按鈕就向右連續(xù)滾動(dòng)。思路1、”全局變量”，標(biāo)志當(dāng)前的滾動(dòng)方向，當(dāng)點(diǎn)擊向左的時(shí)候dir=left,向右d

10、ir=right。思路2、scrollleft scroolright,向右滾的時(shí)候?qū)crollleft的Interval clear掉，然后setInterval啟動(dòng)scrollrightl延遲操作。見(jiàn)備注1.高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 body、document對(duì)象的事件lonload（頁(yè)面加載后觸發(fā)）網(wǎng)頁(yè)加載完畢時(shí)觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會(huì)出現(xiàn)JavaScript執(zhí)行時(shí)需要操作某個(gè)元素，這個(gè)元素還沒(méi)有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事

11、件是元素自己加載完畢時(shí)觸發(fā)，body onload才是全部加載完成。window.控件Id（不建議使用）document.getElementById(“控件Id”);(推薦)lonunload（頁(yè)面卸載后觸發(fā)）網(wǎng)頁(yè)關(guān)閉（或者離開）后后觸發(fā)。/刷新頁(yè)面的時(shí)候、關(guān)閉選項(xiàng)卡的時(shí)候（多個(gè)選項(xiàng)卡）lonbeforeunload（頁(yè)面卸載前觸發(fā)）在網(wǎng)頁(yè)準(zhǔn)備關(guān)閉（或者離開）前觸發(fā)。/注意瀏覽器緩存。顯示的文字隨瀏覽器版本而有差異。/ =“window.event.returnValue=只兼容IE高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 其他事件l除了屬性之外，當(dāng)然還有通用的HTM

12、L元素的事件：onclick（單擊）、ondblclick（雙擊）、onkeydown（按鍵按下）、onkeypress（點(diǎn)擊按鍵）、onkeyup（按鍵釋放）、onmousedown（鼠標(biāo)按下）、onmousemove（鼠標(biāo)移動(dòng)）、onmouseout（鼠標(biāo)離開元素范圍）、onmouseover（鼠標(biāo)移動(dòng)到元素范圍）、onmouseup（鼠標(biāo)按鍵釋放）、oncontextmenu（在瀏覽器中單擊鼠標(biāo)右鍵顯示”右鍵菜單”時(shí)觸發(fā)）等。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性1lwindow.location對(duì)象：window.location.hr

13、ef=;/重新導(dǎo)航到新頁(yè)面,可以取值，也可以賦值。window.location.reload();/刷新當(dāng)前頁(yè)lwindow.event是IE下非常重要的屬性，用來(lái)獲得發(fā)生事件時(shí)的信息，事件不局限于window對(duì)象的事件，所有元素的事件都可以通過(guò)event屬性取到相關(guān)信息。類似于winForm中的e(EventArgs)。/兼容IE、Chrome，不兼容FF（用event參數(shù)）。window.event.altKey屬性，bool類型，表示事件發(fā)生時(shí)是否按下了alt鍵。類似的還有ctrlKey,shiftKey。演示： ；高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 wi

14、ndow對(duì)象的屬性2lwindow.event的屬性（接上頁(yè)）：clientX、clientY 發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)的坐標(biāo)；screenX、screenY 發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)；offsetX、offsetY 發(fā)生事件時(shí)鼠標(biāo)相對(duì)于事件源（比如點(diǎn)擊按鈕時(shí)觸發(fā)onclick）的坐標(biāo)。當(dāng)頁(yè)面中有!DOCTYPE（文檔定義）時(shí)，對(duì)offsetX和offsetY單擊時(shí)的解析不同(使用onmousedown的時(shí)候與onclick測(cè)試結(jié)果不同。 )。（單擊按鈕中文字的時(shí)候。）(window.event.returnValue)returnValue屬性，如果將returnValue設(shè)置為false

15、，就會(huì)取消默認(rèn)事件的處理。在超鏈接的onclick里面禁止訪問(wèn)href的頁(yè)面。在表單校驗(yàn)的時(shí)候禁止提交表單到服務(wù)器，防止錯(cuò)誤數(shù)據(jù)提交給服務(wù)器、防止頁(yè)面刷新。(onsubmit=window.event.returnValue=false;)window.event.returnValue不兼容火狐瀏覽器FireFox:e. preventDefault();取消事件的默認(rèn)動(dòng)作。直接寫return false;IE、FF、Chrome都可以。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性3lwindow.event的屬性（接上頁(yè)）：srcElement：

16、獲得事件源對(duì)象。幾個(gè)按鈕共享一個(gè)事件響應(yīng)函數(shù)用。*_click(object sender,EventArgs e)/IE、Chrome支持。見(jiàn)備注1。/FF下用e.target;button，發(fā)生事件時(shí)鼠標(biāo)按鍵，IE:1為左鍵，2為右鍵，s4中滑輪/要測(cè)試event.button的值的時(shí)候，請(qǐng)?jiān)趏nmousedown事件中測(cè)試。在onclick事件中只能識(shí)別鼠標(biāo)左鍵的單擊。不同瀏覽器返回值可能不一樣。 （不同瀏覽器值不一樣）除IE瀏覽器外，其他瀏覽器在綁定事件處理函數(shù)時(shí)，有一個(gè)默認(rèn)的參數(shù)即event對(duì)象。l（*）screen對(duì)象，獲取屏幕的信息：alert(分辨率： + screen.wid

17、th + * + screen.height); if (screen.width 1024 | screen.height 768) alert(分辨率太低！); 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性4lclipboardData對(duì)象，對(duì)粘貼板的操作。/只支持IE,FF參考資料setData(Text,val)，設(shè)置粘貼板中的值。getData(“Text”)讀取粘貼板的值，返回值為粘貼板中的內(nèi)容；clearData(“Text”)清空粘貼板；案例：復(fù)制地址給友好。見(jiàn)備注。當(dāng)復(fù)制的時(shí)候body的oncopy方法被觸發(fā)，直接return fa

18、lse就是禁止復(fù)制。body oncopy=alert(禁止復(fù)制！);return false;很多元素也有oncopy(復(fù)制)、onpaste（粘貼）事件：oncut案例：禁止粘貼帳號(hào)。見(jiàn)備注。案例：在網(wǎng)站中復(fù)制文章的時(shí)候，為了防止那些”拷貝黨”不添加文章來(lái)源，自動(dòng)在復(fù)制的內(nèi)容后添加版權(quán)聲明。代碼見(jiàn)下頁(yè)：高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性4l代碼：function modifyClipboard() clipboardData.setData(Text, clipboardData.getData(Text) + 本文來(lái)自傳智播客技術(shù)專區(qū)

19、，轉(zhuǎn)載請(qǐng)注明來(lái)源。 + location.href);oncopy=setTimeout(modifyClipboard(),100)“用戶復(fù)制動(dòng)作發(fā)生0.1秒以后再去改粘貼板中的內(nèi)容。100ms只是一個(gè)經(jīng)常取值，寫1000、10、50、200都行。不能直接在oncopy里修改粘貼板。不能直接在oncopy中執(zhí)行對(duì)粘貼板的操作，因此設(shè)定定時(shí)器，0.1秒以后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。lhistory操作歷史記錄。window.history.back()后退；window.history.forward()前進(jìn)。window.history.go(-1)后退、window.h

20、istory.go(1)前進(jìn)高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性5-documentldocument屬性：document屬性是window對(duì)象中最復(fù)雜的屬性。因?yàn)槭褂脀indow對(duì)象成員的時(shí)候可以省略window.，所以一般直接寫document。document的方法：write();/向文檔中寫入內(nèi)容。writeln()，和write差不多，只不過(guò)最后添加一個(gè)回車。在onclick等事件中寫的代碼會(huì)沖掉頁(yè)面中的內(nèi)容，只有在頁(yè)面加載過(guò)程中只有在頁(yè)面加載過(guò)程中write才會(huì)與原有內(nèi)容融合在一才會(huì)與原有內(nèi)容融合在一起。起。writeln()

21、是在源代碼里面換行。與是在源代碼里面換行。與不一樣。不一樣。document.write()經(jīng)常在廣告代碼、整合資源代碼中被使用。見(jiàn)備注。內(nèi)容聯(lián)盟、廣告代碼、cnzz，不需要被主頁(yè)面的站長(zhǎng)去維護(hù)內(nèi)容，只要被嵌入的js內(nèi)容提供商修改內(nèi)容，顯示的內(nèi)容就變了。（使用pre標(biāo)簽看write()與writeln()的區(qū)別，效果，見(jiàn)備注1）Js腳本一執(zhí)行就會(huì)訪問(wèn)服務(wù)器。超鏈接誒還需要點(diǎn)擊。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性6-documentl最基本的DOM遍歷演示。見(jiàn)備注1。（*）lgetElementById(), （非常常用），根據(jù)元素的Id獲得

22、對(duì)象，網(wǎng)頁(yè)中id不能重復(fù)。也可以直接通過(guò)元素的id來(lái)引用元素，但是有有效范圍、form1.textbox1之類的問(wèn)題（當(dāng)元素放在form中的時(shí)候（在html頁(yè)面中需要通過(guò)form.元素id），因此不建議直接通過(guò)id操作元素，而是通過(guò)getElementById。lgetElementsByName()，根據(jù)元素的name獲得對(duì)象，由于頁(yè)面中元素的name可以重復(fù)，比如多個(gè)RadioButton的name一樣，因此getElementsByName返回值是對(duì)象數(shù)組。lgetElementsByTagName()，獲得指定標(biāo)簽名稱的元素?cái)?shù)組，比如getElementsByTagName(“p”)可

23、以獲得所有的標(biāo)簽。*表示所有標(biāo)簽。l此處切忌不要使用forin循環(huán)(forin循環(huán)循環(huán)的是鍵值對(duì)，不是對(duì)象本身。)。（問(wèn)題多多：radio時(shí)有相同的key,第一個(gè)key是length等等。）建議：使用for循環(huán)。 document.getElementById()/document.allid(*)高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 window對(duì)象的屬性7-documentl案例：點(diǎn)擊一個(gè)按鈕，被點(diǎn)擊的按鈕顯示“嗚嗚”，其他按鈕顯示“哈哈”。l案例：十秒鐘后協(xié)議文本框下的注冊(cè)按鈕才能點(diǎn)擊，時(shí)鐘倒數(shù)。(btn.disabled = “” ，讓元素可用。disabl

24、ed=disabled,為不可用)disabled=true;l練習(xí)：加法計(jì)算器。兩個(gè)文本框中輸入數(shù)字，點(diǎn)擊【=】按鈕將相加的結(jié)果放到第三個(gè)文本框中。l練習(xí)：美女時(shí)鐘。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 事件冒泡l事件冒泡：如果元素A嵌套在元素B中，那么A被點(diǎn)擊不僅A的onclick事件會(huì)被觸發(fā)，B的onclick也會(huì)被觸發(fā)。觸發(fā)的順序是“由內(nèi)而外” 。驗(yàn)證：在頁(yè)面上添加一個(gè)table、table里有tr、tr里有td，td里放一個(gè)p，在p、td、tr、table中添加onclick事件響應(yīng)，見(jiàn)備注。l取消事件冒泡： window.event.cancelBubb

25、le = true;/IE下的寫法。下的寫法。lSpan設(shè)置display:block；以后再設(shè)置height,width才會(huì)有效。lwindow.onload與body的onload1.二者效果完全一樣,都是在頁(yè)面內(nèi)容都加載完畢后才觸發(fā)。2.由于網(wǎng)頁(yè)中沒(méi)有window所以在body中寫onload3.建議使用window.onload/使用js腳本的方式高效4.其實(shí)應(yīng)該是document.onload，但是所有瀏覽器都實(shí)現(xiàn)到了window對(duì)象上。s高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 事件中的thisl事件中的this。除了可以使用event.srcElement

26、在事件響應(yīng)函數(shù)中，this表示發(fā)生事件發(fā)生事件的控件。只有在事件響應(yīng)函數(shù)才能使用this獲得發(fā)生事件的控件，在事件響應(yīng)函數(shù)調(diào)用的函數(shù)中不能使用（這里的this表示window對(duì)象），如果要使用則要將this傳遞給函數(shù)或者使用event.srcElement。(*)this和event.srcElement的語(yǔ)義是不一樣的，this就是表示當(dāng)前監(jiān)聽(tīng)事件的這個(gè)對(duì)象，就是表示當(dāng)前監(jiān)聽(tīng)事件的這個(gè)對(duì)象，event.srcElement是引發(fā)事件的對(duì)象是引發(fā)事件的對(duì)象：事件冒泡事件冒泡。ll1.通過(guò)“事件冒泡”說(shuō)明this與window.event.srcElement的區(qū)別。l2.通過(guò)onclick=f

27、1;與onclick=“f1();”在f1中使用this,說(shuō)明this在不同情況下的使用區(qū)別。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 動(dòng)態(tài)創(chuàng)建DOMldocument.write只能在頁(yè)面加載過(guò)程中才能動(dòng)態(tài)創(chuàng)建。l可以調(diào)用document的createElement方法來(lái)創(chuàng)建具有指定標(biāo)簽的DOM對(duì)象，然后通過(guò)調(diào)用某個(gè)元素的appendChild();方法將新創(chuàng)建元素添加到相應(yīng)的元素下。/父元素對(duì)象.removeChild(子元素對(duì)象);刪除元素。function showIt() var divMain = document.getElementById(divMai

28、n); var btn = document.createElement(input); btn.type = button; btn.value = 我是動(dòng)態(tài)的！; divMain.appendChild(btn); 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 innerText和innerHTMLl幾乎所有DOM元素都有innerText、innerHTML屬性（注意大小寫），分別是元素標(biāo)簽內(nèi)內(nèi)容的文本表示形式和HTML源代碼，這兩個(gè)屬性是可讀可寫的。/FF不支持innerText,在FF下用textContent屬性。也可以用innerHTML設(shè)置普通文本。/編寫兼

29、容的innerText,備注1.l示例：代碼見(jiàn)備注1。（innerText與innerHTML區(qū)別。）l用innerHTML也可以替代createElement，屬于簡(jiǎn)單、粗放型、后果自負(fù)的創(chuàng)建。l示例：function createlink() var divMain = document.getElementById(divMain);divMain.innerHTML = 如鵬網(wǎng);的innerHTML和的innerHTML不一樣。/建議，在使用之前要保證標(biāo)簽具有開始和結(jié)束標(biāo)記，否則，會(huì)出現(xiàn)一些意想不到的后果。l（*）通過(guò)能力檢測(cè)，寫一個(gè)可以兼容FF與IE的使用innerText與text

30、Content的代碼。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 練習(xí)l案例：點(diǎn)擊按鈕動(dòng)態(tài)增加網(wǎng)站列表，分兩列，第一列為網(wǎng)站的名字，第二列為帶網(wǎng)站超鏈接的網(wǎng)站名。增加三行常見(jiàn)網(wǎng)站。瀏覽器兼容性問(wèn)題，見(jiàn)備注。（先聲明一個(gè)dict集合來(lái)存鍵值對(duì)。）l動(dòng)態(tài)產(chǎn)生的元素，查看源代碼是看不到的。通過(guò)DebugBarDom文檔HTML可以看到。l練習(xí)：點(diǎn)擊按鈕增加一個(gè)網(wǎng)站的超鏈接(增加到body下面的某個(gè)div中。)l練習(xí)：無(wú)刷新評(píng)論。 貓貓：貓貓：沙發(fā)耶！沙發(fā)耶！ 昵稱：昵稱： 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 瀏覽器兼容性問(wèn)題l瀏覽器兼容性的例子：i

31、e6，ie7對(duì)table.appendChild(tr)的支持和IE8不一樣，用insertRow、insertCell來(lái)代替或者為表格添加tbody，然后向tbody中添加tr。FF不支持innerText。l所以動(dòng)態(tài)加載網(wǎng)站列表的程序修改為：var tr = tableLinks.insertRow(-1);/FF必須加-1這個(gè)參數(shù),表追加。如果不是負(fù)數(shù)，則表示在某個(gè)索引之前插入。var td1 = tr.insertCell(-1);td1.innerText = key;var td2 = tr.insertCell(-1);td2.innerHTML = + value + ;l或者

32、：（不建議），然后tableLinks. tBodies0.appendChild(tr);高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 innerHTML還是操作Dom節(jié)點(diǎn)l操作頁(yè)面的元素的時(shí)候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？1.對(duì)于大量進(jìn)行節(jié)點(diǎn)操作時(shí)，使用innerHTML的方式性能要好于頻繁的Dom操作(有專門用C或C+寫的html解析器。)。先將頁(yè)面的HTML代碼寫好，然后調(diào)用一次innerHTML,而不要反復(fù)調(diào)用innerHTML.2.對(duì)于使用innerHTML=的方式來(lái)

33、刪除節(jié)點(diǎn)，在某些情況下會(huì)存在內(nèi)存問(wèn)題。比如：div下面有很多其他元素，每個(gè)元素都綁定有事件處理程序。此時(shí)，innerHTML只是把當(dāng)前元素從節(jié)點(diǎn)樹上移除了，但是那些事件處理程序依然占用內(nèi)存。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 代碼是否需要放置到onload中l(wèi) /如果js代碼需要操作頁(yè)面上的元素，則將該代碼放到onload里面。l /因?yàn)楫?dāng)頁(yè)面加載完畢之后頁(yè)面上才會(huì)有相關(guān)的元素l /如果js代碼中沒(méi)有操作頁(yè)面元素的語(yǔ)句，則可以將該代碼直接寫在標(biāo)簽中，l /例如：聲明變量，相加求和等操作。 ll l l /寫在這里的代碼，由于已經(jīng)是頁(yè)面的底部，在執(zhí)行該代碼時(shí)，頁(yè)面的

34、元素已經(jīng)都加載完畢，所以可以不放到onload里面也可以操作頁(yè)面上的元素。l /建議將操作頁(yè)面元素的代碼都放到onload里面。 l l高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 Js操作頁(yè)面樣式，其他l易錯(cuò)：修改元素的樣式不是設(shè)置class屬性，而是className屬性。(class是JavaScript的一個(gè)保留字，屬性不能用關(guān)鍵字、保留字所以就變成className了)案例：網(wǎng)頁(yè)開關(guān)燈的效果。l修改元素的樣式不能不能this.style=background-color:Red。l易錯(cuò)：?jiǎn)为?dú)修改樣式的屬性使用“style.屬性名”。注意在css中屬性名在JavaS

35、cript中操作的時(shí)候?qū)傩悦赡懿灰粯?，主要集中在那些屬性名中含?的屬性，因?yàn)镴avaScript中-是不能做屬性、類名的。所以CSS中背景顏色是background-color，而JavaScript則是style. backgroundColor；元素樣式名是class，在JavaScript中是className屬性；font-sizestyle.fontSize；margin-topstyle.marginTop /駝峰命名法。l單獨(dú)修改控件的樣式。技巧，沒(méi)有文檔的情況下的值屬性名，隨便給一個(gè)元素設(shè)定id，然后在js中就能id.style.出來(lái)能用的屬性。l操作float樣式的時(shí)候，

36、IE與其他瀏覽器不太一樣。IE：obj.style.styleFloat=right;其他瀏覽器：obj.style.cssFloat=right;/通用代碼見(jiàn)備注1.高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 案例練習(xí)l案例1：創(chuàng)建三個(gè)輸入文本框，當(dāng)光標(biāo)離開文本框的時(shí)候如果文本框?yàn)榭?，則將文本框背景色設(shè)置為紅色，如果不為空則為白色。提示：焦點(diǎn)進(jìn)入控件的事件是onfocus，焦點(diǎn)離開控件的事件是onblur。l案例2：評(píng)分控件V1，用一個(gè)單行5列的Table做評(píng)分控件，監(jiān)聽(tīng)td的click事件，點(diǎn)擊一個(gè)td的時(shí)候，將這個(gè)td及之前的td背景變?yōu)榧t色，之后的td背景變?yōu)榘咨?/p>

37、。當(dāng)鼠標(biāo)懸浮在評(píng)分控件上的時(shí)候顯示超鏈接形式的鼠標(biāo)圖標(biāo)。【演示JQuery版】。l自定義簡(jiǎn)易評(píng)分控件代碼：見(jiàn)備注1.高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 練習(xí)l練習(xí)1：超鏈接的單選效果。頁(yè)還原為白色。參考：點(diǎn)擊變“嗚嗚”。頁(yè)面上若干個(gè)超鏈接，點(diǎn)擊一個(gè)超鏈接s的時(shí)候被點(diǎn)擊的超鏈接變?yōu)榧t色背景，其他超鏈接背景沒(méi)有變。window.event.returnValue=false;。難點(diǎn)“this”l練習(xí)2：點(diǎn)擊按鈕，表格隔行變色：偶數(shù)行為黃色背景，奇數(shù)行為默認(rèn)顏色。通過(guò)table的getElementsByTagName取得所有的tr，依次遍歷，如果是偶數(shù)就。l練習(xí)3：放

38、若干文本框，獲得焦點(diǎn)的文本框黃色黃色背景，其他控件背景顏色是白色白色思路1：監(jiān)聽(tīng)所有input的onfocus事件將背景設(shè)置為黃色，監(jiān)聽(tīng)所有input的onblur事件將背景設(shè)置為白色。思路2：只監(jiān)聽(tīng)onfocus和練習(xí)1一樣。l練習(xí)4：點(diǎn)擊表格行，被點(diǎn)擊的行高亮顯示（背景是黃色），其他行白色背景。監(jiān)聽(tīng)每個(gè)tr的onclick事件，將點(diǎn)擊的背景設(shè)置為黃色，其他的設(shè)置為白色背景。/對(duì)于table、div、span這類型元素沒(méi)有onfocus（獲取焦點(diǎn)的事件（無(wú)法觸發(fā)這些事件。）高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 控制層的顯示l修改style.display，例子：切

39、換層的顯示l function togglediv() l var div1 = document.getElementById(div1);l if (div1.style.display = ) l div1.style.display = none;/不顯示l l else l div1.style.display = ;/顯示l l /與元素對(duì)象.enabled=true或readonly=true等不一樣，這里是樣式，不是元素的直接屬性，不能用true或false。l案例：按鈕、checkbox,一般想到的都是onchange事件。（使用click事件，避免使用onchange事件。

40、）與超鏈接（3種），顯示層。/動(dòng)態(tài)創(chuàng)建層，移除。l案例：鼠標(biāo)放到超鏈接上的時(shí)候顯示一個(gè)圖片或文字（放到div中。）高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 動(dòng)態(tài)設(shè)置元素的位置、大小l通過(guò)dom讀取元素的top、left、width、height等取到的值不是數(shù)字，而是“10px”這樣的字符串；為這些屬性設(shè)值的時(shí)候IE可以是80、90這樣的數(shù)字，F(xiàn)F、Chrome必須是“80px”、“90%”等這樣的字符串形式，為了兼容統(tǒng)一用字符串形式。left/top需要設(shè)置positionl易錯(cuò)：不要寫成div1.style.width=80px，而是div1.style.width

41、=80px;l如果要修改元素的大?。▽挾燃?），則首先要取出元素的寬度，然后用parseInt將寬度轉(zhuǎn)換為數(shù)字（parseInt可以將“20px”這樣數(shù)字開頭的包含其他內(nèi)容的字符串解析為20，parseInt(22px,10)，也就是解析盡可能多的部分）；然后加上一個(gè)值，再加上px賦值回去。l案例：層的動(dòng)態(tài)改變大小，將層內(nèi)的內(nèi)容隱藏掉(overflow:hidden)。setInterval();高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 IE中body的事件范圍lIE中如果在body上添加onclick、onmousemove等事件響應(yīng)，那么如果頁(yè)面沒(méi)有滿，則 “bod

42、y 中最后一個(gè)元素以下（橫向不限制）” 的部分是無(wú)法響應(yīng)事件的，必須使用代碼在document上監(jiān)聽(tīng)那些事件，比如document.onmousemove = MovePicldocument.body.onmousedown=function()ldocument.onmousedown=function()l注意加文檔定義與不加文檔定義的也不一樣。l如果為整個(gè)文檔注冊(cè)事件可以使用：document.onxxxx事件。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 層的操作l元素的position 樣式值：static（無(wú)定位，顯示在默認(rèn)位置）、absolute（絕對(duì)定位）

43、、fixed（相對(duì)于窗口的固定定位，位置不會(huì)隨著瀏覽器的滾動(dòng)而變化，IE6不支持）、relative（相對(duì)元素默認(rèn)位置的定位）。如果要通過(guò)代碼修改元素的坐標(biāo)則一般使用absolute，然后修改元素的top（上邊緣距離）、左邊緣距離）兩個(gè)樣式值。left、top都是指的層的左上角的坐標(biāo)left（l案例：跟著鼠標(biāo)飛的圖片。提示：鼠標(biāo)移動(dòng)的事件是onmousemove（一邊移動(dòng)事件一邊觸發(fā)，而不是移動(dòng)開始或者移動(dòng)完成才觸發(fā)），通過(guò)window.event的clientX、clientY屬性獲得鼠標(biāo)的位置。l案例：鼠標(biāo)放到一個(gè)超鏈接的時(shí)候，在鼠標(biāo)的位置顯示一個(gè)黃色背景，帶圖片的懸浮提示，鼠標(biāo)離開就消失。提示：鼠標(biāo)進(jìn)入控件的事件是onmouseover，離開的事件是onmouseout。l案例：點(diǎn)擊按鈕層動(dòng)態(tài)變大。提示：英文字母連續(xù)單詞不會(huì)在中間自動(dòng)換行的陷阱overflow、word-break: break-all;(查手冊(cè)。查手冊(cè)。)高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家北京傳智播客教育 問(wèn)題l易錯(cuò)：不要寫成div1.style.width=80px，而是div1.style.width=80pxl修改元素的樣式不能不能this.style=background-color:Red，哪怕可以的話也是把以前所有樣