第5章-DOM编程

使用getElement系列方法实现DOM元素的查找和定位使用CoreDOM标准操作实现节点的增删改查使用HTMLDOM特有操作实现HTML元素内容修改010203本章任务任务1：画出页面的文档节点结构图任务2：使用CoreDOM方式动态添加表格任务3：使用HTMLDOM方式动态添加任务描述根据下面一段html代码，画出该html页面的DOM结构图。htmlheadtitleDOM节点/title/headbodyimgsrc=images/fruit.jpgalt=图片id=s1/h1喜欢的水果/h1pDOM应用/p/body/html任务分析根据DOM模型，HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。实现思路•了解DOM模型基本概念•了解DOM模型的组成•了解DOM模型的节点概念什么是DOM？•文档对象模型（DocumentObjectModel）•通过DOM可以动态改变文档内容动态改变文档内容的原理•解析文档（如HTML）并生成DOM树•通过DOM标准接口+编程语言改变文档内容DOM模型的相关概念解析文档生成DOM树的过程htmlheadtitleDOM节点/title/headbodyimgsrc=images/fruit.jpgalt=图片id=s1/h1喜欢的水果/h1pDOM应用/p/body/html生成的DOM树结构是什么？文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用DOM模型的相关概念DOM树中的节点类型和节点关系文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用文档节点document元素节点文本节点…..属性节点父子关系同级关系DOM模型的相关概念W3C规定的三类DOM标准接口•CoreDOM（核心DOM），适用于各种结构化文档•XMLDOM，专用于XML文档•HTMLDOM，专用于HTML文档文档：document根节点：htmlheadbodytitle文本：DOM节点ph1img文本：喜欢的水果文本：DOM应用选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等任务实现任务描述单击“增加一行”按钮，可以在书名为“60个瞬间”的所在行前插入一行，新插入行的价格一列居中显示。单击“删除第2行”按钮可把书名为“看得见风景的房间”一行删除。单击“修改标题样式”按钮，可以设置标题行居中显示，字体加粗，单元格的背景颜色变为“#cccccc”。单击“复制最后一行”按钮，复制书名为“60个瞬间”所在行，并且追加到表格的末尾。演示任务2：使用CoreDOM方式动态添加表格任务分析实现思路1.通过查找节点方式，查到相应按钮2.单击增加行按钮时，创建新行，将新行插入到页面3.单击删除行按钮时，将对应行删除4.单击修改标题按钮时，设置标题行的样式属性•掌握CoreDOM查看和设置节点属性方法•掌握CoreDOM创建节点方法•掌握CoreDOM删除节点方法查看节点•getElementById()：返回一个节点对象•getElementsByName()：返回多个（节点数组）•getElementsByTagName()：返回多个（节点数组）（1）访问指定节点的方法•getAttribute(“属性名”)：用来获取属性的值•setAttribute(“属性名”,“属性值”)：用来设置属性的值（2）查看/修改属性节点DOM节点属性查看节点functionhh(){varhText=document.getElementById(fruit).getAttribute(src);alert(图片的路径是：+hText)}functioncheck(){varfavor=document.getElementsByName(enjoy);varlike=你喜欢的水果是：;for(vari=0;ifavor.length;i++){if(favor[i].checked==true){like+=\n+favor[i].getAttribute(value);}}alert(like);}functionchange(){varimgs=document.getElementsByTagName(img);imgs[0].setAttribute(src，images/grape.jpg);}示例访问指定节点的方法多学一招querySelector()：返回文档中匹配指定CSS选择器的一个元素//获取文档中id=demo的元素示例：document.querySelector(“#demo”);querySelectorAll():返回匹配的所有元素//获取文档中class=example的所有元素:示例：document.querySelectorAll(.example);querySelector()方法仅仅返回匹配指定选择器的第一个元素注意创建和增加节点的方法•createElement（）：创建节点•appendChild（）：末尾追加方式插入节点•insertBefore（）：在指定节点前插入新节点•cloneNode（）：克隆节点创建和增加节点functionnewNode(){varoldNode=document.getElementById(sixty1);varimage=document.createElement(img);image.setAttribute(src,images/newimg.jpg);image.parentNode.insertBefore(image,oldNode);}functioncopyNode(){varimage=document.getElementById(sixty1);varcopyImage=image.cloneNode(false);image.parentNode.appendChild(copyImage);}先创建个节点，然后设置属性，最后插入节点克隆图片节点，然后追加插入到文档id属性：sixty1删除和替换节点的方法•removeChild（）：删除节点•replaceChild()：替换节点删除和替换节点functiondelNode(){vardNode=document.getElementById(sixty1);dNode.parentNode.removeChild(dNode);}functionrepNode(){varoldimage=document.getElementById(sixty2);varnewimage=document.createElement(img);newimage.setAttribute(src,images/replace.jpg);oldimage.parentNode.replaceChild(newimage,oldimage);}先创建一个节点，然后替换原节点id属性：sixty1任务实现functionaddRow(){varfRow=document.getElementById(row3);varnewRow=document.createElement(tr);//创建行节点varcol1=document.createElement(td);//创建单元格节点col1.innerHTML=幸福从天而降;//为单元格添加文本varcol2=document.createElement(td);col2.innerHTML=¥18.50;col2.setAttribute(align,center);newRow.appendChild(col1);//把单元格添加到行节点中newRow.appendChild(col2);//把行节点添加到表格末尾document.getElementById(row3).parentNode.insertBefore(newRow,fRow);}任务实现functionupdateRow(){varuRow=document.getElementById(row1);//标题行设置为字体加粗、文本居中显示，背景颜色为灰色uRow.setAttribute(style,font-weight:bold;text-align:center;background-color:#cccccc;);}functiondelRow(){vardRow=document.getElementById(row2);//访问被删除的行dRow.parentNode.removeChild(dRow);//删除行}任务实现functioncopyRow(){varoldRow=document.getElementById(row3);//访问复制的行varnewRow=oldRow.cloneNode(true);//复制指定的行及子节点document.getElementById(myTable).appendChild(newRow);//在指定节点的末尾添加行}练一练在页面中输入你的评论，单击“评论”按钮，如果留言区没有评论，则直接添加评论，如果留言区有评论，则将新的评论添加在留言区的最前面，如图所示。练习任务描述单击“增加订单”按钮插入一行订单，当多次单击“增加订单”按钮时，可增加多行。单击“删除”按钮，可删除当前订单。演示任务3：使用HTMLDOM方式动态添加表格任务分析实现思路1.使用集合rows和属性length计算当前表格中的行数2.使用TableRow对象的属性id为当前插入的信行设置id3.使用insertCell()插入单元格，然后使用innerHTML为单元格添加内容4.删除当前行采用传递参数的方法，传递的参数为当前行的id5.使用rowIndex计算当前行在表格中的位置，然后使用deleteRow()删除当前行•掌握HTMLDOM操作方法HTMLDOM对象的属性访问functionchange(){varimgs=document.getElementById(s1);imgs.src=images/grape.jpg;}functionshow(){varhText=document.getElementById(s1).alt;alert(图片的alt是：+hText)}不再使用setAttribute（）/getAttribute（）方法简化为对象名.属性值进行读取或修改HTMLDOM的特有对象和操作思路分析1、使用CoreDOM标准操作获取表格对象2、使用HTMLDOM的table相关对象的属性、方法、事件操作表格HTMLDOM对象-table对象使用HTMLDOM如何实现？tableCell单元格对象表格相关对象表格相关对象table表格对象tableRow表格行对象类别名称描述属性rows[]返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行……代码片段……tableObject.rows[]tableObject.insertRow(index)deleteRow(index)表格相关对象table表格对象示例……代码片段……tableRowObject.insertCell(index)tableRowObject.deleteRow(index)……表格相关对象table