TP04

DOM高级编程第四章回顾与作业点评document对象提供了哪三种访问DOM元素的方法？history、location对象分别有哪些常用方法？使用什么样式属性控制元素的隐藏/显示？预习检查根据你的理解，什么是DOM？W3C标准定义的DOM由哪三部分组成？标准节点操作包括哪些操作？本章任务制作动态添加表格的特效演示示例：练习3-修改订单本章目标使用getElement系列方法实现DOM元素的查找和定位使用CoreDOM标准操作实现节点的增删改查使用HTMLDOM特有操作实现HTML元素内容修改回顾DOM模型的相关概念3-1什么是DOM？文档对象模型（DocumentObjectModel）通过DOM可以动态改变文档内容动态改变文档内容的原理1、解析文档（如HTML）并生成DOM树2、通过DOM标准接口+编程语言改变文档内容演示示例：演示案例1-改变图片回顾DOM模型的相关概念3-1解析文档生成DOM树的过程htmlheadtitleDOM节点/title/headbodyimgsrc=images/fruit.jpgalt=图片id=s1/h1喜欢的水果/h1pDOM应用/p/body/html生成的DOM树结构是什么？文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用换图，加属性节点回顾DOM模型的相关概念3-1DOM树中的节点类型和节点关系(换图)文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用文档节点document元素节点文本节点…..属性节点父子关系同级关系回顾DOM模型的相关概念3-1W3C规定的三类DOM标准接口（换图）CoreDOM（核心DOM），适用于各种结构化文档XMLDOM（JavaOOP学过），专用于XML文档HTMLDOM，专用于HTML文档文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等CoreDOM的操作查看节点创建和增加节点删除和替换节点查看节点访问指定节点的方法getElementById()getElementsByName()getElementsByTagName()查看/修改属性节点getAttribute(属性名)setAttribute(属性名,属性值)演示示例：访问节点属性的值查看节点3-1访问指定节点的方法getElementById()：返回一个节点对象getElementsByName()：返回多个（节点数组）getElementsByTagName()：返回多个（节点数组）查看/修改属性节点getAttribute(属性名)setAttribute(属性名,属性值)演示示例：访问节点属性的值查看节点3-2根据层次关系查找节点parentNodefirstChildlastChild如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？tabletrtd东方贺/tdtd语文/tdtd95/td/tr/table该节点的parentNode？该节点的firstChild？lastChild？查看节点3-3演示示例：根据层次关系查找节点functionchecks(){varobjTable=document.getElementById(myTable);varstrHtml=objTable.lastChild.firstChild.firstChild.innerHTML;alert(strHtml);}/script……tableid=myTablethead……/theadtbodytrtd欧阳兰/td……/tr/tbody/table该代码指哪个节点？thead和tbody标签用于表格数据的逻辑分组，W3C不推荐，但写脚本访问表格数据时常用它们。创建和增加节点functionnewNode(){varoldNode=document.getElementById(sixty1);varimage=document.createElement(img);image.setAttribute(src,images/newimg.jpg);document.body.insertBefore(image,oldNode);}functioncopyNode(){varimage=document.getElementById(sixty1);varcopyImage=image.cloneNode(false);document.body.appendChild(copyImage);}创建和增加节点的方法createElement（）：创建节点appendChild（）：末尾追加方式插入节点insertBefore（）：在指定节点前插入新节点cloneNode（）：克隆节点演示示例：创建节点ID属性：sixty1先创建个节点，然后设置属性，最后插入节点克隆图片节点，然后追加插入到文档删除和替换节点functiondelNode(){vardNode=document.getElementById(sixty1);document.body.removeChild(dNode);}functionrepNode(){varoldimage=document.getElementById(sixty2);varnewimage=document.createElement(img);newimage.setAttribute(src,images/replace.jpg);document.body.replaceChild(newimage,oldimage);}删除和替换节点的方法removeChild（）：删除节点replaceChild()：替换节点演示示例：删除节点ID属性：sixty1先创建一个节点，然后替换原节点练习——操作表格需求说明实现如下的表格操作功能完成时间：25分钟修改标题行样式为：居中显示、字体加粗单元格背景颜色变为“#ccc”共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解HTMLDOM的特有对象和操作2-1什么是HTMLDOM对象HTML文档中的每个节点都是DOM对象，每类对象都有1套属性、方法。最常用的是table表格和各类表单form元素对象HTMLDOM的特有对象和操作2-2HTMLDOM对象的属性访问functionchange(){varimgs=document.getElementById(s1);imgs.src=images/grape.jpg;}functionshow(){varhText=document.getElementById(s1).alt;alert(图片的alt是：+hText)}/script演示示例：使用HTMLDOM对象的属性访问不再使用setAttribute（）/getAttribute（）方法简化为对象名.属性值进行读取或修改HTMLDOM对象-table对象思路分析1、使用CoreDOM标准操作获取表格对象2、使用HTMLDOM的table相关对象的属性、方法、事件操作表格使用HTMLDOM如何实现？表格相关对象4-1表格相关对象table表格对象tableRow表格行对象tableCell单元格对象表格相关对象4-2table表格对象类别名称描述属性rows[]返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行……代码片段……tableObject.rows[]tableObject.insertRow(index)deleteRow(index)……用法示例代码……代码片段……tableRowObject.insertCell(index)tableRowObject.deleteRow(index)……表格相关对象4-3tableRow表格行对象用法示例类别名称描述属性cells[]返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的td标签deleteCell()删除行中指定的单元格……代码片段……cell2.innerHTML=“改变单元格的HTML内容;cell2.align=center;……表格相关对象4-4tableCell单元格行对象用法示例类别名称描述属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性用table对象重新实现表格操作2-1functionaddRow(){varnewRow=document.getElementById(myTable).insertRow(2);varcol1=newRow.insertCell(0);col1.innerHTML=幸福从天而降;varcol2=newRow.insertCell(1);col2.innerHTML=¥18.5;col2.align=center;}实现“增加一行”的操作增加一个行对象，然后插入单元格，最后设置单元格内容演示示例：使用HTMLDOM操作表格用table对象重新实现表格操作functiondelRow(){document.getElementById(myTable).deleteRow(1);}functionupdateRow(){varuRow=document.getElementById(myTable).rows[0];uRow.className=title;}实现“删除第2行”的操作实现“修改标题”的操作使用class样式属性直接修改标题样式演示示例：使用HTMLDOM操作表格练习-订单的删除和增加2-1训练要点使用insertRow()插入行使用deleteRow()删除行使用insertCell()插入单元格使用rowIndex判断当前行在表格中的位置需求说明实现订单表格的删除和增加练习-订单的删除和增加2-2实现思路和关键代码使用集合rows和属性length计算当前表格中的行数使用tableRow对象插入新行时，设置行id属性，方便后续删除varaddTable=document.getElementById(order);varrow_index=addTable.rows.length-1;索引从0开始，所以总长度-1newRow.id=row+row_index;插入ID号，产生效果为：trid=“row1”，方便后续传递行号参数给删除函数delRow(rowId)共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解练习-订单的修改2-1训练要点使用rowIndex和cells访问当前单元格使用innerHTML改变数量显示在文本框中或单元格内使用节点（firstChild、lastChild）访问单元格中的按钮或文本框使用setAttribute改变动态改变事件调用的函数实现表格的修改订单功能点击修改按钮修改订单，点击确定按钮修改生效需求说明可以增加定单单击“修改”按钮时，数量改为文本框显示，可以改变数