第7章專用于手機的JavaScript_ESMP

1、第第7章章 專用于手機的專用于手機的JavaScript_ESMP7.1 使用使用ESMPnECMAScript Mobile Profile簡稱簡稱ESMP，是，是OMA專為手機定義的一個腳本標準。專為手機定義的一個腳本標準。n它是基于它是基于ECMA-262第三版指定的，并且還增加第三版指定的，并且還增加了了BOM、CoreDOM和和HTMLDOM的定義。的定義。ECMA-262n三足鼎立：三足鼎立：Netscape 發(fā)明了發(fā)明了 JavaScript；微軟；微軟發(fā)布發(fā)布IE 3.0時搭載了一個時搭載了一個 JavaScript 的克隆版，的克隆版，叫做叫做 Jscript；CEnvi 中

2、的中的 ScriptEase。n歐洲計算機制造商協(xié)會歐洲計算機制造商協(xié)會ECMA完成統(tǒng)一，形成完成統(tǒng)一，形成ECMA-262，該標準定義了名為，該標準定義了名為 ECMAScript 的的全新腳本語言。全新腳本語言。 n1999 年年 12 月發(fā)布的月發(fā)布的ECMA-262 第三版，目第三版，目前所有主流的前所有主流的 Web 瀏覽器都遵守瀏覽器都遵守 。 ECMAScriptn盡管盡管 ECMAScript 是一個重要的標準，但它并不是一個重要的標準，但它并不是是 JavaScript 唯一的部分，也不是唯一被標準唯一的部分，也不是唯一被標準化的部分。實際上，一個完整的化的部分。實際上，一個

3、完整的 JavaScript 實實現(xiàn)是由以下現(xiàn)是由以下 3 個不同部分組成的：個不同部分組成的： n核心（核心（ECMAScript）n文檔對象模型（文檔對象模型（DOM）n瀏覽器對象模型（瀏覽器對象模型（BOM）ECMAScriptnJavaScript 的核心的核心 ECMAScript 描述了該語言描述了該語言的語法和基本對象；的語法和基本對象；nDOM 描述了處理網(wǎng)頁內(nèi)容的方法和接口；描述了處理網(wǎng)頁內(nèi)容的方法和接口；nBOM 描述了與瀏覽器進行交互的方法和接口。描述了與瀏覽器進行交互的方法和接口。7.1.1 ESMP與與ECMAScript的不同的不同nESMP于于ECMA-262第三

4、版的不同之處主要表現(xiàn)第三版的不同之處主要表現(xiàn)在以下幾個方面：在以下幾個方面：qESMP為所有內(nèi)建對象（不包括為所有內(nèi)建對象（不包括BOM）定義了一個）定義了一個version屬性，格式為屬性，格式為M.m.I.i。q支持支持UTR-8和和UTF-16編碼編碼qESMP支持非轉(zhuǎn)義字符前加一個反斜杠支持非轉(zhuǎn)義字符前加一個反斜杠q禁止使用禁止使用ES-CP中限制的語法中限制的語法qESMP定義了宿主定義了宿主BOM對象、對象、HTMLDOM和和CoreDOM7.1.1 ESMP與與ECMAScript的不同的不同qESMP規(guī)定必須用分號結(jié)束語句規(guī)定必須用分號結(jié)束語句qESMP規(guī)定，規(guī)定，String

5、的的toLowerCase()和和toUpperCase()方法分別等同于方法分別等同于toLocaleLowerCase()和和toLocaleUpperCase()方法。方法。qESMP對對Array類的類的sort()方法指定的參數(shù)不是一個函數(shù)方法指定的參數(shù)不是一個函數(shù)時拋出時拋出TypeError異常。異常。qESMP增加了一個增加了一個MemeryError異常類型，為異常類型，為Error類類增加了增加了code屬性。屬性。qRegExp對象的對象的multiline屬性以及模式修正符屬性以及模式修正符m不支持。不支持。7.1.1 ESMP與與ECMAScript的不同的不同nAr

6、ray類的類的sort()方法格式：方法格式：arrayObject.sort(sortby) n無參調(diào)用時，按照字符編碼的順序進行排序。如果想按照無參調(diào)用時，按照字符編碼的順序進行排序。如果想按照其他標準進行排序，就需要提供比較函數(shù)。其他標準進行排序，就需要提供比較函數(shù)。7.1.1 ESMP與與ECMAScript的不同的不同n函數(shù)要比較兩個值，然后返回一個用于說明這兩個值的相函數(shù)要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個參數(shù)對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個參數(shù) a 和和 b，其返，其返回值如下：回值如下：n若若 a 小于小于 b，在排序后的數(shù)組中，在

7、排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在應(yīng)該出現(xiàn)在 b 之前，之前，則返回一個小于則返回一個小于 0 的值。的值。 n若若 a 等于等于 b，則返回，則返回 0。 n若若 a 大于大于 b，則返回一個大于，則返回一個大于 0 的值。的值。7.1.2 ESMP BOMnBOM是是Browser Object Model的縮寫，簡稱瀏的縮寫，簡稱瀏覽器對象模型。覽器對象模型。 nBOM提供了獨立于內(nèi)容而與瀏覽器窗口進行交互提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的的API，這些，這些API由若干對象組成，稱為宿主對象。由若干對象組成，稱為宿主對象。每個對象都提供了很多方法與屬性。每個對象都提供了很多方法與屬性

8、。 n由于由于BOM主要用于管理窗口與窗口之間的通訊，主要用于管理窗口與窗口之間的通訊，因此其核心對象是因此其核心對象是window。7.1.2 ESMP BOM基本的基本的BOM體系結(jié)構(gòu)圖體系結(jié)構(gòu)圖7.1.2 ESMP BOMn1. window對象對象qwindow對象是瀏覽器頂層的一個對象，是瀏覽器對象是瀏覽器頂層的一個對象，是瀏覽器窗口這個類的一個實例。它可以產(chǎn)生其他的對象，窗口這個類的一個實例。它可以產(chǎn)生其他的對象，稱為稱為window的子對象，如的子對象，如history、location、document等。調(diào)用其方法和屬性無需指定對象名。等。調(diào)用其方法和屬性無需指定對象名。do

9、cument.write(BOM);window.document.write(BOM);7.1.2 ESMP BOMn1. window對象對象q屬性：屬性：history、navigator、location、document。q方法：方法：prompt()、confirm()、alert()、setTimeout()、clearTimeout()JavaScript 消息框消息框n警告框：警告框：alert(文本文本) q用戶需要點擊確定按鈕才能繼續(xù)進行操作。用戶需要點擊確定按鈕才能繼續(xù)進行操作。 n確認框：確認框：confirm(文本文本)q如果用戶點擊確認，那么返回值為如果用戶點擊確

10、認，那么返回值為 true。如果用戶點。如果用戶點擊取消，那么返回值為擊取消，那么返回值為 false。 n提示框：提示框：prompt(文本文本,默認值默認值)q如果用戶點擊確認，那么返回值為輸入的值。如果用戶如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為點擊取消，那么返回值為 null。 setTimeout()和和clearTimeout()nsetTimeout()：暫停指定的毫秒數(shù)后執(zhí)行指定的暫停指定的毫秒數(shù)后執(zhí)行指定的代碼。代碼。 nclearTimeout()：在暫停時間段內(nèi)可用來取消在暫停時間段內(nèi)可用來取消setTimeout函數(shù)指定的將要執(zhí)行的代碼。函

11、數(shù)指定的將要執(zhí)行的代碼。setTimeout()和和clearTimeout()n語法格式：語法格式：n如要考慮用如要考慮用clearTimeout () 取消，則調(diào)用取消，則調(diào)用setTimeout()時要將其賦給一個變量。時要將其賦給一個變量。var iTimerID=window.setTimeout(func,delay,arguments);window.clearTimeout(iTimerID);7.1.2 ESMP BOMn2. navigator對象對象qwindow.navigator 對象包含有關(guān)訪問者瀏覽器的對象包含有關(guān)訪問者瀏覽器的信息。信息。qNavigator對象

12、包含了正在使用的瀏覽器的版本信對象包含了正在使用的瀏覽器的版本信息，可以通過它獲取瀏覽器已經(jīng)安裝的插件、支持息，可以通過它獲取瀏覽器已經(jīng)安裝的插件、支持MIME類型等信息。類型等信息。q使用使用window.navigator屬性可以返回一個屬性可以返回一個navigator對象，該對象包含一些方法、屬性、集對象，該對象包含一些方法、屬性、集合等成員。合等成員。7.1.2 ESMP BOMn2. navigator對象對象q屬性：屬性：appName 返回瀏覽器的名稱返回瀏覽器的名稱appVersion 返回瀏覽器的平臺和版本信息返回瀏覽器的平臺和版本信息 userAgent 返回由客戶機發(fā)送

13、服務(wù)器的返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值。頭部的值。7.1.2 ESMP BOMn使用使用for in循環(huán)查看這些成員的值：循環(huán)查看這些成員的值：for(i in window.navigator) document.write(i + “=” + window.navigatori +”);7.1.2 ESMP BOMn2. navigator對象對象q用用navigator.userAgent來識別瀏覽器來識別瀏覽器q警告：警告：來自來自 navigator 對象的信息具有誤導(dǎo)性，不對象的信息具有誤導(dǎo)性，不應(yīng)該被用于檢測瀏覽器版本，這是因為：應(yīng)該被用于檢測瀏覽器版本

14、，這是因為：navigator 數(shù)據(jù)可被瀏覽器使用者更改數(shù)據(jù)可被瀏覽器使用者更改 瀏覽器無法報告晚于瀏覽器發(fā)布的新操作系統(tǒng)瀏覽器無法報告晚于瀏覽器發(fā)布的新操作系統(tǒng)7.1.2 ESMP BOMn3. history對象對象qhistory對象指瀏覽器的瀏覽歷史。對象指瀏覽器的瀏覽歷史。q屬性：屬性：length 返回瀏覽器歷史列表中的返回瀏覽器歷史列表中的 URL 數(shù)量數(shù)量q方法：方法：nback() 加載加載 history 列表中的前一個列表中的前一個 URL nforward() 加載加載 history 列表中的下一個列表中的下一個 URL ngo(num) 加載加載 history 列

15、表中的某個具體頁面，參列表中的某個具體頁面，參數(shù)數(shù)num是字符串則表示歷史中的是字符串則表示歷史中的URL，數(shù)字則表示，數(shù)字則表示前進或后退的步數(shù)。前進或后退的步數(shù)。7.1.2 ESMP BOMn4. location對象對象qwindow.location 對象用于獲得某個窗口對象所打?qū)ο笥糜讷@得某個窗口對象所打開的地址開的地址 (URL)，并把瀏覽器重定向到新的頁面。，并把瀏覽器重定向到新的頁面。q表示當前窗口直接用表示當前窗口直接用location，其他窗口用，其他窗口用“窗口窗口對象名對象名.location”。q出于安全性需要，屬于不同協(xié)議或不同主機的兩個出于安全性需要，屬于不同協(xié)議

16、或不同主機的兩個地址間不能互相引用對方的地址間不能互相引用對方的location對象。對象。var newWindow = window.open(“timeout.html”);document.write(newWindow.location);document.write(location);7.1.2 ESMP BOMn4. location對象對象q屬性：屬性：nhash 設(shè)置或返回從井號設(shè)置或返回從井號 (#) 開始的開始的 URL（錨）（錨） nhost 設(shè)置或返回主機名和當前設(shè)置或返回主機名和當前 URL 的端口號的端口號 nhref 設(shè)置或返回完整的設(shè)置或返回完整的 URL

17、nhostname 設(shè)置或返回當前設(shè)置或返回當前 URL 的主機名的主機名 npathname 設(shè)置或返回當前設(shè)置或返回當前 URL 的路徑部分的路徑部分 nport 設(shè)置或返回當前設(shè)置或返回當前 URL 的端口號的端口號 nprotocol 設(shè)置或返回當前設(shè)置或返回當前 URL 的協(xié)議的協(xié)議 nsearch 設(shè)置或返回從問號設(shè)置或返回從問號 (?) 開始的開始的 URL（查詢部分）（查詢部分） 7.1.2 ESMP BOMn4. location對象對象q方法：方法：qassign() 加載新的文檔加載新的文檔,這與直接將一個這與直接將一個URL賦值賦值給給Location對象的對象的hre

18、f屬性效果是一樣的。屬性效果是一樣的。qreplace() 用新的文檔替換當前文檔，用新的文檔替換當前文檔，replace() 方方法不會在法不會在 History 對象中生成一個新的紀錄。當使對象中生成一個新的紀錄。當使用該方法時，新的用該方法時，新的 URL 將覆蓋將覆蓋 History 對象中的對象中的當前紀錄。當前紀錄。7.1.2 ESMP BOMn4. location對象對象q方法：方法：qreload() 重新加載當前文檔，若無參數(shù)，或參數(shù)是重新加載當前文檔，若無參數(shù)，或參數(shù)是 false，就會用就會用 HTTP 頭頭 If-Modified-Since 來檢測服務(wù)器上的文檔來檢

19、測服務(wù)器上的文檔是否已改變。若文檔已改變，是否已改變。若文檔已改變，reload() 會再次下載該文檔。會再次下載該文檔。否則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷否則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。如果把該方法的參數(shù)設(shè)置為新按鈕的效果是完全一樣的。如果把該方法的參數(shù)設(shè)置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住刷新按鈕時按住 Shift 健的效果是完全一樣。健

20、的效果是完全一樣。7.1.2 ESMP BOMn5. document對象對象q每個載入瀏覽器的每個載入瀏覽器的 HTML 文檔都會成為文檔都會成為 Document 對象。它使我們可以從腳本中對對象。它使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。頁面中的所有元素進行訪問。 7.1.2 ESMP BOMn5. document對象對象q屬性：屬性：ncookie 設(shè)置或返回與當前文檔有關(guān)的所有設(shè)置或返回與當前文檔有關(guān)的所有cookiendomain 返回當前文檔的域名返回當前文檔的域名nreferrer 返回載入當前文檔的文檔的返回載入當前文檔的文檔的 URLntitle 返回當

21、前文檔的標題返回當前文檔的標題相同相同Origin策略的限制策略的限制同源策同源策略略n對于對于JavaScript程序，存在相同程序，存在相同Origin策略的策略的限制，即同源策略。限制，即同源策略。n同源策略阻止從一個同源策略阻止從一個Origin加載的文檔或者腳本加載的文檔或者腳本訪問從另一個訪問從另一個Origin加載的文檔的屬性（即加載的文檔的屬性（即DOM）。）。n如果協(xié)議、端口、主機相同，那么就認為兩個文如果協(xié)議、端口、主機相同，那么就認為兩個文檔具有相同的檔具有相同的Origin。相同相同Origin策略的限制策略的限制同源策同源策略略n針對地址針對地址http:/ ESMP

22、 BOMq方法：方法：nclear()用來清除一個文檔中的內(nèi)容用來清除一個文檔中的內(nèi)容nopen() 打開一個流，以收集來自任何打開一個流，以收集來自任何 document.write() 或或 document.writeln() 的輸出的輸出nclose() 關(guān)閉用關(guān)閉用 document.open() 方法打開的輸出方法打開的輸出流，并顯示選定的數(shù)據(jù)流，并顯示選定的數(shù)據(jù) nwrite() 向文檔寫向文檔寫 HTML 表達式表達式 或或 JavaScript 代碼代碼nwriteln() 等同等同 write() 并在每個表達式之后寫一個換并在每個表達式之后寫一個換行符行符7.1.3 ES

23、MP CoreDOMnDocument Object Model，文檔對象模型。是，文檔對象模型。是W3C指定的一簇規(guī)范，它是獨立于平臺和語言的指定的一簇規(guī)范，它是獨立于平臺和語言的一系列接口定義。一系列接口定義。 nDOM是文檔在內(nèi)存中的表現(xiàn)形式，它是一個應(yīng)用是文檔在內(nèi)存中的表現(xiàn)形式，它是一個應(yīng)用程序接口，定義了該文檔的邏輯結(jié)構(gòu)以及一套訪程序接口，定義了該文檔的邏輯結(jié)構(gòu)以及一套訪問和處理文檔的方法。問和處理文檔的方法。n對應(yīng)的應(yīng)用程序可以跨語言跨平臺。對應(yīng)的應(yīng)用程序可以跨語言跨平臺。7.1.3 ESMP CoreDOMn例如：客戶端瀏覽器是一個處理例如：客戶端瀏覽器是一個處理HTML和和XM

24、L文文檔的應(yīng)用程序，它必須將文檔解析成檔的應(yīng)用程序，它必須將文檔解析成DOM才能夠才能夠以編程方式讀取、操作和呈現(xiàn)以編程方式讀取、操作和呈現(xiàn)HTML、XML文檔。文檔。n例如所有瀏覽器都支持使用例如所有瀏覽器都支持使用DOM接口定義的方法接口定義的方法來處理來處理HTML文檔中的內(nèi)容、結(jié)構(gòu)和樣式，這樣文檔中的內(nèi)容、結(jié)構(gòu)和樣式，這樣可以減少對瀏覽器兼容性的考慮?？梢詼p少對瀏覽器兼容性的考慮。DOM的起源的起源nDOM歷史可以追溯至歷史可以追溯至1990年代后期微軟與年代后期微軟與Netscape的的“瀏覽器大戰(zhàn)瀏覽器大戰(zhàn)”，雙方為了在，雙方為了在JavaScript與與JScript一決生死，于

25、是大規(guī)模的賦一決生死，于是大規(guī)模的賦予瀏覽器強大的功能。予瀏覽器強大的功能。n微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，包括微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，包括VBScript、ActiveX、以及微軟自家的、以及微軟自家的DHTML格格式等，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法式等，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示。正常顯示。DOM應(yīng)運而生。應(yīng)運而生。DOM的發(fā)展的發(fā)展n最初是一種讓最初是一種讓JavaScript在瀏覽器間可移植的方在瀏覽器間可移植的方法，不過其應(yīng)用已經(jīng)遠遠超出這個范圍。法，不過其應(yīng)用已經(jīng)遠遠超出這個范圍。nDOM技術(shù)使得用戶頁面可以動態(tài)地變化，如可以技術(shù)使得用戶

26、頁面可以動態(tài)地變化，如可以動態(tài)地顯示或隱藏一個元素，改變它們的屬性，動態(tài)地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，增加一個元素等， DOM技術(shù)使得頁面的交互性技術(shù)使得頁面的交互性大大地增強。大大地增強。 DOM的分級的分級n根據(jù)根據(jù)W3C DOM規(guī)范，規(guī)范，DOM是是HTML與與XML的應(yīng)的應(yīng)用編程接口（用編程接口（API），），DOM將整個頁面映射為一將整個頁面映射為一個由層次節(jié)點組成的文件。有個由層次節(jié)點組成的文件。有1級、級、2級、級、3級共級共3個級別。個級別。DOM的分級的分級n根據(jù)根據(jù)W3C DOM規(guī)范，規(guī)范，DOM是是HTML與與XML的應(yīng)的應(yīng)用編程接口（用編程接口（

27、API），），DOM將整個頁面映射為一將整個頁面映射為一個由層次節(jié)點組成的文件。有個由層次節(jié)點組成的文件。有1級、級、2級、級、3級共級共3個級別。個級別。q1級級DOM：由由DOM核心與核心與DOM HTML兩個模塊組兩個模塊組成。成。DOM核心能映射以核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。允許獲取和操作文檔的任意部分。DOM HTML通通過添加過添加HTML專用的對象與函數(shù)對專用的對象與函數(shù)對DOM核心進行了核心進行了擴展。擴展。DOM的分級的分級q2級DOM：2級級DOM通過對象接口增加了對鼠標和通過對象接口增加了對鼠標和用戶界面事件、范圍、

28、遍歷和層疊樣式表（用戶界面事件、范圍、遍歷和層疊樣式表（CSS）的支持。同時也對的支持。同時也對DOM 1的核心進行了擴展，從而的核心進行了擴展，從而可支持可支持XML命名空間。命名空間。q3級DOM：引入統(tǒng)一方式載入和保存文檔和文檔驗引入統(tǒng)一方式載入和保存文檔和文檔驗證方法對證方法對DOM進一步擴展，進一步擴展，DOM3包含一個名為包含一個名為“DOM載入與保存載入與保存”的新模塊，的新模塊，DOM核心擴展后核心擴展后可支持可支持XML1.0的所有內(nèi)容，包擴的所有內(nèi)容，包擴XML Infoset、 XPath、和、和XML Base。 DOM的分級的分級n目前大部分瀏覽器軟件都可以部分獲取全

29、部實目前大部分瀏覽器軟件都可以部分獲取全部實現(xiàn)現(xiàn)DOM level2規(guī)范簇，規(guī)范簇，HTML5 DOM API也也是大量基于是大量基于DOM level2規(guī)范簇的。規(guī)范簇的。HTML網(wǎng)頁網(wǎng)頁加載加載DOM瀏覽器瀏覽器解析解析7.1.3 ESMP CoreDOMnW3C規(guī)定的三類規(guī)定的三類DOM標準接口：標準接口：qCore DOM（核心（核心DOM），適用于各種結(jié)構(gòu)化文檔），適用于各種結(jié)構(gòu)化文檔 ；qXML DOM，專用于，專用于XML文檔文檔 ；qHTML DOM，專用于，專用于HTML文檔。文檔。nESMP CoreDOM僅定義了僅定義了3種節(jié)點類型，即種節(jié)點類型，即Document、El

30、ement、Text節(jié)點節(jié)點(nodeType返返回回9,1,3)，并為每個節(jié)點規(guī)定了少量的方法和屬性。，并為每個節(jié)點規(guī)定了少量的方法和屬性。7.1.3 ESMP CoreDOMn1. DOMExceptionq屬性：屬性：message，獲取導(dǎo)致異常的消息字符串；，獲取導(dǎo)致異常的消息字符串；code，獲取拋出的異常的類型，該屬性的返回值，獲取拋出的異常的類型，該屬性的返回值為一個整數(shù)。為一個整數(shù)。q常量：常量：見表見表7-37.1.3 ESMP CoreDOMn2. NodeqNode 對象是整個對象是整個 DOM 的主要數(shù)據(jù)類型。的主要數(shù)據(jù)類型。q節(jié)點對象代表文檔樹中的一個單獨的節(jié)點。節(jié)點

31、可節(jié)點對象代表文檔樹中的一個單獨的節(jié)點。節(jié)點可以是元素節(jié)點、屬性節(jié)點、文本節(jié)點等，可以通過以是元素節(jié)點、屬性節(jié)點、文本節(jié)點等，可以通過節(jié)點查看器查看。節(jié)點查看器查看。7.1.3 ESMP CoreDOMn2. Noden根據(jù)根據(jù) DOM，HTML 文檔中的每個成分都是一個節(jié)點。文檔中的每個成分都是一個節(jié)點。nDOM 是這樣規(guī)定的：是這樣規(guī)定的：q整個文檔是一個文檔節(jié)點整個文檔是一個文檔節(jié)點 q每個每個 HTML 標簽是一個元素節(jié)點標簽是一個元素節(jié)點 q包含在包含在 HTML 元素中的文本是文本節(jié)點元素中的文本是文本節(jié)點 q每一個每一個 HTML 屬性是一個屬性節(jié)點屬性是一個屬性節(jié)點 q注釋屬于

32、注釋節(jié)點注釋屬于注釋節(jié)點 7.1.3 ESMP CoreDOMn節(jié)點彼此都有等級關(guān)系。節(jié)點彼此都有等級關(guān)系。nHTML 文檔中的所有節(jié)點組成了一個文檔樹（或文檔中的所有節(jié)點組成了一個文檔樹（或節(jié)點樹）。節(jié)點樹）。HTML 文檔中的每個元素、屬性、文文檔中的每個元素、屬性、文本等都代表著樹中的一個節(jié)點。樹起始于文檔節(jié)本等都代表著樹中的一個節(jié)點。樹起始于文檔節(jié)點，并由此繼續(xù)伸出枝條，直到處于這棵樹最低點，并由此繼續(xù)伸出枝條，直到處于這棵樹最低級別的所有文本節(jié)點為止。級別的所有文本節(jié)點為止。7.1.3 ESMP CoreDOMn屬性：屬性：qnodeName：節(jié)點的名稱，只讀，元素節(jié)點名與標簽節(jié)點的

33、名稱，只讀，元素節(jié)點名與標簽名相同；屬性節(jié)點名是屬性的名稱；文本節(jié)點名永遠是名相同；屬性節(jié)點名是屬性的名稱；文本節(jié)點名永遠是 #text；文檔節(jié)點名永遠是；文檔節(jié)點名永遠是 #document。qnodeValue：節(jié)點的值節(jié)點的值 。元素節(jié)點值是。元素節(jié)點值是undefined；文本節(jié)點的值是文本自身；屬性節(jié)點的值是屬性的值。文本節(jié)點的值是文本自身；屬性節(jié)點的值是屬性的值。 qnodeType ：節(jié)點的類型，只讀。節(jié)點的類型，只讀。7.1.3 ESMP CoreDOMq屬性：屬性：parentNode、childNode、firstChild、lastChild、previousSiblin

34、g、nextSibling、attributes、ownerDocument、namespaceURI、prefix、localNameq方法：方法：hasAttributes()、haschildNodes()、insertBefore()、replaceChild()、removeChild()、appendChild()、cloneNode()7.1.3 ESMP CoreDOMn3. Documentq方法：方法：qgetElementsByTagName()返回帶有指定標簽名返回帶有指定標簽名的所有元素，如：的所有元素，如：document.getElementsByTagName(

35、p); qgetElementById()返回帶有指定返回帶有指定 ID 的元素，如：的元素，如：document.getElementById(id); 7.1.3 ESMP CoreDOMn3. Documentq方法：方法：creatElement()、createTextNode()/創(chuàng)建一個創(chuàng)建一個P元素節(jié)點元素節(jié)點var para=document.createElement(p); var node=document.createTextNode(This is new.); para.appendChild(node); 7.1.3 ESMP CoreDOMn4. NodeLi

36、stq當使用諸如當使用諸如getElementsByTagName()或或childNodes屬性或方法時，會返回屬性或方法時，會返回 NodeList 對象。對象。NodeList 對象表示節(jié)點的列表。對象表示節(jié)點的列表。q使用從使用從 0 開始的下標來訪問節(jié)點列表中的節(jié)點。開始的下標來訪問節(jié)點列表中的節(jié)點。 NodeList 對象會保持自身的更新。如果刪除或添對象會保持自身的更新。如果刪除或添加了元素，列表會自動更新。加了元素，列表會自動更新。7.1.3 ESMP CoreDOMn4. NodeListq屬性：屬性：length列表中節(jié)點的數(shù)量，例如：列表中節(jié)點的數(shù)量，例如：x=docum

37、ent.getElementsByTagName(p).length; q方法：方法：item()返回節(jié)點列表中處于指定索引號的節(jié)點，返回節(jié)點列表中處于指定索引號的節(jié)點，如：如：item(index) qindex表示表示 NodeList 中節(jié)點位置的整數(shù)。該值是大中節(jié)點位置的整數(shù)。該值是大于等于于等于 0 小于等于小于等于 NodeList.length-1 的整數(shù)。的整數(shù)。 x=document.getElementsByTagName(p);for (i=0;ix.length;i+) /僅顯示元素節(jié)點僅顯示元素節(jié)點 if (x.item(i).nodeType=1) document

38、.write(x.item(i).nodeName) ; document.write() ; 7.1.3 ESMP CoreDOMn5. Elementn屬性：屬性：tagNamen方法：方法：getAttribute()、setAttribute()、removeAttribute()、getElementsByTagName()、hasAttribute()7.1.3 ESMP CoreDOMn6. Textn屬性：屬性：data設(shè)置或返回元素或?qū)傩缘奈谋驹O(shè)置或返回元素或?qū)傩缘奈谋?、length返回元素或?qū)傩缘奈谋鹃L度返回元素或?qū)傩缘奈谋鹃L度 n方法：方法：appendData()向節(jié)

39、點追加數(shù)據(jù)向節(jié)點追加數(shù)據(jù) 、deleteData()從節(jié)點刪除數(shù)據(jù)從節(jié)點刪除數(shù)據(jù) 、insertData()向節(jié)點中插入數(shù)據(jù)向節(jié)點中插入數(shù)據(jù) 、replaceData()替換節(jié)點替換節(jié)點中的數(shù)據(jù)中的數(shù)據(jù) 、substringData()從節(jié)點提取數(shù)據(jù)從節(jié)點提取數(shù)據(jù) 7.1.4 ESMP HTMLDOMnHTML DOM 定義了訪問和操作定義了訪問和操作 HTML 文檔的文檔的專用專用API，它是對核心，它是對核心DOM的擴展，目前主流的擴展，目前主流瀏覽器都支持。瀏覽器都支持。n對核心對核心DOM的擴展：的擴展：q指定和添加了特用于指定和添加了特用于HTML文檔和元素的文檔和元素的API。q實

40、現(xiàn)和實現(xiàn)和DOM Level0兼容。兼容。q提供一種便利的機制用于對提供一種便利的機制用于對HTML文檔的一般性操文檔的一般性操作。作。7.1.4 ESMP HTMLDOMn1. document對象對象q代表整個代表整個 HTML 文檔，可被用來訪問頁面中的所文檔，可被用來訪問頁面中的所有元素。有元素。7.1.4 ESMP HTMLDOM7.1.4 ESMP HTMLDOMn2. link元素對象元素對象屬性屬性描述描述href設(shè)置或返回被鏈接資源的設(shè)置或返回被鏈接資源的 URLmedia設(shè)置或返回文檔顯示的設(shè)備類型設(shè)置或返回文檔顯示的設(shè)備類型name設(shè)置或返回設(shè)置或返回 元素的名稱元素的名

41、稱rel設(shè)置或返回當前文檔與目標設(shè)置或返回當前文檔與目標 URL之間的關(guān)系之間的關(guān)系type設(shè)置或返回目標設(shè)置或返回目標 URL 的的 MIME 類型類型function changeStyle() document.getElementById(style1).href=style2.css; 7.1.4 ESMP HTMLDOMn3. form元素對象元素對象屬性或方法屬性或方法描述描述elements 包含表單中所有元素的數(shù)組。包含表單中所有元素的數(shù)組。action設(shè)置或返回表單的設(shè)置或返回表單的 action 屬性。屬性。 enctype設(shè)置或返回表單用來編碼內(nèi)容的設(shè)置或返回表單用來編

42、碼內(nèi)容的 MIME 類型。類型。length返回表單中的元素數(shù)目。返回表單中的元素數(shù)目。method設(shè)置或返回將數(shù)據(jù)發(fā)送到服務(wù)器的設(shè)置或返回將數(shù)據(jù)發(fā)送到服務(wù)器的 HTTP 方法。方法。name設(shè)置或返回表單的名稱。設(shè)置或返回表單的名稱。reset()把表單的所有輸入元素重置為它們的默認值。把表單的所有輸入元素重置為它們的默認值。submit()提交表單。提交表單。7.1.4 ESMP HTMLDOMn4. text input元素對象元素對象屬性屬性描述描述defaultValue設(shè)置或返回文本域的默認值。設(shè)置或返回文本域的默認值。 form返回一個對包含文本域的表單對象的引用。返回一個對包含

43、文本域的表單對象的引用。 maxLength設(shè)置或返回文本域中的最大字符數(shù)。設(shè)置或返回文本域中的最大字符數(shù)。 name設(shè)置或返回文本域的名稱。設(shè)置或返回文本域的名稱。 size設(shè)置或返回文本域的尺寸。設(shè)置或返回文本域的尺寸。 type返回文本域的表單元素類型。返回文本域的表單元素類型。value設(shè)置或返回文本域的設(shè)置或返回文本域的 value 屬性的值。屬性的值。7.1.4 ESMP HTMLDOMn4. text input元素對象元素對象方法方法描述描述select()選取文本域中的內(nèi)容。選取文本域中的內(nèi)容。 blur()從文本域上移開焦點。從文本域上移開焦點。 focus()在文本域上設(shè)

44、置焦點。在文本域上設(shè)置焦點。 n5. password input元素對象元素對象q屬性、方法：屬性、方法：同同text7.1.4 ESMP HTMLDOMn6. textarea元素對象元素對象屬性或方法屬性或方法描述描述cols設(shè)置或返回設(shè)置或返回 textarea 的寬度。的寬度。 form返回對包含該返回對包含該 textarea 的表單對象的引用。的表單對象的引用。 name設(shè)置或返回設(shè)置或返回 textarea 的名稱。的名稱。 rows設(shè)置或返回設(shè)置或返回 textarea 的高度。的高度。 type返回該文本框的表單類型。返回該文本框的表單類型。 value設(shè)置或返回在設(shè)置或返

45、回在 textarea 中的文本。中的文本。 select()、blur()、focus()7.1.4 ESMP HTMLDOMn7. radio input元素對象元素對象q屬性：屬性：checked、defaultchecked、form、length、name、type、valueq方法：方法：click()n8. checkbox input元素對象元素對象q屬性、方法：屬性、方法：同同radio7.1.4 ESMP HTMLDOMn9. submit input元素對象元素對象q屬性：屬性：form、name、type、valueq方法：方法：click()n10. reset in

46、put元素對象元素對象q屬性：屬性：form、name、type、valueq方法：方法：click()7.1.4 ESMP HTMLDOMn11. select input元素對象元素對象q屬性：屬性：form、length、name、options 返回包返回包含下拉列表中的所有選項的一個數(shù)組含下拉列表中的所有選項的一個數(shù)組 、selectedIndex、size、type、valueq方法：方法：add()、remove()向下拉列表添加或刪除一向下拉列表添加或刪除一個選項。個選項。 7.1.4 ESMP HTMLDOMn12. option元素對象元素對象q屬性：屬性：defaultS

47、elected返回返回 selected 屬性的初始屬性的初始值、值、form、label、selected、text、valuen13. button元素對象元素對象q屬性：屬性：form、name、type、valueq方法：方法：blur()、click()、focus()7.2 使用使用JavaScript的注意事項的注意事項7.2.1 檢測瀏覽器支持檢測瀏覽器支持n檢測是否支持兩個基本方法，以此來檢測是否檢測是否支持兩個基本方法，以此來檢測是否有基本的有基本的DOM支持。支持。function hasBasicDOM()if(document.getElementById &

48、 document.getElementByTagName)return true;return false;7.2.1 檢測瀏覽器支持檢測瀏覽器支持nDOM標準的檢測方式是使用標準的檢測方式是使用DOMImplementation接口定義的接口定義的hasFeature()方法，一般實現(xiàn)該接口的瀏覽器都會完全支持方法，一般實現(xiàn)該接口的瀏覽器都會完全支持DOM Level2，也可以檢測特定的支持項。，也可以檢測特定的支持項。n格式：格式：document.implementation.hasFeature(feature,version)7.2.1 檢測瀏覽器支持檢測瀏覽器支持nfeature

49、定義要檢測的模塊名，見表定義要檢測的模塊名，見表7-4。nversion是要檢測的模塊的版本號。如不指定則檢是要檢測的模塊的版本號。如不指定則檢測所有版本，只要一個支持就返回測所有版本，只要一個支持就返回true。n例如：例如：/獲得獲得DOMImplementationif(document.implementation) var implementation=document.implementation; if(implementation. hasFeature)if(implementation.hasFeature(“XML”,”1.0”) alert(“支持支持XML1.0”);

50、 else alert(“不支持不支持XML1.0”); 7.2.2 關(guān)于打開新窗口關(guān)于打開新窗口n避免使用避免使用window.open()方法和方法和document.open()方法，因為并非所有手機瀏方法，因為并非所有手機瀏覽器均支持多窗口。覽器均支持多窗口。n不要使用不要使用window.showModalDialog()方法打方法打開模式對話框，大部分手機瀏覽器都不支持該開模式對話框，大部分手機瀏覽器都不支持該功能。功能。7.2.3 關(guān)于間隔調(diào)用關(guān)于間隔調(diào)用nsetInterval() 按照間隔指定的毫秒數(shù)循環(huán)執(zhí)行指按照間隔指定的毫秒數(shù)循環(huán)執(zhí)行指定的代碼；定的代碼；clearInt

51、erval() 取消對應(yīng)取消對應(yīng)setInterval函數(shù)指定的循環(huán)。函數(shù)指定的循環(huán)。n不要使用不要使用setInterval()方法進行間隔調(diào)用，建議方法進行間隔調(diào)用，建議使用使用setTimeout()方法來代替。方法來代替。n因為在使用因為在使用setInterval()方法進行間隔調(diào)用時，方法進行間隔調(diào)用時，如果要調(diào)用的函數(shù)執(zhí)行時間超過間隔期就會導(dǎo)致如果要調(diào)用的函數(shù)執(zhí)行時間超過間隔期就會導(dǎo)致不可預(yù)知的錯誤。不可預(yù)知的錯誤。7.2.3 關(guān)于間隔調(diào)用關(guān)于間隔調(diào)用n例如設(shè)置每例如設(shè)置每100毫秒執(zhí)行一次函數(shù)，但函數(shù)的操毫秒執(zhí)行一次函數(shù)，但函數(shù)的操作時間需要作時間需要200毫秒才能完成，這就可

52、能導(dǎo)致異毫秒才能完成，這就可能導(dǎo)致異常，可能同時有兩個函數(shù)在運行。常，可能同時有兩個函數(shù)在運行。function someFunction()/運行函數(shù)功能需要運行函數(shù)功能需要200毫秒毫秒window.setInterval(someFunction,100);7.2.3 關(guān)于間隔調(diào)用關(guān)于間隔調(diào)用n解決方法是用解決方法是用setTimeout()方法來代替。方法來代替。function someFunction()/運行函數(shù)功能需要運行函數(shù)功能需要200毫秒毫秒 /執(zhí)行完成后，再次延遲執(zhí)行完成后，再次延遲100毫秒繼續(xù)毫秒繼續(xù) setTimeout (someFunction,100);se

53、tTimeout (someFunction,100);7.2.4 隱藏瀏覽器工具條隱藏瀏覽器工具條n使用使用window.scrollTo()方法可以將瀏覽器窗方法可以將瀏覽器窗口中的文檔滾動到相對左上角指定口中的文檔滾動到相對左上角指定x和和y距離的距離的位置。位置。n目前主流手機瀏覽器都支持該功能，因此可以目前主流手機瀏覽器都支持該功能，因此可以用來隱藏工具條。用來隱藏工具條。window.scrollTo(0,1);7.2.4 隱藏瀏覽器工具條隱藏瀏覽器工具條n一般來說，應(yīng)該在問的那個加載完成后再調(diào)用一般來說，應(yīng)該在問的那個加載完成后再調(diào)用該方法，例如下面代碼，注冊該方法，例如下面代碼

54、，注冊load時間，在事時間，在事件監(jiān)聽函數(shù)中調(diào)用該方法。件監(jiān)聽函數(shù)中調(diào)用該方法。addEventListener(“l(fā)oad”,hideURLbar,false);function hideURLbar()window.scrollTo(0,1);7.2.4 隱藏瀏覽器工具條隱藏瀏覽器工具條n有一種特殊情況是網(wǎng)頁太短導(dǎo)致不能滾動，這時有一種特殊情況是網(wǎng)頁太短導(dǎo)致不能滾動，這時要么為要么為body元素設(shè)置元素設(shè)置min-height樣式屬性大于某樣式屬性大于某個高度，要么使用下面的元數(shù)據(jù)聲明，使視點的個高度，要么使用下面的元數(shù)據(jù)聲明，使視點的高度等于設(shè)備的高度，這樣肯定超出了瀏覽器窗高度等于設(shè)

55、備的高度，這樣肯定超出了瀏覽器窗口可視高度，因此肯定會有滾動?？诳梢暩叨龋虼丝隙〞袧L動。7.3 定義和觸發(fā)事件定義和觸發(fā)事件n手機上使用手機上使用JavaScript另一個較大的不同就是對另一個較大的不同就是對事件的處理，與桌面系統(tǒng)的差異明顯。事件的處理，與桌面系統(tǒng)的差異明顯。n另一個需要注意的就是另一個需要注意的就是IEMobile不支持不支持W3C事件，事件，所以必須尋找兼容性的方法，這與桌面上所以必須尋找兼容性的方法，這與桌面上IE與其與其他瀏覽器的差別是相同的。他瀏覽器的差別是相同的。n一般定義如下函數(shù)來實現(xiàn)兼容：一般定義如下函數(shù)來實現(xiàn)兼容：P1367.3.1 基本交互事件基本交互

56、事件n鍵盤手機的事件處理很簡單，就是鍵盤手機的事件處理很簡單，就是keydown、keypress、keyup，這與桌面一致。，這與桌面一致。n而觸摸屏手機則不同，如而觸摸屏手機則不同，如ondbclick和和onmousewheel事件等都不適用于手機。事件等都不適用于手機。n觸摸屏手機沒有觸摸屏手機沒有focus和和blur事件，而都支持事件，而都支持click事件。大多數(shù)也支持下面幾個連續(xù)事件：事件。大多數(shù)也支持下面幾個連續(xù)事件：mouseover、mousemove、mousedown、mouseup、mouseout7.3.2 關(guān)于軟鍵盤事件關(guān)于軟鍵盤事件n對于觸摸屏，一般都是使用軟

57、鍵盤，其出發(fā)的對于觸摸屏，一般都是使用軟鍵盤，其出發(fā)的時間應(yīng)由時間應(yīng)由change監(jiān)聽，軟鍵盤也有監(jiān)聽，軟鍵盤也有keydown、keypress、keyup事件。事件。n但若按按鍵時間長或連續(xù)按鍵會出現(xiàn)另一個字符，但若按按鍵時間長或連續(xù)按鍵會出現(xiàn)另一個字符，這些只有被寫到輸入框時才有辦法捕捉到。這些只有被寫到輸入框時才有辦法捕捉到。7.3.3 感知手機握持方向和感知手機握持方向和orientationchange事件事件niPhone和和Android支持支持orientationchange事事件，在手機旋轉(zhuǎn)時會觸發(fā)，一般可以通過其判件，在手機旋轉(zhuǎn)時會觸發(fā)，一般可以通過其判斷手機握持方向。斷手機握持方向。n下面是一個通用方法，根據(jù)幾個特定屬性的比下面是一個