2、使用javascript增强交互效果chapter04-dom编程

1、 DOM高级编程第四章回顾与作业点评document对象提供了哪三种访问DOM元素的方法？history、location对象分别有哪些常用方法？使用什么样式属性控制元素的隐藏/显示？预习检查根据你的理解，什么是DOM？W3C标准定义的DOM由哪三部分组成？标准节点操作包括哪些操作？本章任务制作动态添加表格的特效演示示例：练习3-修改订单本章目标使用getElement系列方法实现DOM元素的查找和定位使用Core DOM标准操作实现节点的增删改查使用HTML DOM特有操作实现HTML元素内容修改回顾DOM模型的相关概念3-1什么是DOM？文档对象模型（Document Object Mod

2、el）通过DOM可以动态改变文档内容动态改变文档内容的原理1、解析文档（如HTML）并生成DOM树2、通过DOM标准接口+编程语言改变文档内容演示示例：演示案例1-改变图片回顾DOM模型的相关概念3-1解析文档生成DOM树的过程DOM节点 喜欢的水果 DOM应用生成的DOM树结构是什么？换图，加属性节点回顾DOM模型的相关概念3-1DOM树中的节点类型和节点关系(换图)文档节点document元素节点文本节点.属性节点父子关系同级关系回顾DOM模型的相关概念3-1W3C规定的三类DOM标准接口（换图）Core DOM（核心DOM），适用于各种结构化文档XML DOM（Java OOP学过），专

3、用于XML文档HTML DOM，专用于HTML文档选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等Core DOM的操作查看节点创建和增加节点删除和替换节点查看节点访问指定节点的方法getElementById( ) getElementsByName( ) getElementsByTagName( ) 查看/修改属性节点getAttribute(属性名) setAttribute(属性名,属性值) 演示示例：访问节点属性的值查看节点3-1访问指定节点的方法getElementById( ) ：返回一个节点对象getElementsByName(

4、)：返回多个（节点数组）getElementsByTagName( ) ：返回多个（节点数组）查看/修改属性节点getAttribute(属性名) setAttribute(属性名,属性值) 演示示例：访问节点属性的值查看节点3-2根据层次关系查找节点 parentNode firstChild lastChild 如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？ 东方贺 语文 95 该节点的parentNode ？该节点的firstChild ？lastChild ？查看节点3-3演示示例：根据层次关系查找节点function checks()var o

5、bjTable=document.getElementById(myTable);var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;alert(strHtml); 欧阳兰 该代码指哪个节点 ？thead和tbody标签用于表格数据的逻辑分组，W3C不推荐，但写脚本访问表格数据时常用它们。创建和增加节点 function newNode() var oldNode=document.getElementById(sixty1); var image=document.createElement(img); image

6、.setAttribute(src,images/newimg.jpg); document.body.insertBefore(image,oldNode); function copyNode() var image=document.getElementById(sixty1); var copyImage=image.cloneNode(false); document.body.appendChild(copyImage); 创建和增加节点 的方法createElement（）：创建节点 appendChild（）：末尾追加方式插入节点insertBefore（）：在指定节点前插入新

7、节点cloneNode（）：克隆节点演示示例：创建节点ID属性：sixty1先创建个节点，然后设置属性，最后插入节点克隆图片节点，然后追加插入到文档删除和替换节点 function delNode() var dNode=document.getElementById(sixty1); document.body.removeChild(dNode); function repNode() var oldimage=document.getElementById(sixty2); var newimage=document.createElement(img); newimage.setAtt

8、ribute(src,images/replace.jpg); document.body.replaceChild(newimage,oldimage); 删除和替换节点的方法removeChild（）：删除节点 replaceChild( ) ：替换节点演示示例：删除节点ID属性：sixty1先创建一个节点，然后替换原节点练习操作表格 需求说明实现如下的表格操作功能完成时间：25分钟 修改标题行样式为：居中显示、字体加粗单元格背景颜色变为“#ccc”共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解HTML DOM的特有对象和操作2-1 什么是HTML DOM对象 HTML

9、文档中的每个节点都是DOM对象，每类对象都有1套属性、方法。最常用的是表格和各类表单元素对象HTML DOM的特有对象和操作2-2 HTML DOM对象 的属性访问function change() var imgs=document.getElementById(s1); imgs.src=images/grape.jpg;function show() var hText=document.getElementById(s1).alt; alert(图片的alt是：+hText)演示示例：使用HTMLDOM对象的属性访问不再使用setAttribute（）/ getAttribute（）方

10、法简化为对象名.属性值进行读取或修改HTML DOM对象-table对象思路分析1、使用Core DOM标准操作获取表格对象2、使用HTML DOM的table相关对象的属性、方法、事件操作表格使用HTML DOM如何实现？表格相关对象4-1表格相关对象table表格对象 tableRow表格行对象 tableCeil单元格对象 表格相关对象4-2table表格对象类别名称描述属性rows返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行代码片段tableObject.rows tableObject.insertRow(inde

11、x)deleteRow(index)用法示例代码 代码片段tableRowObject.insertCell(index) tableRowObject.deleteRow(index)表格相关对象4-3tableRow表格行对象用法示例 类别名称描述属性cells返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的标签deleteCell()删除行中指定的单元格代码片段cell2.innerHTML=“改变单元格的HTML内容;cell2.align=center;表格相关对象4-4tableCell单元格行对象用法示

12、例 类别名称描述属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性用table对象重新实现表格操作2-1function addRow()var newRow=document.getElementById(myTable).insertRow(2);var col1=newRow.insertCell(0);col1.innerHTML=幸福从天而降;var col2=newRow.insertCell(1);col2.in

13、nerHTML=18.5;col2.align=center; 实现“增加一行”的操作 增加一个行对象，然后插入单元格，最后设置单元格 内容演示示例：使用HTML DOM操作表格用table对象重新实现表格操作function delRow() document.getElementById(myTable).deleteRow(1); function updateRow() var uRow=document.getElementById(myTable).rows0; uRow.className=title;实现“删除第2行”的操作 实现“修改标题”的操作使用class样式属性直接修改

14、标题样式演示示例：使用HTML DOM操作表格练习-订单的删除和增加2-1训练要点使用insertRow()插入行使用deleteRow()删除行使用insertCell()插入单元格使用rowIndex判断当前行在表格中的位置需求说明实现订单表格的删除和增加练习-订单的删除和增加2-2实现思路和关键代码使用集合rows和属性length计算当前表格中的行数 使用tableRow对象插入新行时，设置行id属性，方便后续删除 var addTable=document.getElementById(order); var row_index=addTable.rows.length-1; 索引从

15、0开始，所以总长度-1 newRow.id=row+row_index; 插入ID号，产生效果为：，方便后续传递行号参数给删除函数delRow(rowId)共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解练习-订单的修改2-1训练要点使用rowIndex和cells访问当前单元格使用innerHTML改变数量显示在文本框中或单元格内使用节点（firstChild、lastChild）访问单元格中的按钮或文本框使用setAttribute改变动态改变事件调用的函数实现表格的修改订单功能点击修改按钮修改订单，点击确定按钮修改生效需求说明可以增加定单单击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮单击“确定”按钮后，修改数量成功，并且数量显示在当前的单元格中，“确定”按钮变为“修改”按钮练习-订单的修改2-2实现思路 “修改”按钮函数editRow()、 “确定”按钮函数upRow()，两个函数传递的参数都是当前行的id号 函数editRow()：使用lastChild访问最后一个单元格中的“修改”按钮，并改变value值为“