JavaScript语言简介及设计教程.ppt

文档对象模型-1Document Object Model DOM 0 是所有支持JavaScript的浏览器都支持的 DOM1是在1998年发布，是w3c的第一个DOM规范。 DOM 2是DOM发布的必威体育精装版版本 制定了样式表对象模型 包含了文档遍历方面的内容，提供了完整又全面的文档模型 FX2能完整地支持DOM2，但DOM2 中一部分重要内容没有得到IE7的支持 DOM 3 是还在制定中 文档对象模型-2Document Object Model DOM是一种应用程序编程接口，是一种抽象模型。每种实现DOM的语言必须要定义一个针对该接口的绑定 实际的DOM规范包含了一组接口，每种接口对应着一个文档树节点的类型 在JavaScript 对DOM的绑定中, XHTML 元素作为对象，元素的属性作为对象的属性 例, input type = text name = address Input是一个对象，有两个属性： type 和 name, 属性值分别是：“text” 和 address DOM结构 在DOM 中的Documents 是树形结构的 html xmlns = /1999/xhtml head title A simple document /title /head body table tr thBreakfast/th td0/td td1/td /tr tr thLunch/th td1/td td0/td /tr /table /body /html 在JavaScript 中访问元素-1 1. DOM 地址的形式访问 form action = input type = button name = pushMe /form 访问表单中的元素 document.forms[0].elements[0] 问题：如果地址发生了变化，在pushMe前再增加一个按钮，那前面的访问方式还能访问到pushMe吗？ 在JavaScript 中访问元素-2 2. 使用元素名称进行定位 需要定位的元素及其包含元素之内的所有元素（除body外）都具有name属性 Example: form name = myForm action = input type = button name = pushMe /form document.myForm.pushMe 问题: XHTML 1.1 标准中不允许form元素有name属性 注：这只是有效性问题，浏览器还是可以运行的 在JavaScript 中访问元素-3 3. 用getElementById 方法访问(在DOM 1定义) form action = input type = button id = pushMe /form document.getElementById(pushMe) Form元素常常有id和name属性，可以被设置为同一个值 在JavaScript 中访问元素-4 Checkboxes和 radio button 都是数组的形式，数组名是他们的id或name属性值 form id = toppingGroup input type = checkbox name = toppings value = olives / ... input type = checkbox name = toppings value = tomatoes / /form ... var numChecked = 0; var dom = document.getElementById(toppingGroup); for (index = 0; index dom.toppings.length; index++) if (dom.toppings[index].checked] numChecked++; 事件和事件处理 事件是检测浏览器和浏览器用户的动作，并为这些动作提供相应的计算，计算是利用一种特殊形式的编程技术，即事件驱动编程 事件处理器是隐式执行的一种程序，以响应发生的相应事件 将事件处理程序连接到事件的过程叫注册，注册方式： 一种是为标签的属性赋值 另一种是将处理程序地址指派给对象属性 不要在事件处理器中使用document.write，会出现意