JavaScript项目式实例教程（第2版）课件项目7--9 商品列表 DOM对象、自制滚动条事件的高级应用、运动基础滑动的侧边栏.pptx

下载文档

0
0
约2.8万字
约 117页
2024-04-28 发布于山东
举报
版权申诉
保障服务

JavaScript项目式实例教程（第2版）课件项目7--9 商品列表 DOM对象、自制滚动条事件的高级应用、运动基础滑动的侧边栏.pptx

1、本文档共117页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

项目七

商品列表——DOM对象;如图7.1所示，页面展示了一个服装商品的列表，在该列表中，效果及功能有：

1、表格行背景色采用红灰隔行变色显示，当鼠标悬停在某一行上时，该行背景色变为黄色；当鼠标离开该行时，背景色还原为原来的颜色。

2、当鼠标悬停在服装图片上时，跟随鼠标显示该件服装的大图，并且以提示信息的方式显示该款服装目前的销量；当鼠标离开服装图片时，服装大图消失。

3、当点击“按照销量排序”按钮时，列表中的行将按照服装销量的多少升序排列；再次点击该按钮，列表中的行将按照服装销量的多少降序排列。但是每一行中的序号不变。

;?掌握利用DOM获取文档节点的方法。

?掌握利用DOM操作文档节点的方法。

?掌握利用DOM获取或设置文档节点样式的方法。

?掌握利用DOM操作表格的方法。;如图7.2所示，页面上有一个文本区域框，用户在其中输入评论文字，点击“发表评论”按钮，该评论文字以列表的形式显示在按钮下面，并自动添加发表日期和“删除”超级链接，后发表的评论文字排在评论列表的上部。点击某条评论文字行后面的“删除”链接，该条评论文字被删除。当鼠标悬停在一条评论行上时，该行背景变为黄色，鼠标离开，背景色还原为白色。。;1、DOM对象

DOM是DocumentObjectModel(文档对象模型)的首字母缩写，它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。DOM是以层次结构组织的节点或信息片断的集合，它是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

浏览器对象是一个分层的结构，我们可以把一个网页文档看成一棵倒立的树。如图7.3所示。

;图7.3对应的HTML文档

<html>

<head>

</head>

<body>

<p>以下是列表</p>

<ulid="ul1">

<lititle="one">1</li>

<lititle="two">2</li>

<lititle="three">3</li>

</ul>

</body>

</html>;2、节点类型

在DOM中，最常用的节点类???有三个，分别是元素节点（elementnode）、属性节点（attributenode）和文本节点（textnode）。另外还有注释节点（commentsnode）和文档节点（documentnode）。

可以通过节点的nodeType属性的值来判断节点的类型，nodeType的值及其含义如表所示。

;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。;3、获取元素节点

1）getElementById()方法

此方法返回对拥有指定ID的第一个对象的引用，其语法为：

document.getElementById(“对象的id属性值”)

2）getElementsByName()方法

此方法返回一个对象数组，每个对象对应着文档中有着给定名称的一个元素，其语法为：

document.getElementsByName(“对象的name属性值”)

3）getElementsByTagName()方法

此方法返回一个对象数组，每个对象分别对应着文档中有着给定标签的一个元素，语法为：

document.getElementsByTagName("对象的标签名称");3、获取元素节点

4）querySelectorAll()方法

querySelectorAll()方法返回文档中匹配指定CSS选择器的所有元素，语法格式如下：

document.querySelectorAll("CSS选择器

您可能关注的文档

文档评论（0）

balala11 + 关注: 实名认证

内容提供者

该用户很懒，什么也没介绍

咨询Ta 进入空间

1亿VIP精品文档

更多 >

JavaScript项目式实例教程（第2版）课件项目7--9 商品列表 DOM对象、自制滚动条事件的高级应用、运动基础滑动的侧边栏.pptx