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

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

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

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

5、培訓專家高級軟件人才實作培訓專家動態(tài)設置事件lJavaScript也可以像.Net中那樣動態(tài)設置事件，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.高級軟件人才實作培訓專家高級軟件人才實作培訓專

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

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

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

9、meout(alert(hello), 2000);l案例：實現(xiàn)標題欄走馬燈的效果，也就是瀏覽器的標題文字每隔500ms向右滾動一下。提示：標題為document.title屬性。實現(xiàn)代碼參考備注。l練習：剛進入的時候還是向左滾動，點擊【向左】按鈕就向左連續(xù)滾動，點擊【向右】按鈕就向右連續(xù)滾動。思路1、”全局變量”，標志當前的滾動方向，當點擊向左的時候dir=left,向右dir=right。思路2、scrollleft scroolright,向右滾的時候?qū)crollleft的Interval clear掉，然后setInterval啟動scrollrightl延遲操作。見備注1.高級軟件

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

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

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

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

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

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

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

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

18、家高級軟件人才實作培訓專家window對象的屬性4l代碼：function modifyClipboard() clipboardData.setData(Text, clipboardData.getData(Text) + 本文來自傳智播客技術(shù)專區(qū)，轉(zhuǎn)載請注明來源。 + location.href);oncopy=setTimeout(modifyClipboard(),100)“用戶復制動作發(fā)生0.1秒以后再去改粘貼板中的內(nèi)容。100ms只是一個經(jīng)常取值，寫1000、10、50、200都行。不能直接在oncopy里修改粘貼板。不能直接在oncopy中執(zhí)行對粘貼板的操作，因此設定定時器，0

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

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

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

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

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

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

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

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

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

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

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

30、： 高級軟件人才實作培訓專家高級軟件人才實作培訓專家瀏覽器兼容性問題l瀏覽器兼容性的例子：ie6，ie7對table.appendChild(tr)的支持和IE8不一樣，用insertRow、insertCell來代替或者為表格添加tbody，然后向tbody中添加tr。FF不支持innerText。l所以動態(tài)加載網(wǎng)站列表的程序修改為：var tr = tableLinks.insertRow(-1);/FF必須加-1這個參數(shù),表追加。如果不是負數(shù)，則表示在某個索引之前插入。var td1 = tr.insertCell(-1);td1.innerText = key;var td2 = tr

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

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

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

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

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

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

37、放若干文本框，獲得焦點的文本框黃色黃色背景，其他控件背景顏色是白色白色思路1：監(jiān)聽所有input的onfocus事件將背景設置為黃色，監(jiān)聽所有input的onblur事件將背景設置為白色。思路2：只監(jiān)聽onfocus和練習1一樣。l練習4：點擊表格行，被點擊的行高亮顯示（背景是黃色），其他行白色背景。監(jiān)聽每個tr的onclick事件，將點擊的背景設置為黃色，其他的設置為白色背景。/對于table、div、span這類型元素沒有onfocus（獲取焦點的事件（無法觸發(fā)這些事件。）高級軟件人才實作培訓專家高級軟件人才實作培訓專家控制層的顯示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、），顯示層。/動態(tài)創(chuàng)建層，移除。l案例：鼠標放到超鏈接上的時候顯示一個圖片或文字（放到div中。）高級軟件人才實作培訓專家高級軟件人才實作培訓專家動態(tài)設置元素的位置、大小l通過dom讀取元素的top、left、width、height等取到的值不是數(shù)字，而是“10px”這樣的字符串；為這些屬性設值的時候IE可以是80、90這樣的數(shù)字，F(xiàn)F、Chrome必須是“80px”、“90%”等這樣的字符串形式，為了兼容統(tǒng)一用字符串形式。left/top需要設置positionl易錯：不要寫成div1.style.width=80px，而是div1.style.width=80px;l如果要修改元素的大小

40、（寬度加1），則首先要取出元素的寬度，然后用parseInt將寬度轉(zhuǎn)換為數(shù)字（parseInt可以將“20px”這樣數(shù)字開頭的包含其他內(nèi)容的字符串解析為20，parseInt(22px,10)，也就是解析盡可能多的部分）；然后加上一個值，再加上px賦值回去。l案例：層的動態(tài)改變大小，將層內(nèi)的內(nèi)容隱藏掉(overflow:hidden)。setInterval();高級軟件人才實作培訓專家高級軟件人才實作培訓專家IE中body的事件范圍lIE中如果在body上添加onclick、onmousemove等事件響應，那么如果頁面沒有滿，則 “body 中最后一個元素以下（橫向不限制）” 的部分是無法

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

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