JavaScriptDOM編程

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

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

3、ork。沒有.net，C#只能for、while，連WriteLine、MessageBox都不行。DOM就是一些讓JavaScript能操作Html頁面控件的類、函數(shù)。lDOM也像WinForm一樣，通過事件、屬性、方法進(jìn)行編程。lCSS+JavaScript+DOM=DHtmll學(xué)習(xí)階段只考慮IE。用IE Collection安裝IE所有版本，學(xué)習(xí)使用IE6（要調(diào)試必須使用本機(jī)安裝的版本）。/js DOM在不同的瀏覽器下支持不一樣。(IETester)高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家DOM模型高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家獲取頁面元素lwindow.idl

4、document.getElementById()高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家事件l在DOM中有很多事件。演示： /注意body的范圍。有時(shí)事件的響應(yīng)代碼比較多，就要放到一個(gè)函數(shù)中： function UserMouseDown() alert(網(wǎng)頁被你點(diǎn)壞了_,賠吧！); alert(逗你玩呢); 1.onmousedown=“UserMouseDown();”中，UserMouseDown后的括號不能丟（不能寫成onmousedown=“UserMouseDown” ），帶()表示調(diào)用函數(shù)，直接寫函數(shù)名表示設(shè)置事件的處理函數(shù)為UserMouseDown。高級軟件人才實(shí)作

5、培訓(xùn)專家高級軟件人才實(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不要加括號，加括號就編程了調(diào)用F1()函數(shù)，并且把返回值賦值給document.onclick了。l可以通過winform的事件來演示onclick=“hanshu()”與onclick=hanshu;的區(qū)別。如果講解，見備注1.高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專

6、家window對象(Dom中的一個(gè)頂級對象。)lwindow對象代表當(dāng)前瀏覽器窗口。l使用window對象的屬性、方法的時(shí)候可以省略window。l比如：window.alert(hello);可以省略成alert(hello);window.document可以直接寫documentl能不寫window就不要寫，這樣可以減少js文件的字節(jié)數(shù)。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的方法1lwindow.alert(大家好！);/彈出警告對話框lwindow.confirm(確定要?jiǎng)h除嗎？);/確定、取消對話框，返回true或false;lwindow.navigat

7、e(url);/將網(wǎng)頁重新導(dǎo)航到url,只支持IE、Opera11.6,建議使用window.location.href=url;/支持大多數(shù)瀏覽器高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的方法2lwindow.setInterval(code,delay)/每隔一段時(shí)間執(zhí)行指定的代碼（類似于winForm中的Timer控件。）第一個(gè)參數(shù)：指定的代碼字符串第二個(gè)參數(shù)：時(shí)間間隔（毫秒數(shù)）var intervalId=setInterval(“alert(hello);”,1000);lwindow.clearInterval(intervalId);/停止計(jì)時(shí)器clear

8、Interval()取消setInterval的定時(shí)執(zhí)行，相當(dāng)于Timer中的Enabled=False。因?yàn)閟etInterval可以設(shè)定多個(gè)定時(shí)，所以clearInterval要指定清除那個(gè)定時(shí)器的標(biāo)識，即setInterval的返回值。案例：文本框自增。進(jìn)度條案例：見備注1.高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的方法3lsetTimeout也是定時(shí)執(zhí)行，但是不像setInterval那樣是重復(fù)的定時(shí)執(zhí)行，只執(zhí)行一次只執(zhí)行一次，clearTimeout也是清除定時(shí)。很好區(qū)分：Interval：間隔；timeout：超時(shí)。var timeoutId = setTi

9、meout(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,向右dir=right。思路2、scrollleft scroolright,向右滾的時(shí)候?qū)crollleft的Interval clear掉，然后setInterval啟動(dòng)scrollrightl延遲操作。見備注1.高級軟件

10、人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家body、document對象的事件lonload（頁面加載后觸發(fā)）網(wǎng)頁加載完畢時(shí)觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會(huì)出現(xiàn)JavaScript執(zhí)行時(shí)需要操作某個(gè)元素，這個(gè)元素還沒有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加載完畢時(shí)觸發(fā)，body onload才是全部加載完成。window.控件Id（不建議使用）document.getElementById(“控件Id”);(推薦)lonunload（頁面卸載后觸發(fā)）網(wǎng)頁關(guān)閉（或者離開）后后觸發(fā)

11、。/刷新頁面的時(shí)候、關(guān)閉選項(xiàng)卡的時(shí)候（多個(gè)選項(xiàng)卡）lonbeforeunload（頁面卸載前觸發(fā)）在網(wǎng)頁準(zhǔn)備關(guān)閉（或者離開）前觸發(fā)。/注意瀏覽器緩存。顯示的文字隨瀏覽器版本而有差異。/ =“window.event.returnValue=只兼容IE高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家其他事件l除了屬性之外，當(dāng)然還有通用的HTML元素的事件：onclick（單擊）、ondblclick（雙擊）、onkeydown（按鍵按下）、onkeypress（點(diǎn)擊按鍵）、onkeyup（按鍵釋放）、onmousedown（鼠標(biāo)按下）、onmousemove（鼠標(biāo)移動(dòng)）、onmouseout（鼠

12、標(biāo)離開元素范圍）、onmouseover（鼠標(biāo)移動(dòng)到元素范圍）、onmouseup（鼠標(biāo)按鍵釋放）、oncontextmenu（在瀏覽器中單擊鼠標(biāo)右鍵顯示”右鍵菜單”時(shí)觸發(fā)）等。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性1lwindow.location對象：window.location.href=;/重新導(dǎo)航到新頁面,可以取值，也可以賦值。window.location.reload();/刷新當(dāng)前頁lwindow.event是IE下非常重要的屬性，用來獲得發(fā)生事件時(shí)的信息，事件不局限于window對象的事件，所有元素的事件都可以通過event屬性取到相關(guān)信息。

13、類似于winForm中的e(EventArgs)。/兼容IE、Chrome，不兼容FF（用event參數(shù)）。window.event.altKey屬性，bool類型，表示事件發(fā)生時(shí)是否按下了alt鍵。類似的還有ctrlKey,shiftKey。演示： ；高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性2lwindow.event的屬性（接上頁）：clientX、clientY 發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)的坐標(biāo)；screenX、screenY 發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)；offsetX、offsetY 發(fā)生事件時(shí)鼠標(biāo)相對于事件源（比如點(diǎn)擊按鈕時(shí)觸發(fā)onclick）的坐標(biāo)。當(dāng)頁

14、面中有!DOCTYPE（文檔定義）時(shí)，對offsetX和offsetY單擊時(shí)的解析不同(使用onmousedown的時(shí)候與onclick測試結(jié)果不同。 )。（單擊按鈕中文字的時(shí)候。）(window.event.returnValue)returnValue屬性，如果將returnValue設(shè)置為false，就會(huì)取消默認(rèn)事件的處理。在超鏈接的onclick里面禁止訪問href的頁面。在表單校驗(yàn)的時(shí)候禁止提交表單到服務(wù)器，防止錯(cuò)誤數(shù)據(jù)提交給服務(wù)器、防止頁面刷新。(onsubmit=window.event.returnValue=false;)window.event.returnValue不兼容

15、火狐瀏覽器FireFox:e. preventDefault();取消事件的默認(rèn)動(dòng)作。直接寫return false;IE、FF、Chrome都可以。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性3lwindow.event的屬性（接上頁）：srcElement：獲得事件源對象。幾個(gè)按鈕共享一個(gè)事件響應(yīng)函數(shù)用。*_click(object sender,EventArgs e)/IE、Chrome支持。見備注1。/FF下用e.target;button，發(fā)生事件時(shí)鼠標(biāo)按鍵，IE:1為左鍵，2為右鍵，s4中滑輪/要測試event.button的值的時(shí)候，請?jiān)趏nmouse

16、down事件中測試。在onclick事件中只能識別鼠標(biāo)左鍵的單擊。不同瀏覽器返回值可能不一樣。 （不同瀏覽器值不一樣）除IE瀏覽器外，其他瀏覽器在綁定事件處理函數(shù)時(shí)，有一個(gè)默認(rèn)的參數(shù)即event對象。l（*）screen對象，獲取屏幕的信息：alert(分辨率： + screen.width + * + screen.height); if (screen.width 1024 | screen.height 768) alert(分辨率太低！); 高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性4lclipboardData對象，對粘貼板的操作。/只支持IE,FF參考資

17、料setData(Text,val)，設(shè)置粘貼板中的值。getData(“Text”)讀取粘貼板的值，返回值為粘貼板中的內(nèi)容；clearData(“Text”)清空粘貼板；案例：復(fù)制地址給友好。見備注。當(dāng)復(fù)制的時(shí)候body的oncopy方法被觸發(fā)，直接return false就是禁止復(fù)制。body oncopy=alert(禁止復(fù)制！);return false;很多元素也有oncopy(復(fù)制)、onpaste（粘貼）事件：oncut案例：禁止粘貼帳號。見備注。案例：在網(wǎng)站中復(fù)制文章的時(shí)候，為了防止那些”拷貝黨”不添加文章來源，自動(dòng)在復(fù)制的內(nèi)容后添加版權(quán)聲明。代碼見下頁：高級軟件人才實(shí)作培訓(xùn)專

18、家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性4l代碼：function modifyClipboard() clipboardData.setData(Text, clipboardData.getData(Text) + 本文來自傳智播客技術(shù)專區(qū)，轉(zhuǎn)載請注明來源。 + 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í)行對粘貼板的操作，因此設(shè)定定時(shí)器，0

19、.1秒以后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。lhistory操作歷史記錄。window.history.back()后退；window.history.forward()前進(jìn)。window.history.go(-1)后退、window.history.go(1)前進(jìn)高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性5-documentldocument屬性：document屬性是window對象中最復(fù)雜的屬性。因?yàn)槭褂脀indow對象成員的時(shí)候可以省略window.，所以一般直接寫document。document的方法：write();/向文檔中寫入內(nèi)容。w

20、riteln()，和write差不多，只不過最后添加一個(gè)回車。在onclick等事件中寫的代碼會(huì)沖掉頁面中的內(nèi)容，只有在頁面加載過程中只有在頁面加載過程中write才會(huì)與原有內(nèi)容融合在一才會(huì)與原有內(nèi)容融合在一起。起。writeln()是在源代碼里面換行。與是在源代碼里面換行。與不一樣。不一樣。document.write()經(jīng)常在廣告代碼、整合資源代碼中被使用。見備注。內(nèi)容聯(lián)盟、廣告代碼、cnzz，不需要被主頁面的站長去維護(hù)內(nèi)容，只要被嵌入的js內(nèi)容提供商修改內(nèi)容，顯示的內(nèi)容就變了。（使用pre標(biāo)簽看write()與writeln()的區(qū)別，效果，見備注1）Js腳本一執(zhí)行就會(huì)訪問服務(wù)器。超鏈接

21、誒還需要點(diǎn)擊。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性6-documentl最基本的DOM遍歷演示。見備注1。（*）lgetElementById(), （非常常用），根據(jù)元素的Id獲得對象，網(wǎng)頁中id不能重復(fù)。也可以直接通過元素的id來引用元素，但是有有效范圍、form1.textbox1之類的問題（當(dāng)元素放在form中的時(shí)候（在html頁面中需要通過form.元素id），因此不建議直接通過id操作元素，而是通過getElementById。lgetElementsByName()，根據(jù)元素的name獲得對象，由于頁面中元素的name可以重復(fù)，比如多個(gè)Radio

22、Button的name一樣，因此getElementsByName返回值是對象數(shù)組。lgetElementsByTagName()，獲得指定標(biāo)簽名稱的元素?cái)?shù)組，比如getElementsByTagName(“p”)可以獲得所有的標(biāo)簽。*表示所有標(biāo)簽。l此處切忌不要使用forin循環(huán)(forin循環(huán)循環(huán)的是鍵值對，不是對象本身。)。（問題多多：radio時(shí)有相同的key,第一個(gè)key是length等等。）建議：使用for循環(huán)。 document.getElementById()/document.allid(*)高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家window對象的屬性7-docum

23、entl案例：點(diǎn)擊一個(gè)按鈕，被點(diǎn)擊的按鈕顯示“嗚嗚”，其他按鈕顯示“哈哈”。l案例：十秒鐘后協(xié)議文本框下的注冊按鈕才能點(diǎn)擊，時(shí)鐘倒數(shù)。(btn.disabled = “” ，讓元素可用。disabled=disabled,為不可用)disabled=true;l練習(xí)：加法計(jì)算器。兩個(gè)文本框中輸入數(shù)字，點(diǎn)擊【=】按鈕將相加的結(jié)果放到第三個(gè)文本框中。l練習(xí)：美女時(shí)鐘。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家事件冒泡l事件冒泡：如果元素A嵌套在元素B中，那么A被點(diǎn)擊不僅A的onclick事件會(huì)被觸發(fā)，B的onclick也會(huì)被觸發(fā)。觸發(fā)的順序是“由內(nèi)而外” 。驗(yàn)證：在頁面上添加一個(gè)table、

24、table里有tr、tr里有td，td里放一個(gè)p，在p、td、tr、table中添加onclick事件響應(yīng)，見備注。l取消事件冒泡： window.event.cancelBubble = true;/IE下的寫法。下的寫法。lSpan設(shè)置display:block；以后再設(shè)置height,width才會(huì)有效。lwindow.onload與body的onload1.二者效果完全一樣,都是在頁面內(nèi)容都加載完畢后才觸發(fā)。2.由于網(wǎng)頁中沒有window所以在body中寫onload3.建議使用window.onload/使用js腳本的方式高效4.其實(shí)應(yīng)該是document.onload，但是所有瀏覽

25、器都實(shí)現(xiàn)到了window對象上。s高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家事件中的thisl事件中的this。除了可以使用event.srcElement在事件響應(yīng)函數(shù)中，this表示發(fā)生事件發(fā)生事件的控件。只有在事件響應(yīng)函數(shù)才能使用this獲得發(fā)生事件的控件，在事件響應(yīng)函數(shù)調(diào)用的函數(shù)中不能使用（這里的this表示window對象），如果要使用則要將this傳遞給函數(shù)或者使用event.srcElement。(*)this和event.srcElement的語義是不一樣的，this就是表示當(dāng)前監(jiān)聽事件的這個(gè)對象，就是表示當(dāng)前監(jiān)聽事件的這個(gè)對象，event.srcElement是引發(fā)事件

26、的對象：事件冒泡是引發(fā)事件的對象：事件冒泡。ll1.通過“事件冒泡”說明this與window.event.srcElement的區(qū)別。l2.通過onclick=f1;與onclick=“f1();”在f1中使用this,說明this在不同情況下的使用區(qū)別。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家動(dòng)態(tài)創(chuàng)建DOMldocument.write只能在頁面加載過程中才能動(dòng)態(tài)創(chuàng)建。l可以調(diào)用document的createElement方法來創(chuàng)建具有指定標(biāo)簽的DOM對象，然后通過調(diào)用某個(gè)元素的appendChild();方法將新創(chuàng)建元素添加到相應(yīng)的元素下。/父元素對象.removeChild(子

27、元素對象);刪除元素。function showIt() var divMain = document.getElementById(divMain); var btn = document.createElement(input); btn.type = button; btn.value = 我是動(dòng)態(tài)的！; divMain.appendChild(btn); 高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家innerText和innerHTMLl幾乎所有DOM元素都有innerText、innerHTML屬性（注意大小寫），分別是元素標(biāo)簽內(nèi)內(nèi)容的文本表示形式和HTML源代碼，這兩個(gè)屬性是可

28、讀可寫的。/FF不支持innerText,在FF下用textContent屬性。也可以用innerHTML設(shè)置普通文本。/編寫兼容的innerText,備注1.l示例：代碼見備注1。（innerText與innerHTML區(qū)別。）l用innerHTML也可以替代createElement，屬于簡單、粗放型、后果自負(fù)的創(chuàng)建。l示例：function createlink() var divMain = document.getElementById(divMain);divMain.innerHTML = 如鵬網(wǎng);的innerHTML和的innerHTML不一樣。/建議，在使用之前要保證標(biāo)簽具有

29、開始和結(jié)束標(biāo)記，否則，會(huì)出現(xiàn)一些意想不到的后果。l（*）通過能力檢測，寫一個(gè)可以兼容FF與IE的使用innerText與textContent的代碼。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家練習(xí)l案例：點(diǎn)擊按鈕動(dòng)態(tài)增加網(wǎng)站列表，分兩列，第一列為網(wǎng)站的名字，第二列為帶網(wǎng)站超鏈接的網(wǎng)站名。增加三行常見網(wǎng)站。瀏覽器兼容性問題，見備注。（先聲明一個(gè)dict集合來存鍵值對。）l動(dòng)態(tài)產(chǎn)生的元素，查看源代碼是看不到的。通過DebugBarDom文檔HTML可以看到。l練習(xí)：點(diǎn)擊按鈕增加一個(gè)網(wǎng)站的超鏈接(增加到body下面的某個(gè)div中。)l練習(xí)：無刷新評論。 貓貓：貓貓：沙發(fā)耶！沙發(fā)耶！ 昵稱：昵稱

30、： 高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家瀏覽器兼容性問題l瀏覽器兼容性的例子：ie6，ie7對table.appendChild(tr)的支持和IE8不一樣，用insertRow、insertCell來代替或者為表格添加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

31、.insertCell(-1);td2.innerHTML = + value + ;l或者：（不建議），然后tableLinks. tBodies0.appendChild(tr);高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家innerHTML還是操作Dom節(jié)點(diǎn)l操作頁面的元素的時(shí)候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？1.對于大量進(jìn)行節(jié)點(diǎn)操作時(shí)，使用innerHTML的方式性能要好于頻繁的Dom操作(有專門用C或C+寫的html解析器。)。先將頁面的HTML代碼寫好，然后調(diào)用一次innerHTML,

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

33、這里的代碼，由于已經(jīng)是頁面的底部，在執(zhí)行該代碼時(shí)，頁面的元素已經(jīng)都加載完畢，所以可以不放到onload里面也可以操作頁面上的元素。l /建議將操作頁面元素的代碼都放到onload里面。 l l高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家Js操作頁面樣式，其他l易錯(cuò)：修改元素的樣式不是設(shè)置class屬性，而是className屬性。(class是JavaScript的一個(gè)保留字，屬性不能用關(guān)鍵字、保留字所以就變成className了)案例：網(wǎng)頁開關(guān)燈的效果。l修改元素的樣式不能不能this.style=background-color:Red。l易錯(cuò)：單獨(dú)修改樣式的屬性使用“style.屬性

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

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

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

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

38、unction 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 /與元素對象.enabled=true或readonly=true等不一樣，這里是樣式，不是元素的直接屬性，不能用true或false。l案例：按鈕、checkbox,一般想到的都是onchange事件。（使用click事件，避免使用onchange事件。）與超鏈接（3種

39、），顯示層。/動(dòng)態(tài)創(chuàng)建層，移除。l案例：鼠標(biāo)放到超鏈接上的時(shí)候顯示一個(gè)圖片或文字（放到div中。）高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家動(dòng)態(tài)設(shè)置元素的位置、大小l通過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=80px;l如果要修改元素的大小

40、（寬度加1），則首先要取出元素的寬度，然后用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();高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家IE中body的事件范圍lIE中如果在body上添加onclick、onmousemove等事件響應(yīng)，那么如果頁面沒有滿，則 “body 中最后一個(gè)元素以下（橫向不限制）” 的部分是無法

41、響應(yīng)事件的，必須使用代碼在document上監(jiān)聽那些事件，比如document.onmousemove = MovePicldocument.body.onmousedown=function()ldocument.onmousedown=function()l注意加文檔定義與不加文檔定義的也不一樣。l如果為整個(gè)文檔注冊事件可以使用：document.onxxxx事件。高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家層的操作l元素的position 樣式值：static（無定位，顯示在默認(rèn)位置）、absolute（絕對定位）、fixed（相對于窗口的固定定位，位置不會(huì)隨著瀏覽器的滾動(dòng)而變化，I

42、E6不支持）、relative（相對元素默認(rèn)位置的定位）。如果要通過代碼修改元素的坐標(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ā)），通過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;(查手冊。查手冊。)高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家問題l易錯(cuò)：不要寫成div1.style.width=80px，而是div1.style.width=80pxl修改元素的樣式不能不能this.style=background-color:Red，哪怕可以的話也是把以前所有樣式都沖掉了。單獨(dú)修改控件的樣式this