（中职）JavaScript项目式实例教程项目七ppt课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2014/7/25,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,（中职）JavaScript项目式实例教程项目七电子课件工信版,项目七,商品列表, DOM,对象,如图,7.1,所示，页面展示了一个服装商品的列表，在该列表中，效果及功能有：,1,、表格,行背景色采用红灰隔行变色显示，当鼠标悬停在某一行上时，该行背景色变为黄色；当鼠标离开该行时，背景色还原为原来的颜色。,2,、当,鼠标悬停在服装图片上时，跟随鼠标显示该件服装的大图，并且以提示信息的方式显示该款服装目前的销量；当鼠标离开服装图片时，服装大图消失。,3,、当,点击“按照销量排序”按钮时，列表中的行将按照服装销量的多少升序排列；再次点击该按钮，列表中的行将按照服装销量的多少降序排列。但是每一行中的序号不变。,项目情境,图,7.1,商品列表,掌握,利用,DOM,获取文档节点的方法。,掌握,利用,DOM,操作文档节点的方法。,掌握,利用,DOM,获取或设置文档节点样式的方法。,掌握,利用,DOM,操作表格的方法。,学习目标,如图,7.2,所示，页面上有一个文本区域框，用户在其中输入评论文字，点击“发表评论”按钮，该评论文字以列表的形式显示在按钮下面，并自动添加发表日期和“删除”超级链接，后发表的评论文字排在评论列表的上部。点击某条评论文字行后面的“删除”链接，该条评论文字被删除。当鼠标悬停在一条评论行上时，该行背景变为黄色，鼠标离开，背景色还原为白色。,任务,1,评论,管理,图,7.2,评论管理,1,、,DOM,对象,DOM,是,Document Object Model(,文档对象模型,),的首字母缩写，它是,W3C,国际组织的一套,Web,标准。它定义了访问,HTML,文档对象的一套属性、方法和事件。,DOM,是以层次结构组织的节点或信息片断的集合，它是给,HTML,与,XML,文件使用的一组,API,。,DOM,的本质是建立网页与脚本语言或程序语言沟通的桥梁。,浏览器对象是一个分层的结构，我们可以把一个网页文档看成一棵倒立的,树,。如图,7.3,所,示,。,【,相关知识,】,图,7.3,文档树型结构,图,7.3,对应的,HTML,文档,列表,以下是列表,1,2,3,【,相关知识,】,图,7.3,文档树型结构,2,、节点类型,在,DOM,中，最常用的节点类型有三个，分别是元素节点（,element node,）、属性节点（,attribute node,）和文本节点（,text node,）。另外还有注释节点（,comments node,）和文档节点（,document node,）。,可以通过节点的,nodeType,属性的值来判断节点的类型，,nodeType,的值及其含义如,表所,示。,【,相关知识,】,节点类型,nodeType,属性值,元素节点,1,属性节点,2,文本节点,3,注释节点,8,文档节点,9,1,）元素节点,在,前,面,DOM,树对应,的,HTML,文档,中，,、,、,等标签元素都是元素节点。元素节点可以包含其他元素，例如,节点包含了,3,个,节点,。,2,）属性节点,有些元素节点中会有属性，这些属性就是属性节点。因为属性总是被放在起始标签中，所以属性节点总是被包含在元素节点中。比如，,在,前,面,DOM,树对应,的,HTML,文档,中,，,节点是一个元素节点，其中有属性,title,，例如,title=one,就是一个属性节点,。,3,）文本节点,在上述文档中，元素节点,中包含了文字“以下是列表”，这段文字就是一个文本节点。一般来说，在,XHTML,文档中，文本节点总是被包含在元素节点起始标签和结束标签中间。但是在,IE9,及以上版本浏览器、,FF,火狐浏览器中，会把两个元素节点之间的空格或者换行也当成一个文本节点。比如，,在,前,面,DOM,树对应,的,HTML,文档,中,，,下的子节点在这些浏览器中识别的个数不是,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,属性可以返回被选节点的父节点，其语法为,：,元素节点,.,parentNode,6,、获取首尾子节点,1,）,firstChild,属性和,lastChild,属性,firstChild,属性可以返回被选节点的第一个子节点，其语法为：,元素节点,.,firstChild,lastChild,属性可以返回被选节点的最后一个子节点，其语法为：,元素节点,.,lastChild,这,两个属性在,IE9,及以上版本浏览器、,FF,火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，所以使用时应该注意。,【,相关知识,】,2,）,firstElementChild,属性和,lastElementChild,属性,firstElementChild,属性可以返回被选节点的第一个子节点，其语法为,：,元素节点,.,firstElementChild,lastElementChild,属性可以返回被选节点的最后一个子节点，其语法为：,元素节点,.,lastElementChild,这两个属性只在,IE9,及以上版本浏览器、,FF,火狐浏览器中使用，,IE9,之前的版本不支持这两个属性。与,firstChild,、,lastChild,属性不同的是，这两个属性将忽略空文本节点。,【,相关知识,】,7,、获取兄弟节点,1,）,nextSibling,属性和,previousSibling,属性,nextSibling,属性可以返回与被选节点同级的下一个节点，其语法为：,元素节点,.,nextSibling,previousSibling,属性可以返回与被选节点同级的前一个节点，其语法为：,元素节点,.,previousSibling,这两个属性在,IE9,及以上版本浏览器、,FF,火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，所以使用时应该注意。,2,）,nextElementSibling,属性和,previousElementSibling,属性,nextElementSibling,属性可以返回与被选节点同级的下一个节点，其语法为：,元素节点,.nextElementSibling,【,相关知识,】,2,）,nextElementSibling,属性和,previousElementSibling,属性,nextElementSibling,属性可以返回与被选节点同级的下一个节点，其语法为：,元素节点,.nextElementSibling,previousElementSibling,属性可以返回与被选节点同级的前一个节点，其语法为：,元素节点,.,previousElementSiblin,这两个属性只在,IE9,及以上版本浏览器、,FF,火狐浏览器中使用，,IE9,之前的版本不支持这两个属性。与,nextSibling,、,previousSibling,属性不同的是，这两个属性将忽略空文本节点。,【,相关知识,】,8,、创建元素节点,利用,createElement(),方法可以动态的创建一个元素节点，其语法为：,document.createElement,(“,元素,标签,名,”),9,、添加元素节点,利用,createElement(),方法创建的元素节点实际上还没有添加到页面文档中，还必须依靠添加元素节点的方法。,1,）,appendChild(),方法,该方法在指定元素节点的最后一个子节点之后添加节点，如果指定元素节点没有子节点，则直接插入，其语法为,：,父元素节点,.appendChild(,要添加的子元素节点,),2,）,insertBefore(),方法,该方法可在已有的子节点前插入一个新的子节点，其语法为：,父元素节点,.insertBefore(,要添加的子元素节点,参考子节点,),【,相关知识,】,10,、删除元素节点,利用,removeChild(),方法可以在指定元素节点中删除一个子节点，其语法为,：,父元素节点,.removeChild(,要删除的子元素节点,),【,相关知识,】,1,、,在,标签内部输入以下代码，创建一个文本区域框，一个按钮，一个准备显示评论列表行的空项目列表。,【,任务实现,】,2,、,在,标签对中输入以下代码,：,window.onload=function(),function getMsgDate()/,得到当前日期,var date=new Date();,var year=date.getFullYear();,var month=date.getMonth()+1;,var day=date.getDay()+1;,var msgDate=year+/+month+/+day;,return msgDate;,var ul=document.getElementById(ul1);,var msgBtn=document.getElementById(msgBtn);,var msgTextArea=document.getElementById(msgTextArea);,msgBtn.onclick=function(),var newLi=document.createElement(li);,var delMsg=,删除,newLi.innerHTML=msgTextArea.value+-+getMsgDate()+delMsg;,var,lis=document.getElementsByTagName(li,);,【,任务实现,】,if(ul.children.length,=0)/,添加新的评论,ul.appendChild(newLi);,else,ul.insertBefore(newLi,lis0);,var delLink=document.getElementById(delLink);,delLink.onclick=function()/,删除评论,ul.removeChild(this.parentNode);,for(i=0;in2,时，该函数返回值才大于,0,，,sort(),方法排序成功，而当,n1n1,时，该函数返回值才大于,0,，同理，最后数组对象中的数组元素就按照降序排列,。,【,相关知识,】,需要,注意的是，,sort(),方法只能对数组对象进行排序，对于表格元素如行、单元格等集合对象则不能排序。如果需要对这些集合对象使用,sort(),方法排序，必须将集合对象转换为数组对象后才能使用,sort(),方法排序。,【,相关知识,】,数字,2,3,【,任务实现,】,5,1,4,6,1,、,在,标签内部输入以下代码，创建一个按钮和一个表格。,window.onload=function(),function fn(tr1,tr2),var num1=parseInt(tr1.cells0.innerHTML);,var num2=parseInt(tr2.cells0.innerHTML);,return num2-num1;,var sortBtn=document.getElementById(sortBtn);,sortBtn.onclick=function(),var table=document.getElementById(table1);,var trRows=table.tBodies0.rows;,var arr=;,for(i=0;itrRows.length;i+),arri=trRowsi;,arr.sort(fn);,for(i=0;iarr.length;i+),table.tBodies0.appendChild(arri);,【,任务实现,】,2,、,在,标签对中输入以下代码：,任务,5,“项目七”的实现,获取或设置元素节点属性,1,）,getAttribute(),方法,该方法可以获取元素节点的某个指定的属性，其语法为,：,元素节点,.getAttribute(,属性,),2,）,setAttribute(),方法,该方法可以设置元素节点的某个指定的属性的值，其语法为：,元素节点,.setAttribute(,属性,属性的值,),【,相关知识,】,3,）兼容性问题,对于以上两个方法，都存在浏览器兼容性问题。比如，,style,属性、,class,属性以及,for,属性等在,I6,、,IE7,浏览器中用上面的两个方法都无法识别。因此对于元素节点的属性获取和设置，一般建议如下：,常规,属性建议使用“元素节点,.,属性”的形式，如,id,属性、,title,属性。,自定义,属性一般用以上两个方法。,当,获取或设置的属性是,JavaScript,里的关键字时建议使用以上两个方法，比如,标签中的,for,属性。,当,获取或设置属性是保留字,如：,class,属性,建议使用“元素节点,.className”,【,相关知识,】,1,、在本项目中，图片可以通过遍历表体所有的行设置其中,标签的,src,属性设置。,2,、对表格进行排序时，考虑到表格行作为集合对象不能直接使用,sort(),方法排序，可以将销量赋值给数组，对数组排序后作为子节点添加到表体中。,3,、由于排序后要求各行前面的序号不变，因此排序后要重新设置各行前面的序号。,4,、鼠标悬停到图片小图上显示大图可以利用鼠标跟随技术，显示销量提示可以设置,标签的,title,属性值。,5,、项目中要尽量考虑到浏览器兼容性问题。,【,任务分析,】,1,、,在,标签对中建立一个“按照销量排序”按钮，一个含有,标签的,表格：,【,任务实现,】,序号,图片,销量（件）,200,100,150,50,180,300,2,、,在,标签对中定义如下,CSS,样式表，以便为各行变色提供两种背景样式（,04,07,行）。注意，,02,行设置了,body,的定位方式，是为了使得放置大图的,div,更好的定位，否则当鼠标在表格行中的小图上移动时，鼠标跟随效果出现闪烁。代码如下,：,body,position:absolute,;,.class1,background-color,:#CCC;,.class2,background-color,:#F9F;,【,任务实现,】,3,、在,标签对中输入如下代码：,window.onload=function(),var tb=document.getElementById(tb1);,var sortBtn=document.getElementById(sortBtn);,var trRows=tb.tBodies0.rows;,var isAsc=true;,var oDiv;,function createDiv()/,创建一个,div,用于显示大图,oDiv=document.createElement(div);,document.body.appendChild(oDiv);,oDiv.style.width=200+px;,oDiv.style.height=200+px;,oDiv.style.position=absolute;,createDiv();,function setRowColor()/,设置隔行变色,for(i=0;itrRows.length;i+),i%2,=0?trRowsi.className=class1:trRowsi.className=class2;,【,任务实现,】,setRowColor,();,function mouseRowColor()/,鼠标悬停改变行背景色，离开还原背景色,var rowColor;,for(i=0;itrRows.length;i+),trRowsi.onmouseover=function(),rowColor=this.style.backgroundColor;,this.style.backgroundColor=yellow;,trRowsi.onmouseout=function(),this.style.backgroundColor=rowColor;,mouseRowColor();,var imgs=document.getElementsByTagName(img);,for(i=0;iimgs.length;i+)/,给每行添加图片，为每张图片添加鼠标事件,imgsi.width=50;,imgsi.height=50;,imgsi.src=images/+(i+1)+.jpg;,imgsi.onmousemove=function(ev),【,任务实现,】,var,oEvent=ev|event;,oDiv.style.display,=block;,oDiv.style.left=oEvent.clientX+px;,oDiv.style.top=oEvent.clientY,+px;,oDiv.innerHTML,=;,/,下面给图片添加,title,属性,if(this.parentNode.nextSibling.nodeType,=3),var,titleValue=this.parentNode.nextSibling. nextSibling. innerHTML;,else,var,titleValue=this.parentNode.nextSibling.innerHTML;,this.setAttribute,(title,该款销量为：,+titleValue+,件,);,imgsi,.onmouseout=function(),oDiv.style.display,=none;,【,任务实现,】,function,setRowID()/,设置每一行的序号,for(i=0;itrRows.length;i+),trRowsi.cells0.innerHTML=i+1;,setRowID();,function fn(tr1,tr2)/,准备传入,sort(),方法中的函数,var num1=parseInt(tr1.cells2.innerHTML);,var num2=parseInt(tr2.cells2.innerHTML);,if(isAsc),return num1-num2;,else,return num2-num1;,【,任务实现,】,sortBtn.onclick=function()/,点击按钮按照销量排序,var arr=;,for(i=0;itrRows.length;i+)/,将行转存为数组,arri=trRowsi;,arr.sort(fn);,for(i=0;iarr.length;i+)/,将排好序的数组添加到表体中,tb.tBodies0.appendChild(arri);,setRowID();,setRowColor();,isAsc=!isAsc;/,变换升降序,【,任务实现,】,