第三章 文档对象模型(DOM) JavaScript及网页特效制作课件.pptVIP

第三章 文档对象模型(DOM) 本章案例 本章目标 预习检查 什么是DOM DOM是一个表达XML文档的标准(由W3C制定的)。它未必是最快的方式，也未必是最轻量级的或者最容易使用的，但的确是应用最广泛的，大部分web开发的编程语言如Java、PHP、Python、Ruby和JavaScript等都提供了DOM的实现。DOM给开发者提供了一种定位XML层级结构的直观方法。 主要包括： 核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等） 与数据类型相关的核心对象（String、Array、Math、Date 等数据类型） 浏览器对象（window、location、history、navigator 等） 文档对象（document、images、form 等） DOM对象的属性和方法 DOM---一棵枝繁叶茂的“节点树” 所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合在，W3C DOM 中，每个容器、独立的元素或文本块都被看成一个节点，节点是DOM的基本构建块。 节点类型 DOM 中定义了HTML 文档中6 种相关节点类型。 DOM对象的属性 属性一般定义对象的当前设置，反映对象的可见属性。 DOM对象的属性 p id=p1Welcome toB DOM /BWorld! /p 以上代码可用下图表示 遍历DOM 对象方法 对象方法是脚本给该对象的命令，可以有返回值，也可没有，且不是每个对象都有方法定义。DOM 中定义了操作节点的一系列行之有效的方法，让Web 应用程序开发者真正做到随心所欲地操作HTML 文档中各个元素对象。 常用对象方法： getElementById() getElementsByTagName() getElementsByName() getAttribute() 对象方法 getElementById()方法 该方法返回与指定id 属性值的元素节点相对应的对象，对应着文档里一个特定的元素节点（元素对象）。该方法是与document 对象相关联的函数，其语法如下： document.getElementById(id) 对象方法 该方法返回文档里指定标签tag 的元素对象数组，与getElementById( )方法返回对象不同，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。 document. getElementsByTagName(tag) 对象方法 getElementByName()方法 旧版本的HTML 文档更习惯于对form、select等元素节点使用name 属性。此时需要用到文档对象的getElementsByName( )方法来定位。该方法返回指定名称name 的节点序列。 document. getElementsByName(name) 对象方法 getAttribute()方法 该方法返回目标对象指定属性名称的某个属性值。语法如下： object.getAttribute(attribute) 课堂练习 遍历下面的html文档，输出所有的复选框的值。 附加节点 JavaScript常用事件 Html事件 JavaScript常用事件 JavaScript浏览器事件 onload : 浏览器载入文档事件 onunload : 关闭该文档事件 onblur : 浏览器失去焦点事件 onfocus : 获得焦点事件 JavaScript事件处理 HTML 文档将元素的常用事件,如onclick、onmouseover 等,当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。 JavaScript事件处理 JavaScript事件处理 其他书写方式 JavaScript事件处理 其他书写方式 JavaScript事件应用-按钮单击事件 分析需要使用的事件，按钮单击事件为onclick 根据需要决定事件的绑定方式，采用显式声明函数后手工绑定（所有按钮需要处理的问题完全相同，均是弹出对话框显示当前按钮的文本，可以采用绑定同一个函数的方式）。 编写代码。 JavaScript事件应用-按钮单击事件 调用方式： input type=button value=按钮1 onclick=showValue(this); / input type=“button” value=“按钮2” onclick=“showValue(this);” / input type=button value=按钮3 onclick=showValue(this); / 课堂练