【轉載】Dom篇

1、 初探Dom

    1. Dom介紹

2、 Dom基礎

    1. window頂級對象

    2. body、document對象事件

    3. 通用的HTML元素的事件

    4. 冒泡事件

    5. this與event.srcElement

3、 Dom操做

    1. 動態建立Dom

    2. innerText、innerHTML

    4. Form對象

    5. JS中的正則表達式

    6. 火狐瀏覽器（FF）不兼容性：

    7. 性能優化

4、 實力檢測

1、 初探Dom

JavaScript—>Dom,C#—> .Net Framework；JavaScript和C#都是一些基本語法，沒有Dom和.Net類庫，JavaScript和C#也就發揮不出來它的威力來。本文就帶你來回顧一下Dom操做。

1. Dom介紹

Dom（文檔標籤看成對象來處理）

(1)DOM就是html頁面模型，將每一個標籤都做爲一個對象，javascript經過調用DOM中的屬性、方法就能夠對網頁中的文本框、層等元素進行編程控制。

(2)DOM就是一些讓JavaScript能操做Html頁面控件的類、函數

(3)DHtml= CSS+JavaScript+Dom

動態設置事件

<script type="text/javascript">
        function F1() { alert('In F1'); }
   </script>
   <input type="button" value="關聯F1" onclick="document.onclick=F1;" />

<input type="button" value="關聯F1" onclick="F1()"

帶()表示調用函數，直接寫函數名錶示將其設置爲事件的處理函數。

2、 Dom基礎

1. window頂級對象

(1) window方法

①調用window的方法時，能夠省略window

②方法

alert:彈出警告對話框

confirm:肯定、取消對話框

setInterval(code,delay):啓動計時器,每隔一段時間執行指定的代碼

        code推薦使用匿名函數

clearInterval(intervalId):中止計時器

setTimeOut():定時執行，只執行一次

clearTimeOut():清除定時

(2) window的屬性

① window.location

屬性：

location.protocol：該屬性保存了URL的協議部分。

location.hostname：該屬性保存了URL的主機名部分。

location.port：該屬性保存了URL中的端口號部分。

location.pathname：該屬性保存了URL中的文件名部分。

location.search：保存了URL的查詢部分（若是有的話）。

location.hash：保存了URL中的anchor名稱（若是有的話）。

方法：

window.location.href：獲取當前地址

window.location.reload()：刷新當前頁

② window.event

     ->按下鍵,複合鍵

altKey、shiftKey、ctrlKey

if (window.event.altKey) {
                alert("按下了Alt鍵");
   }

 
        具體按下的什麼按鍵（與ASCII值不一樣）keyCode

     ->鼠標座標

clientX、clientY  獲取鼠標座標，相對於頁面來講的座標

offsetX、offsetY  相對於當前元素本身左上角的偏移座標

screenX、screenY  相對於整個屏幕的偏移座標

    ->中止事件繼續執行

window.event.return = false;(標準)不兼容火狐

也可使用return false;來設置當前事件處理程序返回值爲false

③ window.screen

window.screen.width   獲取用戶屏幕分辨率寬

window.screen.height  獲取用戶屏幕分辨率高

④ clipboardData

setData()  設置剪切板的值

getData()  讀取粘貼板的值

clearData()  清空粘貼板的值

function Setclipboard() {
            window.clipboardData.setData('Text', window.clipboardData.getData('Text') + '霹靂烈火版權全部');
        }

⑤ history（操做歷史記錄）

    window.history.back() 後退

    window.history.go(-1) 後退

    window.history.forward() 前進

    window.history.go(1)  前進

⑥ document

-->write與writeln

    document.write就是動態建立內容、元素的

    document.writeln 也是動態建立內容，源代碼中會換行

補充：以上兩個只有在與頁面加載的時候同時使用纔會保證頁面上的內容

應用：廣告連接，服務器端js代碼一改，其它引用它的地方全改

-->得到dom對象

getElementById() 根據元素Id得到對象

getElementsByName() 根據元素name得到對象

getElementsByTagName 根據指定標籤得到對象

function GetDomObject() {
            alert('getElementById:' + document.getElementById('txtElementById').value);
            var arrobjs = document.getElementsByName('abc');
            for (var i = 0; i < arrobjs.length; i++) {
                alert('getElementsByName元素值：' + arrobjs[i].value);
            }
            var tagNameObjs = document.getElementsByTagName('p');
            for (var j = 0; j < tagNameObjs.length; j++) {
                alert('getElementsByTagName元素值：' + tagNameObjs[j].innerHTML);
            }
        }

注： 不能用for in（鍵值對）循環

⑦ 其它屬性

close  返回true或者false，表示window對象對對應的窗口是否關閉。

opener  表示打開當前窗口的那個window對象。

Defaultstatus  設置和返回窗口狀態欄中默認顯示的文本內容。

Status  設置和返回窗口狀態欄中當前正顯示的內容。

screenTop  返回窗口左上角頂點在屏幕上的垂直距離。

srceenLeft  返回窗口左上角頂點在屏幕上的水平距離。

回到導航

2. body、document對象事件

onload 頁面加載後觸發：頁面加載後就能夠document.getElementById(「控件Id」)來獲取dom元素ID了

onunload 頁面卸載後觸發

onbeforeunload 頁面卸載前觸發

注：要爲整個頁面註冊事件就用document,不要用body

回到導航

3. 通用的HTML元素的事件

onclick（單擊）、ondblclick（雙擊）、onkeydown（按鍵按下）、onkeypress（點擊按鍵）、onkeyup（按鍵釋放）、onmousedown（鼠標按下）、onmousemove（鼠標移動）、onmouseout（鼠標離開元素範圍）、onmouseover（鼠標移動到元素範圍）、onmouseup（鼠標按鍵釋放）、oncontextmenu（在瀏覽器中單擊鼠標右鍵顯示」右鍵菜單」時觸發）

回到導航

4. 冒泡事件

事件冒泡：若是元素A嵌套在元素B中，那麼A被點擊不只A的onclick事件會被觸發，B的onclick也會被觸發。觸發的順序是「由內而外」 。

<table onclick="alert('table onclick');">
        <tr onclick="alert('tr onclick');">
            <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
            <td>bbb</td>
        </tr>
   </table>

取消事件冒泡： window.event.cancelBubble = true; //IE下

回到導航

5. this與event.srcElement

this：表示發生事件的控件。只有在事件響應函數才能使用this得到發生事件的控件，在事件響應函數調用的函數中不能使用

window.event.srcElement：指最初引起事件的事件源對象 

fuction method(){
      alert(this.value);
   }
   <input type="text" onblur="method()"/>

這樣是不正確的，能夠採用

fuction method(btn){
      alert(btn.value);
   }
   <input type="text" onblur="method(this)"/>

補充：this表示當前觸發事件的對象，表示當前誰在執行事件，發生事件的控件；

event.srcElement是引起事件的對象：事件冒泡。

若是要直接使用this.屬性，此時的函數不能是被調用的而必須是響應函數，而window.event.srcElement則無此限制。

3、 Dom操做

1. 動態建立Dom

createElement(‘element’)  建立指定標籤dom對象

appendChild(node)  將建立元素添加到相應的元素下

removeChild(node)  刪除元素

replaceChild(new,old)  替換元素

insertBefore(new,參照)  插入元素

回到導航

2. innerText、innerHTML

(1) 幾乎全部DOM元素都有innerText、innerHTML屬性（注意大小寫），分別是元素標籤內內容的文本表示形式和HTML源代碼，這兩個屬性是可讀可寫的。

(2) FF不支持innerText，使用textContent

(3) innerHTML能夠代替createElement，屬於簡單、粗放型、後果自負的建立

① 大量進行節點操做時，使用innerHTML的性能要好於頻繁的Dom操做

② 使用innerTHML=‘’來刪除節點可能會形成內存問題

innerText  ：只能設置純文本，即使寫了html代碼，也會對html代碼進行編碼，

innerHTML：能夠設置html代碼和純文本。

3.  操做樣式

(1)經過操做style屬性來修改元素的樣式

css中屬性名在JavaScript中操做的時候屬性名可能不同，好比：font-size→style.fontSize；margin-top→style.marginTop //駝峯命名法

改邊框：dvoObj.style.width

改背景：dvoObj.style.backgroundColor

改寬高：dvoObj.style.width|height--須要加px

注：不要寫成div1.style.width=80px，而是div1.style.width=‘80px’

(2)設置元素樣式

修改元素的樣式不是設置class屬性，而是className屬性

<style type="text/css">
        .emptyfield
        {
            background-color:Red;
        }
        .normal
        {
            background-color:inherit;
        }
    </style>
    <script type="text/javascript">
        function check(txt) {
            var s = txt.value;
            if (s.length <= 0) {
                txt.className = "emptyfield";
                alert('這個字段必填！');                
            }
            else {
                txt.className = "normal";
            }
        }
    </script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />

visibility設置隱藏後，隱藏部分仍然佔位

回到導航

4. Form對象

click(),focus(),blur();//至關於經過程序來觸發元素的單擊、得到焦點以及失去焦點的事件。

回到導航

5. JS中的正則表達式

(1) 建立正則表達式類的方法

var regex = new RegExp(「\\d{5}」);

var regex = /\d{5}/; -->推薦寫法

/表達式/是JavaScript中專門爲簡化正則表達式編寫而提供的語法，寫在//中的正則表達式就不用管轉義符了。

(2) RegExp對象的方法

① 匹配

test(str)判斷字符串str是否匹配正則表達式，至關於C#中的IsMatch

② 提取

exec(str)進行搜索匹配，返回值爲匹配結果(*)，是一個對象，該對象包含所提取到的第一個字符串的「完成匹配結果」，以及全部的「提取組」;至關於c#中match()和matches()

③ 替換

replace()

回到導航

6. 火狐瀏覽器（FF）不兼容性：

能力檢測：

if (typeof td1.innerText == 'string') {
     td1.innerText = txt;
   }
   else {
     td1.textContent = txt;
   }

(1)取消事件：window.event.returnValue不兼容FF

解決：用火狐特有 e. preventDefault()或者return false

(2)window.event.altKey：if(event.altKey)不兼容FF

解決：

function BodyClickHandlerOnFF(e) {
            if (e.altKey) {
                alert('按下alt鍵');
            } else {
                alert('普通點擊！');
            }
        }
<body onclick="BodyClickHandlerOnFF(event);">

(3) 獲取位置：window.event.ClientX、ScreenX、OffsetX不兼容FF

解決：arguments[0].clientX…

(4) 得到事件源對象：window.event.srcElement 不兼容FF

function MyClickHandlerOnFF(e) {
            var obj = e.target;
            alert(obj.value);
        }
    <input type="button" value="FF下事件源對象" onclick="MyClickHandlerOnFF(event);"/>

(5) innerText：不兼容FF

解決：textContent

(6) 擴展《FF與IE對JavaScript和CSS的區別》

回到導航

7. 性能優化

(1) 聲明變量賦初值

(2) 儘可能避免直接聲明全局變量，好比要聲明全局變量name,可是它有可能與window.name衝突，因此全局變量通常都會聲明在一個全局對象中：var itcast={name:’zxh’,num:10};使用這些全局變量的時候經過itcast.name或者itcast.num，就能夠減小與系統的重名了。

(3) 當編寫大量Js代碼的時候不免會遇到命名衝突的問題，這時能夠經過模擬命名空間的方式來避免命名衝突。例如：

var itcast={};
   var itcast.net={};
   var itcast.net.net0405={name:’zxh’,sayHi=function(){}};

(4) 儘可能避免使用全局變量。（搜索全局變量時，會一層一層的搜索每一個做用域範圍，耗時，低效，命名衝突）

(5) 使用減值循環或者優化循環條件，不要在循環條件中寫i<xxx.length而要用一個變量來代替，i<len。由於循環條件每次都會執行，這樣的話每次都會計算xxx.length。

(6) 避免使用eval(「alert(10);」);或setInterval(「myFunc();」,1000);這種雙重解析的代碼。低效！

(7) 使用原生的方法，好比內置的join()、reverse()，使用這些原本瀏覽器就有的方法不要本身寫myJoin()之類的，性能低。原生方法都是用c或者c++寫的，性能高。

(8) 儘量使用switch來代替多個if-else

(9) 儘可能減小語句數量

var arr=[1,2,’a’,true];
   var p1={name:’zxh’,age:18};//建立對象

(10) 當大量操做dom元素時使用文檔碎片，避免屢次更新頁面。

var fragment=document.createDocumentFragment();

4、 實力檢測

如下是一些練習題（試題來源--傳智播客），看你能作出來幾個呢

(1) 標題欄走馬燈效果-->瀏覽器標題文字向左右滾動

(2) 點擊一個按鈕，被點擊的按鈕顯示「嗚嗚」，其餘按鈕顯示「哈哈」

(3) 十秒鐘後協議文本框下的註冊按鈕才能點擊，時鐘倒數。

(4) 加法計算器。兩個文本框中輸入數字，點擊【=】按鈕將相加的結果放到第三個文本框中

(5) 點擊按鈕動態增長網站列表，分兩列，第一列爲網站的名字，第二列爲帶網站超連接的網站名。增長三行常見網站。

(6) 實現無刷新評論

(7) 建立三個輸入文本框，當光標離開文本框的時候若是文本框爲空，則將文本框背景色設置爲紅色，若是不爲空則爲白色

(8) 評分控件V1，用一個單行5列的Table作評分控件，監聽td的click事件，點擊一個td的時候，將這個td及以前的td背景變爲紅色，以後的td背景變爲白色

(9) 超連接的單選效果-->頁面上若干個超連接，點擊一個超連接s的時候被點擊的超連接變爲紅色背景，其餘超連接背景沒有變

(10) 點擊按鈕，表格隔行變色：偶數行爲黃色背景，奇數行爲默認顏色

(11) 放若干文本框，得到焦點的文本框黃色背景，其餘控件背景顏色是白色

(12) 點擊表格行，被點擊的行高亮顯示（背景是黃色），其餘行白色背景

(13) 跟着鼠標飛的圖片效果

(14) 點擊【登陸】按鈕，彈出一個顯示用戶名、密碼等的層

(15) 一幅圖片。點擊小圖，彈出一個層在點擊的位置顯示小圖對應的大圖，而且顯示姓名、身高等信息，點擊層中的關閉按鈕關閉層

(16) 界面上有幾個球隊名字的列表，將鼠標放到球隊名字上就變爲紅色背景，其餘球隊背景顏色爲白色，點擊一個球隊的時候就將點擊的球隊變爲fontSize=30字體

(17) 顯示數字時鐘，時間顯示到一個div

(18) 有一個搜索文本框，焦點不在文本框中的時候，若是文本框沒有值，則文本框中顯示灰色文本（Gray）的「輸入搜索關鍵詞」，不然顯示用戶輸入的值；焦點在文本框中時若是以前顯示「輸入搜索關鍵詞」則清空文本框的值，而且將文本修改成黑色

(19) 密碼的安全級別,密碼強度顯示

(20) 歌曲列表 （CheckBox+Label）全選、全不選、反選

(21) 實現省市選擇界面。請選擇省的處理，從後向前刪

(22) 權限選擇頁面，選擇、撤回、所有選擇、所有撤回

(23) 百度搜索時的自動完成功能

試題答案擇日公佈

注： 各位園友，若是本文對你還算有些幫助的話，就幫忙右下角推薦一下！

爲易維護、易擴展、易複用、靈活多樣而努力~~

 

原地址： http://www.cnblogs.com/SpringDays/p/3544894.html