第7章专用于手机的JavaScript_ESMP

1、第第7章章 专用于手机的专用于手机的JavaScript_ESMP7.1 使用使用ESMPnECMAScript Mobile Profile简称简称ESMP，是，是OMA专为手机定义的一个脚本标准。专为手机定义的一个脚本标准。n它是基于它是基于ECMA-262第三版指定的，并且还增加第三版指定的，并且还增加了了BOM、CoreDOM和和HTMLDOM的定义。的定义。ECMA-262n三足鼎立：三足鼎立：Netscape 发明了发明了 JavaScript；微软；微软发布发布IE 3.0时搭载了一个时搭载了一个 JavaScript 的克隆版，的克隆版，叫做叫做 Jscript；CEnvi 中

2、的中的 ScriptEase。n欧洲计算机制造商协会欧洲计算机制造商协会ECMA完成统一，形成完成统一，形成ECMA-262，该标准定义了名为，该标准定义了名为 ECMAScript 的的全新脚本语言。全新脚本语言。 n1999 年年 12 月发布的月发布的ECMA-262 第三版，目第三版，目前所有主流的前所有主流的 Web 浏览器都遵守浏览器都遵守 。 ECMAScriptn尽管尽管 ECMAScript 是一个重要的标准，但它并不是一个重要的标准，但它并不是是 JavaScript 唯一的部分，也不是唯一被标准唯一的部分，也不是唯一被标准化的部分。实际上，一个完整的化的部分。实际上，一个

3、完整的 JavaScript 实实现是由以下现是由以下 3 个不同部分组成的：个不同部分组成的： n核心（核心（ECMAScript）n文档对象模型（文档对象模型（DOM）n浏览器对象模型（浏览器对象模型（BOM）ECMAScriptnJavaScript 的核心的核心 ECMAScript 描述了该语言描述了该语言的语法和基本对象；的语法和基本对象；nDOM 描述了处理网页内容的方法和接口；描述了处理网页内容的方法和接口；nBOM 描述了与浏览器进行交互的方法和接口。描述了与浏览器进行交互的方法和接口。7.1.1 ESMP与与ECMAScript的不同的不同nESMP于于ECMA-262第三

4、版的不同之处主要表现第三版的不同之处主要表现在以下几个方面：在以下几个方面：qESMP为所有内建对象（不包括为所有内建对象（不包括BOM）定义了一个）定义了一个version属性，格式为属性，格式为M.m.I.i。q支持支持UTR-8和和UTF-16编码编码qESMP支持非转义字符前加一个反斜杠支持非转义字符前加一个反斜杠q禁止使用禁止使用ES-CP中限制的语法中限制的语法qESMP定义了宿主定义了宿主BOM对象、对象、HTMLDOM和和CoreDOM7.1.1 ESMP与与ECMAScript的不同的不同qESMP规定必须用分号结束语句规定必须用分号结束语句qESMP规定，规定，String

5、的的toLowerCase()和和toUpperCase()方法分别等同于方法分别等同于toLocaleLowerCase()和和toLocaleUpperCase()方法。方法。qESMP对对Array类的类的sort()方法指定的参数不是一个函数方法指定的参数不是一个函数时抛出时抛出TypeError异常。异常。qESMP增加了一个增加了一个MemeryError异常类型，为异常类型，为Error类类增加了增加了code属性。属性。qRegExp对象的对象的multiline属性以及模式修正符属性以及模式修正符m不支持。不支持。7.1.1 ESMP与与ECMAScript的不同的不同nAr

6、ray类的类的sort()方法格式：方法格式：arrayObject.sort(sortby) n无参调用时，按照字符编码的顺序进行排序。如果想按照无参调用时，按照字符编码的顺序进行排序。如果想按照其他标准进行排序，就需要提供比较函数。其他标准进行排序，就需要提供比较函数。7.1.1 ESMP与与ECMAScript的不同的不同n函数要比较两个值，然后返回一个用于说明这两个值的相函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数对顺序的数字。比较函数应该具有两个参数 a 和和 b，其返，其返回值如下：回值如下：n若若 a 小于小于 b，在排序后的数组中，在

7、排序后的数组中 a 应该出现在应该出现在 b 之前，之前，则返回一个小于则返回一个小于 0 的值。的值。 n若若 a 等于等于 b，则返回，则返回 0。 n若若 a 大于大于 b，则返回一个大于，则返回一个大于 0 的值。的值。7.1.2 ESMP BOMnBOM是是Browser Object Model的缩写，简称浏的缩写，简称浏览器对象模型。览器对象模型。 nBOM提供了独立于内容而与浏览器窗口进行交互提供了独立于内容而与浏览器窗口进行交互的的API，这些，这些API由若干对象组成，称为宿主对象。由若干对象组成，称为宿主对象。每个对象都提供了很多方法与属性。每个对象都提供了很多方法与属性

8、。 n由于由于BOM主要用于管理窗口与窗口之间的通讯，主要用于管理窗口与窗口之间的通讯，因此其核心对象是因此其核心对象是window。7.1.2 ESMP BOM基本的基本的BOM体系结构图体系结构图7.1.2 ESMP BOMn1. window对象对象qwindow对象是浏览器顶层的一个对象，是浏览器对象是浏览器顶层的一个对象，是浏览器窗口这个类的一个实例。它可以产生其他的对象，窗口这个类的一个实例。它可以产生其他的对象，称为称为window的子对象，如的子对象，如history、location、document等。调用其方法和属性无需指定对象名。等。调用其方法和属性无需指定对象名。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用户需要点击确定按钮才能继续进行操作。用户需要点击确定按钮才能继续进行操作。 n确认框：确认框：confirm(文本文本)q如果用户点击确认，那么返回值为如果用户点击确

10、认，那么返回值为 true。如果用户点。如果用户点击取消，那么返回值为击取消，那么返回值为 false。 n提示框：提示框：prompt(文本文本,默认值默认值)q如果用户点击确认，那么返回值为输入的值。如果用户如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为点击取消，那么返回值为 null。 setTimeout()和和clearTimeout()nsetTimeout()：暂停指定的毫秒数后执行指定的暂停指定的毫秒数后执行指定的代码。代码。 nclearTimeout()：在暂停时间段内可用来取消在暂停时间段内可用来取消setTimeout函数指定的将要执行的代码。函

11、数指定的将要执行的代码。setTimeout()和和clearTimeout()n语法格式：语法格式：n如要考虑用如要考虑用clearTimeout () 取消，则调用取消，则调用setTimeout()时要将其赋给一个变量。时要将其赋给一个变量。var iTimerID=window.setTimeout(func,delay,arguments);window.clearTimeout(iTimerID);7.1.2 ESMP BOMn2. navigator对象对象qwindow.navigator 对象包含有关访问者浏览器的对象包含有关访问者浏览器的信息。信息。qNavigator对象

12、包含了正在使用的浏览器的版本信对象包含了正在使用的浏览器的版本信息，可以通过它获取浏览器已经安装的插件、支持息，可以通过它获取浏览器已经安装的插件、支持MIME类型等信息。类型等信息。q使用使用window.navigator属性可以返回一个属性可以返回一个navigator对象，该对象包含一些方法、属性、集对象，该对象包含一些方法、属性、集合等成员。合等成员。7.1.2 ESMP BOMn2. navigator对象对象q属性：属性：appName 返回浏览器的名称返回浏览器的名称appVersion 返回浏览器的平台和版本信息返回浏览器的平台和版本信息 userAgent 返回由客户机发送

13、服务器的返回由客户机发送服务器的 user-agent 头部的值。头部的值。7.1.2 ESMP BOMn使用使用for in循环查看这些成员的值：循环查看这些成员的值：for(i in window.navigator) document.write(i + “=” + window.navigatori +”);7.1.2 ESMP BOMn2. navigator对象对象q用用navigator.userAgent来识别浏览器来识别浏览器q警告：警告：来自来自 navigator 对象的信息具有误导性，不对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：应该被用于检测浏览器版本

14、，这是因为：navigator 数据可被浏览器使用者更改数据可被浏览器使用者更改 浏览器无法报告晚于浏览器发布的新操作系统浏览器无法报告晚于浏览器发布的新操作系统7.1.2 ESMP BOMn3. history对象对象qhistory对象指浏览器的浏览历史。对象指浏览器的浏览历史。q属性：属性：length 返回浏览器历史列表中的返回浏览器历史列表中的 URL 数量数量q方法：方法：nback() 加载加载 history 列表中的前一个列表中的前一个 URL nforward() 加载加载 history 列表中的下一个列表中的下一个 URL ngo(num) 加载加载 history 列

15、表中的某个具体页面，参列表中的某个具体页面，参数数num是字符串则表示历史中的是字符串则表示历史中的URL，数字则表示，数字则表示前进或后退的步数。前进或后退的步数。7.1.2 ESMP BOMn4. location对象对象qwindow.location 对象用于获得某个窗口对象所打对象用于获得某个窗口对象所打开的地址开的地址 (URL)，并把浏览器重定向到新的页面。，并把浏览器重定向到新的页面。q表示当前窗口直接用表示当前窗口直接用location，其他窗口用，其他窗口用“窗口窗口对象名对象名.location”。q出于安全性需要，属于不同协议或不同主机的两个出于安全性需要，属于不同协议

16、或不同主机的两个地址间不能互相引用对方的地址间不能互相引用对方的location对象。对象。var newWindow = window.open(“timeout.html”);document.write(newWindow.location);document.write(location);7.1.2 ESMP BOMn4. location对象对象q属性：属性：nhash 设置或返回从井号设置或返回从井号 (#) 开始的开始的 URL（锚）（锚） nhost 设置或返回主机名和当前设置或返回主机名和当前 URL 的端口号的端口号 nhref 设置或返回完整的设置或返回完整的 URL

17、nhostname 设置或返回当前设置或返回当前 URL 的主机名的主机名 npathname 设置或返回当前设置或返回当前 URL 的路径部分的路径部分 nport 设置或返回当前设置或返回当前 URL 的端口号的端口号 nprotocol 设置或返回当前设置或返回当前 URL 的协议的协议 nsearch 设置或返回从问号设置或返回从问号 (?) 开始的开始的 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() 重新加载当前文档，若无参数，或参数是重新加载当前文档，若无参数，或参数是 false，就会用就会用 HTTP 头头 If-Modified-Since 来检测服务器上的文档来检

19、测服务器上的文档是否已改变。若文档已改变，是否已改变。若文档已改变，reload() 会再次下载该文档。会再次下载该文档。否则该方法将从缓存中装载文档。这与用户单击浏览器的刷否则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住刷新按钮时按住 Shift 健的效果是完全一样。健

20、的效果是完全一样。7.1.2 ESMP BOMn5. document对象对象q每个载入浏览器的每个载入浏览器的 HTML 文档都会成为文档都会成为 Document 对象。它使我们可以从脚本中对对象。它使我们可以从脚本中对 HTML 页面中的所有元素进行访问。页面中的所有元素进行访问。 7.1.2 ESMP BOMn5. document对象对象q属性：属性：ncookie 设置或返回与当前文档有关的所有设置或返回与当前文档有关的所有cookiendomain 返回当前文档的域名返回当前文档的域名nreferrer 返回载入当前文档的文档的返回载入当前文档的文档的 URLntitle 返回当

21、前文档的标题返回当前文档的标题相同相同Origin策略的限制策略的限制同源策同源策略略n对于对于JavaScript程序，存在相同程序，存在相同Origin策略的策略的限制，即同源策略。限制，即同源策略。n同源策略阻止从一个同源策略阻止从一个Origin加载的文档或者脚本加载的文档或者脚本访问从另一个访问从另一个Origin加载的文档的属性（即加载的文档的属性（即DOM）。）。n如果协议、端口、主机相同，那么就认为两个文如果协议、端口、主机相同，那么就认为两个文档具有相同的档具有相同的Origin。相同相同Origin策略的限制策略的限制同源策同源策略略n针对地址针对地址http:/ ESMP

22、 BOMq方法：方法：nclear()用来清除一个文档中的内容用来清除一个文档中的内容nopen() 打开一个流，以收集来自任何打开一个流，以收集来自任何 document.write() 或或 document.writeln() 的输出的输出nclose() 关闭用关闭用 document.open() 方法打开的输出方法打开的输出流，并显示选定的数据流，并显示选定的数据 nwrite() 向文档写向文档写 HTML 表达式表达式 或或 JavaScript 代码代码nwriteln() 等同等同 write() 并在每个表达式之后写一个换并在每个表达式之后写一个换行符行符7.1.3 ES

23、MP CoreDOMnDocument Object Model，文档对象模型。是，文档对象模型。是W3C指定的一簇规范，它是独立于平台和语言的指定的一簇规范，它是独立于平台和语言的一系列接口定义。一系列接口定义。 nDOM是文档在内存中的表现形式，它是一个应用是文档在内存中的表现形式，它是一个应用程序接口，定义了该文档的逻辑结构以及一套访程序接口，定义了该文档的逻辑结构以及一套访问和处理文档的方法。问和处理文档的方法。n对应的应用程序可以跨语言跨平台。对应的应用程序可以跨语言跨平台。7.1.3 ESMP CoreDOMn例如：客户端浏览器是一个处理例如：客户端浏览器是一个处理HTML和和XM

24、L文文档的应用程序，它必须将文档解析成档的应用程序，它必须将文档解析成DOM才能够才能够以编程方式读取、操作和呈现以编程方式读取、操作和呈现HTML、XML文档。文档。n例如所有浏览器都支持使用例如所有浏览器都支持使用DOM接口定义的方法接口定义的方法来处理来处理HTML文档中的内容、结构和样式，这样文档中的内容、结构和样式，这样可以减少对浏览器兼容性的考虑。可以减少对浏览器兼容性的考虑。DOM的起源的起源nDOM历史可以追溯至历史可以追溯至1990年代后期微软与年代后期微软与Netscape的的“浏览器大战浏览器大战”，双方为了在，双方为了在JavaScript与与JScript一决生死，于

25、是大规模的赋一决生死，于是大规模的赋予浏览器强大的功能。予浏览器强大的功能。n微软在网页技术上加入了不少专属事物，包括微软在网页技术上加入了不少专属事物，包括VBScript、ActiveX、以及微软自家的、以及微软自家的DHTML格格式等，使不少网页使用非微软平台及浏览器无法式等，使不少网页使用非微软平台及浏览器无法正常显示。正常显示。DOM应运而生。应运而生。DOM的发展的发展n最初是一种让最初是一种让JavaScript在浏览器间可移植的方在浏览器间可移植的方法，不过其应用已经远远超出这个范围。法，不过其应用已经远远超出这个范围。nDOM技术使得用户页面可以动态地变化，如可以技术使得用户

26、页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，增加一个元素等， DOM技术使得页面的交互性技术使得页面的交互性大大地增强。大大地增强。 DOM的分级的分级n根据根据W3C DOM规范，规范，DOM是是HTML与与XML的应的应用编程接口（用编程接口（API），），DOM将整个页面映射为一将整个页面映射为一个由层次节点组成的文件。有个由层次节点组成的文件。有1级、级、2级、级、3级共级共3个级别。个级别。DOM的分级的分级n根据根据W3C DOM规范，规范，DOM是是HTML与与XML的应的应用编程接口（用编程接口（

27、API），），DOM将整个页面映射为一将整个页面映射为一个由层次节点组成的文件。有个由层次节点组成的文件。有1级、级、2级、级、3级共级共3个级别。个级别。q1级级DOM：由由DOM核心与核心与DOM HTML两个模块组两个模块组成。成。DOM核心能映射以核心能映射以XML为基础的文档结构，为基础的文档结构，允许获取和操作文档的任意部分。允许获取和操作文档的任意部分。DOM HTML通通过添加过添加HTML专用的对象与函数对专用的对象与函数对DOM核心进行了核心进行了扩展。扩展。DOM的分级的分级q2级DOM：2级级DOM通过对象接口增加了对鼠标和通过对象接口增加了对鼠标和用户界面事件、范围、

28、遍历和层叠样式表（用户界面事件、范围、遍历和层叠样式表（CSS）的支持。同时也对的支持。同时也对DOM 1的核心进行了扩展，从而的核心进行了扩展，从而可支持可支持XML命名空间。命名空间。q3级DOM：引入统一方式载入和保存文档和文档验引入统一方式载入和保存文档和文档验证方法对证方法对DOM进一步扩展，进一步扩展，DOM3包含一个名为包含一个名为“DOM载入与保存载入与保存”的新模块，的新模块，DOM核心扩展后核心扩展后可支持可支持XML1.0的所有内容，包扩的所有内容，包扩XML Infoset、 XPath、和、和XML Base。 DOM的分级的分级n目前大部分浏览器软件都可以部分获取全

29、部实目前大部分浏览器软件都可以部分获取全部实现现DOM level2规范簇，规范簇，HTML5 DOM API也也是大量基于是大量基于DOM level2规范簇的。规范簇的。HTML网页网页加载加载DOM浏览器浏览器解析解析7.1.3 ESMP CoreDOMnW3C规定的三类规定的三类DOM标准接口：标准接口：qCore DOM（核心（核心DOM），适用于各种结构化文档），适用于各种结构化文档 ；qXML DOM，专用于，专用于XML文档文档 ；qHTML DOM，专用于，专用于HTML文档。文档。nESMP CoreDOM仅定义了仅定义了3种节点类型，即种节点类型，即Document、El

30、ement、Text节点节点(nodeType返返回回9,1,3)，并为每个节点规定了少量的方法和属性。，并为每个节点规定了少量的方法和属性。7.1.3 ESMP CoreDOMn1. DOMExceptionq属性：属性：message，获取导致异常的消息字符串；，获取导致异常的消息字符串；code，获取抛出的异常的类型，该属性的返回值，获取抛出的异常的类型，该属性的返回值为一个整数。为一个整数。q常量：常量：见表见表7-37.1.3 ESMP CoreDOMn2. NodeqNode 对象是整个对象是整个 DOM 的主要数据类型。的主要数据类型。q节点对象代表文档树中的一个单独的节点。节点

31、可节点对象代表文档树中的一个单独的节点。节点可以是元素节点、属性节点、文本节点等，可以通过以是元素节点、属性节点、文本节点等，可以通过节点查看器查看。节点查看器查看。7.1.3 ESMP CoreDOMn2. Noden根据根据 DOM，HTML 文档中的每个成分都是一个节点。文档中的每个成分都是一个节点。nDOM 是这样规定的：是这样规定的：q整个文档是一个文档节点整个文档是一个文档节点 q每个每个 HTML 标签是一个元素节点标签是一个元素节点 q包含在包含在 HTML 元素中的文本是文本节点元素中的文本是文本节点 q每一个每一个 HTML 属性是一个属性节点属性是一个属性节点 q注释属于

32、注释节点注释属于注释节点 7.1.3 ESMP CoreDOMn节点彼此都有等级关系。节点彼此都有等级关系。nHTML 文档中的所有节点组成了一个文档树（或文档中的所有节点组成了一个文档树（或节点树）。节点树）。HTML 文档中的每个元素、属性、文文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。级别的所有文本节点为止。7.1.3 ESMP CoreDOMn属性：属性：qnodeName：节点的名称，只读，元素节点名与标签节点的

33、名称，只读，元素节点名与标签名相同；属性节点名是属性的名称；文本节点名永远是名相同；属性节点名是属性的名称；文本节点名永远是 #text；文档节点名永远是；文档节点名永远是 #document。qnodeValue：节点的值节点的值 。元素节点值是。元素节点值是undefined；文本节点的值是文本自身；属性节点的值是属性的值。文本节点的值是文本自身；属性节点的值是属性的值。 qnodeType ：节点的类型，只读。节点的类型，只读。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()/创建一个创建一个P元素节点元素节点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 对象表示节点的列表。对象表示节点的列表。q使用从使用从 0 开始的下标来访问节点列表中的节点。开始的下标来访问节点列表中的节点。 NodeList 对象会保持自身的更新。如果删除或添对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。加了元素，列表会自动更新。7.1.3 ESMP CoreDOMn4. NodeListq属性：属性：length列表中节点的数量，例如：列表中节点的数量，例如：x=docum

37、ent.getElementsByTagName(p).length; q方法：方法：item()返回节点列表中处于指定索引号的节点，返回节点列表中处于指定索引号的节点，如：如：item(index) qindex表示表示 NodeList 中节点位置的整数。该值是大中节点位置的整数。该值是大于等于于等于 0 小于等于小于等于 NodeList.length-1 的整数。的整数。 x=document.getElementsByTagName(p);for (i=0;ix.length;i+) /仅显示元素节点仅显示元素节点 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设置或返回元素或属性的文本设置或返回元素或属性的文本 、length返回元素或属性的文本长度返回元素或属性的文本长度 n方法：方法：appendData()向节

39、点追加数据向节点追加数据 、deleteData()从节点删除数据从节点删除数据 、insertData()向节点中插入数据向节点中插入数据 、replaceData()替换节点替换节点中的数据中的数据 、substringData()从节点提取数据从节点提取数据 7.1.4 ESMP HTMLDOMnHTML DOM 定义了访问和操作定义了访问和操作 HTML 文档的文档的专用专用API，它是对核心，它是对核心DOM的扩展，目前主流的扩展，目前主流浏览器都支持。浏览器都支持。n对核心对核心DOM的扩展：的扩展：q指定和添加了特用于指定和添加了特用于HTML文档和元素的文档和元素的API。q实

40、现和实现和DOM Level0兼容。兼容。q提供一种便利的机制用于对提供一种便利的机制用于对HTML文档的一般性操文档的一般性操作。作。7.1.4 ESMP HTMLDOMn1. document对象对象q代表整个代表整个 HTML 文档，可被用来访问页面中的所文档，可被用来访问页面中的所有元素。有元素。7.1.4 ESMP HTMLDOM7.1.4 ESMP HTMLDOMn2. link元素对象元素对象属性属性描述描述href设置或返回被链接资源的设置或返回被链接资源的 URLmedia设置或返回文档显示的设备类型设置或返回文档显示的设备类型name设置或返回设置或返回 元素的名称元素的名

41、称rel设置或返回当前文档与目标设置或返回当前文档与目标 URL之间的关系之间的关系type设置或返回目标设置或返回目标 URL 的的 MIME 类型类型function changeStyle() document.getElementById(style1).href=style2.css; 7.1.4 ESMP HTMLDOMn3. form元素对象元素对象属性或方法属性或方法描述描述elements 包含表单中所有元素的数组。包含表单中所有元素的数组。action设置或返回表单的设置或返回表单的 action 属性。属性。 enctype设置或返回表单用来编码内容的设置或返回表单用来编

42、码内容的 MIME 类型。类型。length返回表单中的元素数目。返回表单中的元素数目。method设置或返回将数据发送到服务器的设置或返回将数据发送到服务器的 HTTP 方法。方法。name设置或返回表单的名称。设置或返回表单的名称。reset()把表单的所有输入元素重置为它们的默认值。把表单的所有输入元素重置为它们的默认值。submit()提交表单。提交表单。7.1.4 ESMP HTMLDOMn4. text input元素对象元素对象属性属性描述描述defaultValue设置或返回文本域的默认值。设置或返回文本域的默认值。 form返回一个对包含文本域的表单对象的引用。返回一个对包含

43、文本域的表单对象的引用。 maxLength设置或返回文本域中的最大字符数。设置或返回文本域中的最大字符数。 name设置或返回文本域的名称。设置或返回文本域的名称。 size设置或返回文本域的尺寸。设置或返回文本域的尺寸。 type返回文本域的表单元素类型。返回文本域的表单元素类型。value设置或返回文本域的设置或返回文本域的 value 属性的值。属性的值。7.1.4 ESMP HTMLDOMn4. text input元素对象元素对象方法方法描述描述select()选取文本域中的内容。选取文本域中的内容。 blur()从文本域上移开焦点。从文本域上移开焦点。 focus()在文本域上设

44、置焦点。在文本域上设置焦点。 n5. password input元素对象元素对象q属性、方法：属性、方法：同同text7.1.4 ESMP HTMLDOMn6. textarea元素对象元素对象属性或方法属性或方法描述描述cols设置或返回设置或返回 textarea 的宽度。的宽度。 form返回对包含该返回对包含该 textarea 的表单对象的引用。的表单对象的引用。 name设置或返回设置或返回 textarea 的名称。的名称。 rows设置或返回设置或返回 textarea 的高度。的高度。 type返回该文本框的表单类型。返回该文本框的表单类型。 value设置或返回在设置或返

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 返回包返回包含下拉列表中的所有选项的一个数组含下拉列表中的所有选项的一个数组 、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()方法，一般实现该接口的浏览器都会完全支持方法，一般实现该接口的浏览器都会完全支持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 关于打开新窗口关于打开新窗口n避免使用避免使用window.open()方法和方法和document.open()方法，因为并非所有手机浏方法，因为并非所有手机浏览器均支持多窗口。览器均支持多窗口。n不要使用不要使用window.showModalDialog()方法打方法打开模式对话框，大部分手机浏览器都不支持该开模式对话框，大部分手机浏览器都不支持该功能。功能。7.2.3 关于间隔调用关于间隔调用nsetInterval() 按照间隔指定的毫秒数循环执行指按照间隔指定的毫秒数循环执行指定的代码；定的代码；clearInt

51、erval() 取消对应取消对应setInterval函数指定的循环。函数指定的循环。n不要使用不要使用setInterval()方法进行间隔调用，建议方法进行间隔调用，建议使用使用setTimeout()方法来代替。方法来代替。n因为在使用因为在使用setInterval()方法进行间隔调用时，方法进行间隔调用时，如果要调用的函数执行时间超过间隔期就会导致如果要调用的函数执行时间超过间隔期就会导致不可预知的错误。不可预知的错误。7.2.3 关于间隔调用关于间隔调用n例如设置每例如设置每100毫秒执行一次函数，但函数的操毫秒执行一次函数，但函数的操作时间需要作时间需要200毫秒才能完成，这就可

52、能导致异毫秒才能完成，这就可能导致异常，可能同时有两个函数在运行。常，可能同时有两个函数在运行。function someFunction()/运行函数功能需要运行函数功能需要200毫秒毫秒window.setInterval(someFunction,100);7.2.3 关于间隔调用关于间隔调用n解决方法是用解决方法是用setTimeout()方法来代替。方法来代替。function someFunction()/运行函数功能需要运行函数功能需要200毫秒毫秒 /执行完成后，再次延迟执行完成后，再次延迟100毫秒继续毫秒继续 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一般来说，应该在问的那个加载完成后再调用一般来说，应该在问的那个加载完成后再调用该方法，例如下面代码，注册该方法，例如下面代码

54、，注册load时间，在事时间，在事件监听函数中调用该方法。件监听函数中调用该方法。addEventListener(“load”,hideURLbar,false);function hideURLbar()window.scrollTo(0,1);7.2.4 隐藏浏览器工具条隐藏浏览器工具条n有一种特殊情况是网页太短导致不能滚动，这时有一种特殊情况是网页太短导致不能滚动，这时要么为要么为body元素设置元素设置min-height样式属性大于某样式属性大于某个高度，要么使用下面的元数据声明，使视点的个高度，要么使用下面的元数据声明，使视点的高度等于设备的高度，这样肯定超出了浏览器窗高度等于设

55、备的高度，这样肯定超出了浏览器窗口可视高度，因此肯定会有滚动。口可视高度，因此肯定会有滚动。7.3 定义和触发事件定义和触发事件n手机上使用手机上使用JavaScript另一个较大的不同就是对另一个较大的不同就是对事件的处理，与桌面系统的差异明显。事件的处理，与桌面系统的差异明显。n另一个需要注意的就是另一个需要注意的就是IEMobile不支持不支持W3C事件，事件，所以必须寻找兼容性的方法，这与桌面上所以必须寻找兼容性的方法，这与桌面上IE与其与其他浏览器的差别是相同的。他浏览器的差别是相同的。n一般定义如下函数来实现兼容：一般定义如下函数来实现兼容：P1367.3.1 基本交互事件基本交互

56、事件n键盘手机的事件处理很简单，就是键盘手机的事件处理很简单，就是keydown、keypress、keyup，这与桌面一致。，这与桌面一致。n而触摸屏手机则不同，如而触摸屏手机则不同，如ondbclick和和onmousewheel事件等都不适用于手机。事件等都不适用于手机。n触摸屏手机没有触摸屏手机没有focus和和blur事件，而都支持事件，而都支持click事件。大多数也支持下面几个连续事件：事件。大多数也支持下面几个连续事件：mouseover、mousemove、mousedown、mouseup、mouseout7.3.2 关于软键盘事件关于软键盘事件n对于触摸屏，一般都是使用软

57、键盘，其出发的对于触摸屏，一般都是使用软键盘，其出发的时间应由时间应由change监听，软键盘也有监听，软键盘也有keydown、keypress、keyup事件。事件。n但若按按键时间长或连续按键会出现另一个字符，但若按按键时间长或连续按键会出现另一个字符，这些只有被写到输入框时才有办法捕捉到。这些只有被写到输入框时才有办法捕捉到。7.3.3 感知手机握持方向和感知手机握持方向和orientationchange事件事件niPhone和和Android支持支持orientationchange事事件，在手机旋转时会触发，一般可以通过其判件，在手机旋转时会触发，一般可以通过其判断手机握持方向。断手机握持方向。n下面是一个通用方法，根据几个特定属性的比下面是一个