Download presentation
Presentation is loading. Please wait.
1
知识点讲解 1、DOM节点树 DOM(Document Object Model)称为文档对象模型，是一个表示和处理文 档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样 式。DOM将网页中文档的对象关系规划为节点层级，构成它们之间的等级关 系，这种各对象间的层次结构被称为节点树。如下图所示。
2
知识点讲解 2、DOM节点树 一个文档的树形结构就是由各种不同的节点组成的。文档对象节点树有以 下特点： 每个节点树有一个根节点。
除了根节点，每个节点都有一个父节点。 每个节点都可以有许多的子节点。 具有相同父节点的节点叫做“兄弟节点”。
3
知识点讲解 3、节点的访问 （1）访问指定元素 一个元素对象可以拥有元素节点、文本节点、子节点或其它类型的节点。访 问指定节点的常用方法如下表所示。 类型 方法 说明 访问指定节点 getElementById() 获取拥有指定ID的第一个元素对象的引用 getElementsByName() 获取带有指定名称的元素对象集合 getElementsByTagName() 获取带有指定标签名的元素对象集合 getElementsByClassName() 获取指定class的元素对象集合（不支持IE6~8浏览器）
4
知识点讲解 4、元素属性与内容操作 元素对象除了节点操作，还具有一些属性和内容的操作，常用的操作方 法如下表所示。 innerHTML
类型 属性/方法 说明 元素内容 innerHTML 获取或设置元素的HTML内容 样式属性 className 获取或设置元素的class属性 style 获取或设置元素的style样式属性 位置属性 offsetWidth、offsetHeight 获取或设置元素的宽和高（不含滚动条） scrollWidth、scrollHeight 获取或设置元素的完整的宽和高（含滚动条） offsetTop、offsetLeft 获取或设置包含滚动条，距离上或左边滚动过的距离 scrollTop、scrollLeft 获取或设置元素在网页中的坐标 属性操作 getAttribute() 获得元素指定属性的值 setAttribute() 为元素设置新的属性 removeAttribute() 为元素删除指定的属性
5
格式：标签.style.属性=“值” 注意： css中组合单词间用中短线“-”连接 font-size:12px; Js中组合单词，每个单词的首页字母要 大写，但是第一个单词首页字母要小写 。 对象.style.fontSize=“20px”
6
className 获取或设置元素的class属性
7
对于一些自己创建的属性， 对象.属性（只对IE有效，火狐不兼容） getAttribute()获得元素指定属性的值 IE和火狐都适用
8
情景六 图片切换
9
让多张图片在一段时间内进行自动 切换，同时用户也可以通过鼠标控 制图片的切换。
10
学习目标 了解图片切换的相关样式和结构 了解JS中的数组 掌握JS通过标签名获取结构的方法
11
设计思路 图片切换的结构布局 对象数组的建立 图片自动切换（重点、难点） 序号标签切换（重点） 鼠标控件图片切换（重点、难点）
12
图片切换的结构布局
13
CSS控制布局效果 图片只显示1张 整个数字的位置 每个数字的格式 特殊数字的格式
14
任务2 建立数组 图片li 数字span
15
切换 图片切换 通过li的显示控制 序号标签切换 通过数字的特殊格式控制
16
鼠标控件切换 时间控制切换
Similar presentations
