（中职）JavaScript项目式实例教程项目七电子课件工信版

（中职）JavaScript项目式实例教程项目七电子课件工信版 项目七 商品列表 —— DOM对象  JavaScript项目式实例教程 如图7.1所示，页面展示了一个服装商品的列表，在该列表中，效果及功能有： 1、表格行背景色采用红灰隔行变色显示，当鼠标悬停在某一行上时，该行背景色变为黄色；当鼠标离开该行时，背景色还原为原来的颜色。 2、当鼠标悬停在服装图片上时，跟随鼠标显示该件服装的大图，并且以提示信息的方式显示该款服装目前的销量；当鼠标离开服装图片时，服装大图消失。 3、当点击“按照销量排序”按钮时，列表中的行将按照服装销量的多少升序排列；再次点击该按钮，列表中的行将按照服装销量的多少降序排列。但是每一行中的序号不变。 项目情境 图7.1 商品列表  JavaScript项目式实例教程 掌握利用DOM获取文档节点的方法。 掌握利用DOM操作文档节点的方法。 掌握利用DOM获取或设置文档节点样式的方法。 掌握利用DOM操作表格的方法。 学习目标  JavaScript项目式实例教程 如图7.2所示，页面上有一个文本区域框，用户在其中输入评论文字，点击“发表评论”按钮，该评论文字以列表的形式显示在按钮下面，并自动添加发表日期和“删除”超级链接，后发表的评论文字排在评论列表的上部。点击某条评论文字行后面的“删除”链接，该条评论文字被删除。当鼠标悬停在一条评论行上时，该行背景变为黄色，鼠标离开，背景色还原为白色。。 任务1 评论管理 图7.2 评论管理  JavaScript项目式实例教程 1、DOM对象 DOM是Document Object Model(文档对象模型)的首字母缩写，它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。DOM是以层次结构组织的节点或信息片断的集合，它是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。 浏览器对象是一个分层的结构，我们可以把一个网页文档看成一棵倒立的树。如图7.3所示。 【相关知识】 图7.3 文档树型结构  JavaScript项目式实例教程 图7.3对应的HTML文档 <html> <head> <title>列表</title> </head> <body> <p>以下是列表</p> <ul id="ul1"> <li title="one">1</li> <li title="two">2</li> <li title="three">3</li> </ul> </body> </html> 【相关知识】 图7.3 文档树型结构  JavaScript项目式实例教程 2、节点类型 在DOM中，最常用的节点类型有三个，分别是元素节点（element node）、属性节点（attribute node）和文本节点（text node）。另外还有注释节点（comments node）和文档节点（document node）。 可以通过节点的nodeType属性的值来判断节点的类型，nodeType的值及其含义如表所示。 【相关知识】 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 注释节点 8 文档节点 9  JavaScript项目式实例教程 1）元素节点 在前面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。 【相关知识】  JavaScript项目式实例教程 3、获取元素节点 1）getElementById()方法 此方法返回对拥有指定 ID 的第一个对象的引用，其语法为： document.getElementByI