DOM 笔记
DOM就是HTML頁面的模型，將每個標簽作為一個對象，javascript通過調(diào)用DOM中的屬性，方法對網(wǎng)頁中的文本框，層等進行編程控制
javascript——》DOM就是C#——》.NET FRAMEWORK
DOM也像winform一樣，通過事件，屬性，方法編程。
CSS+javascript+DOM=DHTML
一，window對象，代表當前瀏覽器窗口，使用window對象的屬性，方法的時候可以省略window
1.confirm方法，顯示“確定”，“取消”對話框，按下“確定”返回true，否則返回false
2.navigate方法，重新導航到指定的地址。
3.setInterval，每個一段時間執(zhí)行指定的代碼，第一個參數(shù)為代碼的字符串，第二個參數(shù)為間隔時間（單位毫秒），返回值為定時器的標識。<input type="button" value="滾動" οnclick="setInterval('scroll()',500)"/>每調(diào)用一次setInterval都會產(chǎn)生一個新的定時器，并且舊的不會停止，所以看起來好像“越跑越快”
4.clearInterval取消setInterval的定時執(zhí)行，相當于timer中的enabled=false。因為可以設定多個定時器，所以取消時要指定清除那個定時器的標識，即setInterval的返回值。
5.setTimeout,超時。也是定時執(zhí)行，但只執(zhí)行一次。對應clearTimeout
二，body,document對象的事件
1.onload，網(wǎng)頁加載完畢時觸發(fā)，瀏覽器一邊下載文檔一邊解析執(zhí)行，可能會出現(xiàn)javascript執(zhí)行時需要操作某個元素這個元素還沒加載，若這樣就要把操作的代碼放到onload事件中，或者把javascript放在元素之后,比如在頁面打開時就更改一個還未沒創(chuàng)建的按鈕的屬性，可這么做<body οnlοad="btn.value='ok'；"/>
2.onunload，網(wǎng)頁關閉（或者離開）后觸發(fā)
3.onbeforeunload，在網(wǎng)頁準備關閉（或者離開）后觸發(fā)。在事件中為“window.event.returnValue賦值（即設置要顯示的警告消息），這樣窗口離開（比如前進，后退，關閉）就會彈出確認消息<body οnbefοreunlοad="window.event.returnValue='真的要放棄嗎？'；"/>
4.其他事件。onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
三，window對象屬性。
1.window.location.href。獲取或設置地址。
2.window.event。用來獲得發(fā)生事件時的信息，事件不局限于window對象的時間，類似于winform中的eventArgs e。
altKey屬性，bool類型，類似還有ctrlKey,shiftKey.
clientX,clientY,客戶區(qū)的坐標；screenX，screenY，屏幕上的坐標；offsetX，offsetY鼠標相對于事件源的坐標
returnValue屬性，設置為false會取消默認事件的處理。在超鏈接的onclick里面禁止訪問href的頁面；在表單校驗的時候禁止提交表單到服務器；可考慮用這個，如：<a href="http://www.baidu.com" οnclick="alert('禁止訪問');window.returnValue=false;">百度</a>
srcElement,獲得事件源對象。
keyCode發(fā)生事件時的按鍵值。
button，發(fā)生事件時鼠標按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。
3.screen對象，屏幕的信息；.height;.width
4.clipboardData對象，對粘貼板的操作。clearData("Text")清空粘貼板;getData("Text")讀取粘貼板的值，返回值為粘貼板中的內(nèi)容;setData("Text",val)設置粘貼板的值。參數(shù)永遠是Text。練習：可以復制地址給好友。
當復制的時候body的oncopy方法被觸發(fā)，直接return false就是禁止復制。<body οncοpy="alert('禁止復制！');return false;">
很多元素也有oncopy，onpaste事件。練習：禁止粘貼賬號。
在網(wǎng)站中復制文章的時候為了防止拷貝黨不添加文章來源，自動在復制的內(nèi)容后添加版權聲明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文來自。。。轉載請注明出處'+location.href);
}
οncοpy="setTimeout('modifyClipborad()',100)",不能在oncopy中執(zhí)行對粘貼板的操作，因此設定定時器，0.1秒后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。
5.window.history.back()后退；window.history.forward()前進。也可以用window.history.go(-1),window.history.go(1)前進
6.window對象的document屬性，最復雜屬性之一。
document.write方法，向頁面中寫入內(nèi)容。。在onclick等事件中寫的代碼會沖掉頁面的內(nèi)容，只有在頁面加載過程中write才會與原有內(nèi)容融合在一起。write經(jīng)常在廣告代碼，整合資源代碼中被使用。
document.getElementByIdx_x_x_x方法（非常常用），根據(jù)元素的id獲得對象，網(wǎng)頁中id不能重復，當然你也可以直接通過元素的id來引用元素，但是有有效范圍，因此不建議直接通過id操作元素而是通過getElementById.
document.getElementByName,根據(jù)元素的name獲得對象，由于頁面中元素的name可以重復，因此此方法返回值是對象數(shù)組。比如獲得radio的數(shù)組。
documen.getElementByTagName,獲得指定標簽名稱的元素數(shù)組。
練習：點擊一個按鈕，被點擊的按鈕顯示“嗚嗚”，其他顯示“哈哈”
十秒鐘后協(xié)議文本框下的注冊按鈕才能被點擊，時鐘倒數(shù)。(btn.disabled=true)
加法計算器,利用控件的ID來獲得值相加注意用parsteInt轉換；美女時鐘、img控件加載圖片，用時間來改變組裝圖片的名字。
四，DOM的動態(tài)創(chuàng)建。
1. 當我們想動態(tài)創(chuàng)建DOM對象時怎么辦呢？也許你想到了document.write，但是這個方法只能在頁面加載過程中動態(tài)創(chuàng)建
可以調(diào)用document_createElement_x_x_x方法來創(chuàng)建具有指定標簽的DOM對象，然后通過調(diào)用元素的a方法將新創(chuàng)建元素添加到相應元素下(如div)。
2.幾乎所有的DOM元素都有innerText，innerHTML屬性(注意大小寫)，分別是元素標簽內(nèi)內(nèi)容的文本表示形式（標簽內(nèi)部的文本，如<a>文本</a>）和HTML源代碼（標簽內(nèi)部的代碼，如<div id='...'>innerHTML</div>），這兩個屬性是可讀可寫的。所以可用其動態(tài)修改元素。。動態(tài)產(chǎn)生的元素，瀏覽器中查看源代碼是看不到的，可以通過DebugBar——>DOM——>文檔——>HTML
五，其他。
1.冒泡事件。
2.事件中的this，我們之前有在事件響應函數(shù)中用event.srcElement，現(xiàn)在我們還可以用this，this表示發(fā)生事件的控件。但是只有在事件響應函數(shù)中才能使用this獲得發(fā)生事件的控件，在事件響應函數(shù)調(diào)用的函數(shù)中是不能使用的，非要用的話要將this傳遞給函數(shù)或者使用event.srcElement
3.修改元素樣式不是設置class屬性，而是className屬性。
修改元素的樣式不能this.style="background-color:Red".單獨修改樣式的屬性使用style.屬性名。注意在CSS中屬性名在javascript中操作的時候?qū)傩悦赡懿灰粯?#xff0c;主要集中在哪些屬性名中含有-的屬性，因為javascript中-是不能做屬性，類名的。如CSS：background-color而javascript：style.background
4.控制層的顯示。修改style.display。=‘none’不顯示，=‘’顯示。
鼠標進入控件的事件是onmouseover,離開的事件是onmouseout，移動的事件是onmousemove。
5.IE中body的事件范圍。在body上添加onclick、onmouseover、等事件響應那么如果頁面沒有滿，則body中最后一個元素以下（但是橫向就不受限制）的部分是無法響應事件的。必須得使用代碼在document上監(jiān)聽那些事件，比如document.οnmοuseοver=方法。。。
6.通過DOM讀取元素的top、left、width、height等取到的值是像10PX這樣的字符串，為這些屬性設值得時候IE可以是80,90這樣的數(shù)字，但FF必須是加PX，%等這樣的字符串形式，為了兼容統(tǒng)一我們要用字符串形式。
若要用DOM修改（比如自動加寬）元素的大小要首先要取出元素的寬度然后用parseInt將寬度轉換為數(shù)字，然后再加上PX賦值回去。PS：不像C#中那樣，在JS中parseInt是盡可能解析出數(shù)字的，比如50fhdhjh它也能解析出50來。
7.層的定位操作。元素的position樣式值：static（無定位，顯示在默認位置）、absolute（絕對定位）、fixed（相對于窗口的固定定位，位置不會隨著瀏覽器的滾動而變化，IE6不支持）、relative（相對于元素默認位置的定位）。若要通過代碼修改元素的坐標則一般使用absolute，然后修改元素的top、left兩個樣式值。
-------------------------------------------------------------------------------
form對象！
1.方法submit（）提交表單，但是不會觸發(fā)onsubmit事件。如果按鈕不是submit類型的想要實現(xiàn)同樣的效果可先取得form的ID然后再調(diào)用它的submit（）方法。
2.點擊submit后form的onsubmit事件被觸發(fā)，在onsubmit中可以進行數(shù)據(jù)校驗，數(shù)據(jù)有問題則返回false即可阻止form提交。。記住，這是個很有用的方法，咱們要校驗數(shù)據(jù)來著。
3.具體的一個應用場景是，下拉選擇框，用戶選擇后即提交，無須點擊按鈕，只需onchange方法調(diào)用form的submit方法即可實現(xiàn)，并無神奇之處的。
4.面試時會被問具體瀏覽器之間的差異，及怎么解決，請觀看錄像60.。。JQuery能解決不同瀏覽器上DOM的不同。
5.JS正則表達式。JS中創(chuàng)建正則表達式類的方法：var regex=new RegExp("\\d{5}")或者var regex=/\d{5}/。。。/表達式/是JS中專門為簡化正則表達式編寫而提供的語法。寫在里面的表達式不用管轉義符。
RegExp對象的方法：test（str）判斷是否匹配表達式。相當于IsMatch。
javascript——》DOM就是C#——》.NET FRAMEWORK
DOM也像winform一樣，通過事件，屬性，方法編程。
CSS+javascript+DOM=DHTML
一，window對象，代表當前瀏覽器窗口，使用window對象的屬性，方法的時候可以省略window
1.confirm方法，顯示“確定”，“取消”對話框，按下“確定”返回true，否則返回false
2.navigate方法，重新導航到指定的地址。
3.setInterval，每個一段時間執(zhí)行指定的代碼，第一個參數(shù)為代碼的字符串，第二個參數(shù)為間隔時間（單位毫秒），返回值為定時器的標識。<input type="button" value="滾動" οnclick="setInterval('scroll()',500)"/>每調(diào)用一次setInterval都會產(chǎn)生一個新的定時器，并且舊的不會停止，所以看起來好像“越跑越快”
4.clearInterval取消setInterval的定時執(zhí)行，相當于timer中的enabled=false。因為可以設定多個定時器，所以取消時要指定清除那個定時器的標識，即setInterval的返回值。
5.setTimeout,超時。也是定時執(zhí)行，但只執(zhí)行一次。對應clearTimeout
二，body,document對象的事件
1.onload，網(wǎng)頁加載完畢時觸發(fā)，瀏覽器一邊下載文檔一邊解析執(zhí)行，可能會出現(xiàn)javascript執(zhí)行時需要操作某個元素這個元素還沒加載，若這樣就要把操作的代碼放到onload事件中，或者把javascript放在元素之后,比如在頁面打開時就更改一個還未沒創(chuàng)建的按鈕的屬性，可這么做<body οnlοad="btn.value='ok'；"/>
2.onunload，網(wǎng)頁關閉（或者離開）后觸發(fā)
3.onbeforeunload，在網(wǎng)頁準備關閉（或者離開）后觸發(fā)。在事件中為“window.event.returnValue賦值（即設置要顯示的警告消息），這樣窗口離開（比如前進，后退，關閉）就會彈出確認消息<body οnbefοreunlοad="window.event.returnValue='真的要放棄嗎？'；"/>
4.其他事件。onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
三，window對象屬性。
1.window.location.href。獲取或設置地址。
2.window.event。用來獲得發(fā)生事件時的信息，事件不局限于window對象的時間，類似于winform中的eventArgs e。
altKey屬性，bool類型，類似還有ctrlKey,shiftKey.
clientX,clientY,客戶區(qū)的坐標；screenX，screenY，屏幕上的坐標；offsetX，offsetY鼠標相對于事件源的坐標
returnValue屬性，設置為false會取消默認事件的處理。在超鏈接的onclick里面禁止訪問href的頁面；在表單校驗的時候禁止提交表單到服務器；可考慮用這個，如：<a href="http://www.baidu.com" οnclick="alert('禁止訪問');window.returnValue=false;">百度</a>
srcElement,獲得事件源對象。
keyCode發(fā)生事件時的按鍵值。
button，發(fā)生事件時鼠標按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。
3.screen對象，屏幕的信息；.height;.width
4.clipboardData對象，對粘貼板的操作。clearData("Text")清空粘貼板;getData("Text")讀取粘貼板的值，返回值為粘貼板中的內(nèi)容;setData("Text",val)設置粘貼板的值。參數(shù)永遠是Text。練習：可以復制地址給好友。
當復制的時候body的oncopy方法被觸發(fā)，直接return false就是禁止復制。<body οncοpy="alert('禁止復制！');return false;">
很多元素也有oncopy，onpaste事件。練習：禁止粘貼賬號。
在網(wǎng)站中復制文章的時候為了防止拷貝黨不添加文章來源，自動在復制的內(nèi)容后添加版權聲明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文來自。。。轉載請注明出處'+location.href);
}
οncοpy="setTimeout('modifyClipborad()',100)",不能在oncopy中執(zhí)行對粘貼板的操作，因此設定定時器，0.1秒后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。
5.window.history.back()后退；window.history.forward()前進。也可以用window.history.go(-1),window.history.go(1)前進
6.window對象的document屬性，最復雜屬性之一。
document.write方法，向頁面中寫入內(nèi)容。。在onclick等事件中寫的代碼會沖掉頁面的內(nèi)容，只有在頁面加載過程中write才會與原有內(nèi)容融合在一起。write經(jīng)常在廣告代碼，整合資源代碼中被使用。
document.getElementByIdx_x_x_x方法（非常常用），根據(jù)元素的id獲得對象，網(wǎng)頁中id不能重復，當然你也可以直接通過元素的id來引用元素，但是有有效范圍，因此不建議直接通過id操作元素而是通過getElementById.
document.getElementByName,根據(jù)元素的name獲得對象，由于頁面中元素的name可以重復，因此此方法返回值是對象數(shù)組。比如獲得radio的數(shù)組。
documen.getElementByTagName,獲得指定標簽名稱的元素數(shù)組。
練習：點擊一個按鈕，被點擊的按鈕顯示“嗚嗚”，其他顯示“哈哈”
十秒鐘后協(xié)議文本框下的注冊按鈕才能被點擊，時鐘倒數(shù)。(btn.disabled=true)
加法計算器,利用控件的ID來獲得值相加注意用parsteInt轉換；美女時鐘、img控件加載圖片，用時間來改變組裝圖片的名字。
四，DOM的動態(tài)創(chuàng)建。
1. 當我們想動態(tài)創(chuàng)建DOM對象時怎么辦呢？也許你想到了document.write，但是這個方法只能在頁面加載過程中動態(tài)創(chuàng)建
可以調(diào)用document_createElement_x_x_x方法來創(chuàng)建具有指定標簽的DOM對象，然后通過調(diào)用元素的a方法將新創(chuàng)建元素添加到相應元素下(如div)。
2.幾乎所有的DOM元素都有innerText，innerHTML屬性(注意大小寫)，分別是元素標簽內(nèi)內(nèi)容的文本表示形式（標簽內(nèi)部的文本，如<a>文本</a>）和HTML源代碼（標簽內(nèi)部的代碼，如<div id='...'>innerHTML</div>），這兩個屬性是可讀可寫的。所以可用其動態(tài)修改元素。。動態(tài)產(chǎn)生的元素，瀏覽器中查看源代碼是看不到的，可以通過DebugBar——>DOM——>文檔——>HTML
五，其他。
1.冒泡事件。
2.事件中的this，我們之前有在事件響應函數(shù)中用event.srcElement，現(xiàn)在我們還可以用this，this表示發(fā)生事件的控件。但是只有在事件響應函數(shù)中才能使用this獲得發(fā)生事件的控件，在事件響應函數(shù)調(diào)用的函數(shù)中是不能使用的，非要用的話要將this傳遞給函數(shù)或者使用event.srcElement
3.修改元素樣式不是設置class屬性，而是className屬性。
修改元素的樣式不能this.style="background-color:Red".單獨修改樣式的屬性使用style.屬性名。注意在CSS中屬性名在javascript中操作的時候?qū)傩悦赡懿灰粯?#xff0c;主要集中在哪些屬性名中含有-的屬性，因為javascript中-是不能做屬性，類名的。如CSS：background-color而javascript：style.background
4.控制層的顯示。修改style.display。=‘none’不顯示，=‘’顯示。
鼠標進入控件的事件是onmouseover,離開的事件是onmouseout，移動的事件是onmousemove。
5.IE中body的事件范圍。在body上添加onclick、onmouseover、等事件響應那么如果頁面沒有滿，則body中最后一個元素以下（但是橫向就不受限制）的部分是無法響應事件的。必須得使用代碼在document上監(jiān)聽那些事件，比如document.οnmοuseοver=方法。。。
6.通過DOM讀取元素的top、left、width、height等取到的值是像10PX這樣的字符串，為這些屬性設值得時候IE可以是80,90這樣的數(shù)字，但FF必須是加PX，%等這樣的字符串形式，為了兼容統(tǒng)一我們要用字符串形式。
若要用DOM修改（比如自動加寬）元素的大小要首先要取出元素的寬度然后用parseInt將寬度轉換為數(shù)字，然后再加上PX賦值回去。PS：不像C#中那樣，在JS中parseInt是盡可能解析出數(shù)字的，比如50fhdhjh它也能解析出50來。
7.層的定位操作。元素的position樣式值：static（無定位，顯示在默認位置）、absolute（絕對定位）、fixed（相對于窗口的固定定位，位置不會隨著瀏覽器的滾動而變化，IE6不支持）、relative（相對于元素默認位置的定位）。若要通過代碼修改元素的坐標則一般使用absolute，然后修改元素的top、left兩個樣式值。
-------------------------------------------------------------------------------
form對象！
1.方法submit（）提交表單，但是不會觸發(fā)onsubmit事件。如果按鈕不是submit類型的想要實現(xiàn)同樣的效果可先取得form的ID然后再調(diào)用它的submit（）方法。
2.點擊submit后form的onsubmit事件被觸發(fā)，在onsubmit中可以進行數(shù)據(jù)校驗，數(shù)據(jù)有問題則返回false即可阻止form提交。。記住，這是個很有用的方法，咱們要校驗數(shù)據(jù)來著。
3.具體的一個應用場景是，下拉選擇框，用戶選擇后即提交，無須點擊按鈕，只需onchange方法調(diào)用form的submit方法即可實現(xiàn)，并無神奇之處的。
4.面試時會被問具體瀏覽器之間的差異，及怎么解決，請觀看錄像60.。。JQuery能解決不同瀏覽器上DOM的不同。
5.JS正則表達式。JS中創(chuàng)建正則表達式類的方法：var regex=new RegExp("\\d{5}")或者var regex=/\d{5}/。。。/表達式/是JS中專門為簡化正則表達式編寫而提供的語法。寫在里面的表達式不用管轉義符。
RegExp對象的方法：test（str）判斷是否匹配表達式。相當于IsMatch。
轉載于:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213780.html
總結
- 上一篇： 浏览器内核信息整理
- 下一篇： PHP命名空间(Namespace)的使