Web技术教程第五章-javascript与HTML.pptVIP

第五章 JavaScript与HTML 主要内容： 1 JavaScript的执行环境 2 文档对象模型 3 在 JavaScript 中访问元素 4 事件与事件处理 5 navigator 对象 1 JavaScript的执行环境 浏览器在窗口上显示 HTML 文档，显示文档的窗口是与JavaScript 的 Windows 对象相对应的。 Window 对象为 JavaScript 脚本提供了一个最大的封闭引用环境。 JavaScript 的 Document 对象描述所显示的 HTML 文档。每个Window 对象都有一个名为 document 的属性，它是对 Document对象的引用。 1 JavaScript的执行环境 每个 Document 对象都有一个 forms 数组，数组中的每个元素用于描述文档中的表单。 forms 数组的每个元素都有一个 elements 属性数组，包含了描述HTML 表单元素的对象，如按钮和菜单等。 2 文档对象模型 DOM（Document Object Model,文档对象模型）是一种应用程序编程接口（API），定义了 HTML 文档和应用程序之间的接口。 DOM 在多种编程语言环境中使用，它是一种抽象模型。每种实现 DOM 的语言(比如JavaScript)必须定义一个针对该接口的绑定。 通过 DOM，用户可以通过JavaScript语言编写代码来创建文档，遍历整个文档结构，以及修改、添加或者删除文档元素或者元素中的内容。 2 文档对象模型 在 JavaScript 对 DOM 的绑定中，HTML 元素表示为对象，而元素特性表示为属性。例如，下面的元素可以表示为一个包含两个属性的对象，这两个属性分别为 type 和 name，相应的属性值分别为 text 和 address。 input type = “text” name = “address” 在绝大部分情况下，JavaScript 中的属性名称与 HTML 中对应的属性名称是一致的。 参见清单5.1 3 在 JavaScript 中访问元素 方法1:使用Document对象 使用 Document 对象的 forms 数组（多个表单）和 elements （表单中的控件或者组件）数组，而 Document 对象是通过 Window 对象的 document 属性来引用的。例如： html head title Access to form elements /title /head body form action = “ ” input type = “button” name = “turnItOn” / /form /body /html 3 在 JavaScript 中访问元素 方法1:使用Document对象 采用 forms 数组和 elements 数组形式进行描述，按钮的 DOM 地址则可表示为如下格式： document.forms[0].elements[0] 缺点： DOM 地址是通过文档中的元素位置定义的，而这些位置可能会发生变化，也就是说，如果在表单的 turnItOn 按钮之前再添加一个新按钮，上面代码中的 DOM 地址就是错误的。 3 在 JavaScript 中访问元素 方法2:使用HTML元素名称 要使用这种方法，需要定位的元素及包含它的元素都必须包含 name特性。例如如下文档： html head title Access to form elements /title /head body form name = “myForm” action = “” input type = “button” name = “turnItOn” / /form /body /html 采用 name 特性表示的按钮的 DOM 地址格式如下所示： document.myForm.turnItOn； 3 在 JavaScript 中访问元素 方法3:使用getElementById 利用 JavaScript 方法的 gerElementById，这是在 DOM 1 中定义的。由于不管元素在文档中嵌套层次有多深，该元素的标识符（id）在文档中都是独一无二的，因此，这种方式是可行的。 例如，如果上例中按钮的id特性设定为 turnItOn，那么下面的代码可以表示这个按钮元素的 DOM 地址： document.getElementById(“turnItOn”)； 方法getElementById 的参数可以为表