版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目七商品列表——DOM对象如图7.1所示，页面展示了一个服装商品的列表，在该列表中，效果及功能有：1、表格行背景色采用红灰隔行变色显示，当鼠标悬停在某一行上时，该行背景色变为黄色；当鼠标离开该行时，背景色还原为原来的颜色。2、当鼠标悬停在服装图片上时，跟随鼠标显示该件服装的大图，并且以提示信息的方式显示该款服装目前的销量；当鼠标离开服装图片时，服装大图消失。3、当点击“按照销量排序”按钮时，列表中的行将按照服装销量的多少升序排列；再次点击该按钮，列表中的行将按照服装销量的多少降序排列。但是每一行中的序号不变。项目情境图7.1商品列表掌握利用DOM获取文档节点的方法。掌握利用DOM操作文档节点的方法。掌握利用DOM获取或设置文档节点样式的方法。掌握利用DOM操作表格的方法。学习目标如图7.2所示，页面上有一个文本区域框，用户在其中输入评论文字，点击“发表评论”按钮，该评论文字以列表的形式显示在按钮下面，并自动添加发表日期和“删除”超级链接，后发表的评论文字排在评论列表的上部。点击某条评论文字行后面的“删除”链接，该条评论文字被删除。当鼠标悬停在一条评论行上时，该行背景变为黄色，鼠标离开，背景色还原为白色。。任务1评论管理图7.2评论管理1、DOM对象DOM是DocumentObjectModel(文档对象模型)的首字母缩写，它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。DOM是以层次结构组织的节点或信息片断的集合，它是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。浏览器对象是一个分层的结构，我们可以把一个网页文档看成一棵倒立的树。如图7.3所示。【相关知识】图7.3文档树型结构图7.3对应的HTML文档<html><head> <title>列表</title></head><body><p>以下是列表</p><ulid="ul1"><lititle="one">1</li><lititle="two">2</li><lititle="three">3</li></ul></body></html>【相关知识】图7.3文档树型结构2、节点类型在DOM中，最常用的节点类型有三个，分别是元素节点（elementnode）、属性节点（attributenode）和文本节点（textnode）。另外还有注释节点（commentsnode）和文档节点（documentnode）。可以通过节点的nodeType属性的值来判断节点的类型，nodeType的值及其含义如表所示。【相关知识】节点类型nodeType属性值元素节点1属性节点2文本节点3注释节点8文档节点91）元素节点在前面DOM树对应的HTML文档中，<body>、<p>、<ul>等标签元素都是元素节点。元素节点可以包含其他元素，例如<ul>节点包含了3个<li>节点。2）属性节点有些元素节点中会有属性，这些属性就是属性节点。因为属性总是被放在起始标签中，所以属性节点总是被包含在元素节点中。比如，在前面DOM树对应的HTML文档中，<li>节点是一个元素节点，其中有属性title，例如title="one"就是一个属性节点。3）文本节点在上述文档中，元素节点<p>中包含了文字“以下是列表”，这段文字就是一个文本节点。一般来说，在XHTML文档中，文本节点总是被包含在元素节点起始标签和结束标签中间。但是在IE9及以上版本浏览器、FF火狐浏览器中，会把两个元素节点之间的空格或者换行也当成一个文本节点。比如，在前面DOM树对应的HTML文档中，<ul>下的子节点在这些浏览器中识别的个数不是3，而是7。【相关知识】3、获取元素节点1）getElementById()方法此方法返回对拥有指定ID的第一个对象的引用，其语法为：document.getElementById(“对象的id属性值”)2）getElementsByName()方法此方法返回一个对象数组，每个对象对应着文档中有着给定名称的一个元素，其语法为：document.getElementsByName(“对象的name属性值”)3）getElementsByTagName()方法此方法返回一个对象数组，每个对象分别对应着文档中有着给定标签的一个元素，语法为：document.getElementsByTagName("对象的标签名称")【相关知识】4、获取元素子节点1）childNodes属性该属性返回被选节点的子节点集合，其语法为：元素节点.childNodes需要注意的是，由于IE9及以上版本浏览器、FF火狐浏览器将一个元素节点下的空文本节点也当作一个子节点，所以在这些浏览器中会将这些空文本节点也包含在childNodes集合中。2）children属性该属性返回被选节点的子节点集合，其语法为：元素节点.children与childNodes不同的是，在IE9及以上版本浏览器、FF火狐浏览器中，children将忽略空文本节点，不把空文本节点也包含在children集合中。【相关知识】5、获取元素父节点利用parentNode属性可以返回被选节点的父节点，其语法为：元素节点.parentNode6、获取首尾子节点1）firstChild属性和lastChild属性firstChild属性可以返回被选节点的第一个子节点，其语法为：元素节点.firstChildlastChild属性可以返回被选节点的最后一个子节点，其语法为：元素节点.lastChild这两个属性在IE9及以上版本浏览器、FF火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，所以使用时应该注意。【相关知识】2）firstElementChild属性和lastElementChild属性firstElementChild属性可以返回被选节点的第一个子节点，其语法为：元素节点.firstElementChildlastElementChild属性可以返回被选节点的最后一个子节点，其语法为：元素节点.lastElementChild这两个属性只在IE9及以上版本浏览器、FF火狐浏览器中使用，IE9之前的版本不支持这两个属性。与firstChild、lastChild属性不同的是，这两个属性将忽略空文本节点。【相关知识】7、获取兄弟节点1）nextSibling属性和previousSibling属性nextSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextSiblingpreviousSibling属性可以返回与被选节点同级的前一个节点，其语法为：元素节点.previousSibling这两个属性在IE9及以上版本浏览器、FF火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，所以使用时应该注意。2）nextElementSibling属性和previousElementSibling属性nextElementSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextElementSibling【相关知识】2）nextElementSibling属性和previousElementSibling属性nextElementSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextElementSiblingpreviousElementSibling属性可以返回与被选节点同级的前一个节点，其语法为：元素节点.previousElementSiblin这两个属性只在IE9及以上版本浏览器、FF火狐浏览器中使用，IE9之前的版本不支持这两个属性。与nextSibling、previousSibling属性不同的是，这两个属性将忽略空文本节点。【相关知识】8、创建元素节点利用createElement()方法可以动态的创建一个元素节点，其语法为：document.createElement(“元素标签名”)9、添加元素节点利用createElement()方法创建的元素节点实际上还没有添加到页面文档中，还必须依靠添加元素节点的方法。1）appendChild()方法该方法在指定元素节点的最后一个子节点之后添加节点，如果指定元素节点没有子节点，则直接插入，其语法为：父元素节点.appendChild(要添加的子元素节点)2）insertBefore()方法该方法可在已有的子节点前插入一个新的子节点，其语法为：父元素节点.insertBefore(要添加的子元素节点,参考子节点)【相关知识】10、删除元素节点利用removeChild()方法可以在指定元素节点中删除一个子节点，其语法为：父元素节点.removeChild(要删除的子元素节点)【相关知识】1、在<body>标签内部输入以下代码，创建一个文本区域框，一个按钮，一个准备显示评论列表行的空项目列表。<body><textareaid="msgTextArea"cols="25"rows="5"></textarea><inputtype="button"id="msgBtn"value="发表评论"/><ulid="ul1"></ul></body>【任务实现】2、在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ functiongetMsgDate()//得到当前日期
{ vardate=newDate(); varyear=date.getFullYear(); varmonth=date.getMonth()+1; varday=date.getDay()+1; varmsgDate=year+"/"+month+"/"+day; returnmsgDate; } varul=document.getElementById("ul1"); varmsgBtn=document.getElementById("msgBtn"); varmsgTextArea=document.getElementById("msgTextArea"); msgBtn.onclick=function() { varnewLi=document.createElement("li"); vardelMsg="<ahref='javascript:;'id='delLink'>删除</a>" newLi.innerHTML=msgTextArea.value+"-----"+getMsgDate()+delMsg; varlis=document.getElementsByTagName("li");【任务实现】 if(ul.children.length==0)//添加新的评论
{ ul.appendChild(newLi); } else { ul.insertBefore(newLi,lis[0]); } vardelLink=document.getElementById("delLink"); delLink.onclick=function()//删除评论
{ ul.removeChild(this.parentNode); } for(i=0;i<lis.length;i++)//鼠标悬停行变色
{ lis[i].onmouseover=function() { this.style.backgroundColor="yellow"; } lis[i].onmouseout=function() { this.style.backgroundColor=""; } } } }</script>【任务实现】设计一个鼠标跟随效果，当鼠标在页面上移动时，有一个红色矩形跟随着鼠标移动。当鼠标单击时，红色矩形消失；当鼠标再次单击时，红色矩形又出现在鼠标当前所在的位置。任务2鼠标跟随定位position在CSS样式表中，主要有四种页面元素定位方式，分别为：static（静态定位）、fixed（固定定位）、relative（相对定位）和absolute（绝对定位），当我们需要用JavaScript代码控制页面元素的位置时，通常使用该页面元素的left和top样式，此时该页面元素必须要设置定位方式，但不可以使用static方式定位，原因是static定位方式下left和top样式不起作用。【相关知识】在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ vardiv=document.createElement('div'); document.body.appendChild(div); div.style.width="100px"; div.style.height="100px"; div.style.backgroundColor="red"; div.style.position="absolute"; document.onmousemove=function(ev) { varoEvent=ev||event; div.style.left=oEvent.clientX+"px"; div.style.top=oEvent.clientY+"px"; } document.onclick=function() { if(div.style.display=="none") { div.style.display="block"; } else { div.style.display="none"; } }}</script>【任务实现】如图7.4所示，设计一个横向的图片墙，其中的每一幅图片每隔一秒钟都从右向左移动一格。任务3循环移动图片墙图7.4图片墙重新认识appendChild()方法在任务一中，我们已经初步学习了appendChild()方法，知道其作用是将新创建的元素节点添加到指定的元素节点的最后。实际上appendChild()方法还可以将已有的元素节点添加到指定的元素节点中。此时，该方法将会实现两步操作，第一步是从原来的位置移除该元素节点，第二步是将该元素节点添加到指定元素节点中。【相关知识】1、在<body>标签内部输入以下代码，创建一个项目列表，每个列表项是一副图片。<body><ulid="ul1"> <li><imgsrc="images/1.jpg"/></li> <li><imgsrc="images/2.jpg"/></li> <li><imgsrc="images/3.jpg"/></li> <li><imgsrc="images/4.jpg"/></li> <li><imgsrc="images/5.jpg"/></li></ul></body>【任务实现】2、定义CSS样式表，代码如下：<styletype="text/css">Img{width:100px;heiht:100px; border:1px#999solid;}ul{ list-style-type:none;}li{display:inline;margin:5px;}</style>【任务实现】3、在<head>标签对中输入以下代码：<scripttype="text/javascript">window.onload=function(){ varul1=document.getElementById("ul1"); window.setInterval(move,1000); functionmove() { varlis=document.getElementsByTagName("li"); ul1.appendChild(lis[0]); }}</script>【任务实现】如图7.5所示，有一个7行一列的表格，其中有无序数字，当点击“降序排列”按钮后，表格中的数字按照降序排列。任务4表格排序图7.5表格排序1、获取表格元素1）标准表格通常，我们在编写表格HTML代码时，都是形如下列写法：<table><tr><td>内容</td>……其他<td>标签对</tr>……其他<tr>标签对</table>【相关知识】实际上，一个完整的表格需要包括表头，表体和表尾。其中，表头被包含在<thead>标签对中；表体被包含在<tbody>标签对中；表尾被包含在<tfoot>标签对中。表头和表尾分别显示在表格的最上端和最下端，表体显示在表头和表尾之间，表体可以有一个或多个。例如，下列HTML就是一个比较完整的表格代码。【相关知识】<tablewidth="200"border="1"id="tb"><thead><tr><td>序号</td><td>姓名</td></tr></thead><tbody><tr><td>1</td><td>张三</td></tr><tr><td>2</td><td>李四</td></tr><tr><td>3</td><td>王五</td></tr><tr><td>4</td><td>赵六</td></tr></tbody><tfoot><tr><tdcolspan="2">制表人：×××</td></tr></tfoot></table>2）获取表头tHead属性可以获取表头，其语法为：表格对象.tHead3）获取表尾tFoot属性可以获取表尾，其语法为：表格对象.tFoot4）获取表体tBodies属性可以获取表体，其语法为：表格对象.tBodies5）获取行rows属性可以获取表格各个部分的行，其语法为：表格对象.表头对象|表体对象|表尾对象.rows(
“|”代表“或者”)【相关知识】6）获取单元格cells属性可以获取表格中的任意一个单元格，其语法为：表格对象.表头对象|表体对象|表尾对象.rows[索引号].cells(
“|”代表“或者”)【相关知识】2、数组排序对于一个数组，如果希望对其中的元素进行排序，可以使用很多排序算法，但是一种比较简便的做法是使用数组对象提供的sort()方法，该方法可以对数组元素按照升序或者降序排序。其语法为：数组对象.sort(fn)其中，fn是一个自定义的函数，该函数形如：functionfn(n1,n2){returnn1-n2; //或者returnn2-n1;}因为只有当n1>n2时，该函数返回值才大于0，sort()方法排序成功，而当n1<=n2时，该函数的返回值为小于或等于0的数，此时sort()方法不排序，如此类推，最后数组对象中的数组元素就按照升序排列。如果把02行修改为“returnn2-n1”，则只有当n2>n1时，该函数返回值才大于0，同理，最后数组对象中的数组元素就按照降序排列。【相关知识】需要注意的是，sort()方法只能对数组对象进行排序，对于表格元素如行、单元格等集合对象则不能排序。如果需要对这些集合对象使用sort()方法排序，必须将集合对象转换为数组对象后才能使用sort()方法排序。【相关知识】<body><inputtype="button"id="sortBtn"value="降序排列"/><tableid="table1"border="1"cellspacing="0"cellpadding="0"><thead><tr><tdwidth="65">数字</td></tr></thead><tbody><tr><td>2</td></tr><tr><td>3</td></tr>【任务实现】<tr><td>5</td></tr><tr><td>1</td></tr><tr><td>4</td></tr><tr><td>6</td></tr></tbody></table></body>1、在<body>标签内部输入以下代码，创建一个按钮和一个表格。<scripttype="text/javascript">window.onload=function(){ functionfn(tr1,tr2) { varnum1=parseInt(tr1.cells[0].innerHTML); varnum2=parseInt(tr2.cells[0].innerHTML); returnnum2-num1; } varsortBtn=document.getElementById("sortBtn"); sortBtn.onclick=function() { vartable=document.getElementById("table1"); vartrRows=table.tBodies[0].rows; vararr=[]; for(i=0;i<trRows.length;i++) { arr[i]=trRows[i]; } arr.sort(fn); for(i=0;i<arr.length;i++) { table.tBodies[0].appendChild(arr[i]); } }}</script>【任务实现】2、在<head>标签对中输入以下代码：任务5“项目七”的实现获取或设置元素节点属性1）getAttribute()方法该方法可以获取元素节点的某个指定的属性，其语法为：元素节点.getAttribute("属性")2）setAttribute()方法该方法可以设置元素节点的某个指定的属性的值，其语法为：元素节点.setAttribute("属性",属性的值)【相关知识】3）兼容性问题对于以上两个方法，都存在浏览器兼容性问题。比如，style属性、class属性以及for属性等在I6、IE7浏览器中用上面的两个方法都无法识别。因此对于元素节点的属性获取和设置，一般建议如下：①常规属性建议使用“元素节点.属性”的形式，如id属性、title属性。②自定义属性一般用以上两个方法。③当获取或设置的属性是JavaScript里的关键字时建议使用以上两个方法，比如<label>标签中的for属性。④当获取或设置属性是保留字,如：class属性,建议使用“元素节点.className”【相关知识】1、在本项目中，图片可以通过遍历表体所有的行设置其中<img>标签的src属性设置。2、对表格进行排序时，考虑到表格行作为集合对象不能直接使用sort()方法排序，可以将销量赋值给数组，对数组排序后作为子节点添加到表体中。3、由于排序后要求各行前面的序号不变，因此排序后要重新设置各行前面的序号。4、鼠标悬停到图片小图上显示大图可以利用鼠标跟随技术，显示销量提示可以设置<img>标签的title属性值。5、项目中要尽量考虑到浏览器兼容性问题。【任务分析】1、在<body>标签对中建立一个“按照销量排序”按钮，一个含有<img>标签的表格：【任务实现】<body><inputtype="button"id="sortBtn"value="按照销量排序"/><tableborder="1"cellpadding="0"cellspacing="0"id="tb1"><thead><tr><tdwidth="32">序号</td><tdwidth="32">图片</td><tdwidth="93">销量（件）</td></tr></thead><tbody><tr><td></td><td><img/></td><td>200</td></tr><tr><td></td><td><img/></td><td>100</td></tr><tr><td></td><td><img/></td><td>150</td></tr><tr><td></td><td><img/></td><td>50</td></tr><tr><td></td><td><img/></td><td>180</td></tr><tr><td></td><td><img/></td><td>300</td></tr></tbody></table></body>2、在<head>标签对中定义如下CSS样式表，以便为各行变色提供两种背景样式（04～07行）。注意，02行设置了body的定位方式，是为了使得放置大图的div更好的定位，否则当鼠标在表格行中的小图上移动时，鼠标跟随效果出现闪烁。代码如下：<styletype="text/css">body{ position:absolute;}.class1{ background-color:#CCC;}.class2{ background-color:#F9F;}</style>【任务实现】3、在<head>标签对中输入如下代码：<scripttype="text/javascript">window.onload=function(){ vartb=document.getElementById("tb1"); varsortBtn=document.getElementById("sortBtn"); vartrRows=tb.tBodies[0].rows; varisAsc=true; varoDiv; functioncreateDiv()//创建一个div用于显示大图
{ oDiv=document.createElement("div"); document.body.appendChild(oDiv); oDiv.style.width=200+"px"; oDiv.style.height=200+"px"; oDiv.style.position="absolute"; } createDiv(); functionsetRowColor()//设置隔行变色
{ for(i=0;i<trRows.length;i++) {
i%2==0?trRows[i].className="class1":trRows[i].className="class2"; } }
【任务实现】 setRowColor(); functionmouseRowColor()//鼠标悬停改变行背景色，离开还原背景色
{ varrowColor; for(i=0;i<trRows.length;i++) { trRows[i].onmouseover=function() { rowColor=this.style.backgroundColor; this.style.backgroundColor="yellow"; } trRows[i].onmouseout=function() { this.style.backgroundColor=rowColor; } } } mouseRowColor(); varim
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- T/CECS 10114-2021增强高密度聚乙烯(HDPE-IW)六棱结构壁管材
- T/CECS 10066-2019绿色建材评价地源热泵系统
- T/CAZG 006-2019貘类饲养管理技术规范
- T/CATSI 05001-2018移动式真空绝热深冷压力容器内容器应变强化技术要求
- T/CAQI 195-2021电热水器健康功能技术要求和试验方法
- T/CAPE 12005-2023扩散焊热交换器
- 电网金融考试题及答案
- 郑州云和数据java面试题及答案
- 急诊科招聘面试题及答案
- 规划选址面试题及答案
- 燃气行业数字化转型与智能化
- VDA6.3检查要求与证据清单(VDA6.3检查表)
- 牙周检查记录表
- 外墙涂料吊篮施工方案
- 《新时代劳动教育》新时代劳动价值观
- 第四章 地陪导游服务程序与服务质量
- 山东紫薇种质资源调查报告
- 2023年医疗招聘技术类-影像医学与核医学考试历年真题集锦附答案
- “循环经济关键技术与装备”重点专项2023年度项目申报指南
- 旅行社应急处置方案
- 中移L2认证(集团)备考题库（浓缩版）
评论
0/150
提交评论