TP04 DOM高级编程 ACCP 6.0 S2-4-使用JavaScript增强交互效果 PPT课件.ppt

练习-订单的修改2-1 训练要点 使用rowIndex和cells访问当前单元格 使用innerHTML改变数量显示在文本框中或单元格内 使用节点（firstChild、lastChild）访问单元格中的按钮或文本框 使用setAttribute改变动态改变事件调用的函数实现表格的修改订单功能 点击修改按钮修改订单，点击确定按钮修改生效 需求说明 可以增加定单 单击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮 单击“确定”按钮后，修改数量成功，并且数量显示在当前的单元格中，“确定”按钮变为“修改”按钮 练习-订单的修改2-2 实现思路 “修改”按钮函数editRow()、 “确定”按钮函数upRow()，两个函数传递的参数都是当前行的id号 函数editRow()：使用lastChild访问最后一个单元格中的“修改”按钮，并改变value值为“确定” 函数upRow()：使用firstChild和value获取当前数量值， 同样改变按钮上显示的文本和调用的函数 总结 W3C提供了DOM的哪三类标准？ Core DOM包括哪些常用的节点操作？方法分别是什么？ Core DOM、HTML DOM访问属性的方法分别是什么？ HTML DOM对象-table相关对象包括哪些？分别包含哪些常用的属性、方法？ 布置作业 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课时在此添加内容 * * * * * * DOM高级编程 第四章 回顾与作业点评 document对象提供了哪三种访问DOM元素的方法？ history、location对象分别有哪些常用方法？ 使用什么样式属性控制元素的隐藏/显示？ 预习检查 根据你的理解，什么是DOM？ W3C标准定义的DOM由哪三部分组成？ 标准节点操作包括哪些操作？ 本章任务 制作动态添加表格的特效 演示示例：练习3-修改订单 本章目标 使用getElement系列方法实现DOM元素的查找和定位 使用Core DOM标准操作实现节点的增删改查 使用HTML DOM特有操作实现HTML元素内容修改 回顾DOM模型的相关概念3-1 什么是DOM？ 文档对象模型（Document Object Model） 通过DOM可以动态改变文档内容 动态改变文档内容的原理 1、解析文档（如HTML）并生成DOM树 2、通过DOM标准接口+编程语言改变文档内容 演示示例：演示案例1-改变图片 回顾DOM模型的相关概念3-1 解析文档生成DOM树的过程 html head titleDOM节点/title /head body img src=images/fruit.jpg alt=图片 id=s1 / h1喜欢的水果/h1 pDOM应用/p /body /html 生成的DOM树结构是什么？ 换图，加属性节点 回顾DOM模型的相关概念3-1 DOM树中的节点类型和节点关系(换图) 文档节点 document 元素节点 文本 节点 ….. 属性 节点 父子 关系 同级 关系 回顾DOM模型的相关概念3-1 W3C规定的三类DOM标准接口（换图） Core DOM（核心DOM），适用于各种结构化文档 XML DOM（Java OOP学过），专用于XML文档 HTML DOM，专用于HTML文档 选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等 Core DOM的操作 查看节点 创建和增加节点 删除和替换节点 查看节点 访问指定节点的方法 getElementById( ) getElementsByName( ) getElementsByTagName( ) 查看/修改属性节点 getAttribute(属性名) setAttribute(属性名,属性值) 演示示例：访问节点属性的值 查看节点3-1 访问指定节点的方法 getElementById( ) ：返回一个节点对象 getElementsByName( )：返回多个（节点数组） getElementsByTagName( ) ：返回多个（节点数组） 查看/修改属性节点 getAttribute(属性名) setAttribute(属性名,属性值) 演示示例：访问节点属性的值 查看节点3-2 根据层次关系查找节点 parentNode firstChild lastChild 如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？ table tr