JavaScript零基础学习系列五

定时器

1.定时器:设定时间，在指定的时间之后执行函数或者是程序

  a.反复性定时器：var dingshiqi=Window.setInterval(“函数名()”,时间n[毫秒值]);在每隔定的时间n就会执行一次函数，反复执行

  b.一次性定时器：var dingshiqi=window.setTimeout(“函数名()”,时间n[毫秒值]);在指定的时间n毫秒之后执行一次函数，执行以后不在执行

2.清除定时器:让定时器不再执行

  a.清除反复性定时器：Window.clearInterval(dingshiqi);

  b.清除一次性定时器：window.clearTimeout(dingshiqi);

案例：

星星案例

星星案例修改

案例分享

图片的切换：轮播图经典案例。

DOM树

Document Object Model：文档对象模型

D：documnet，文档，html文档或者xml文档
O：object，对象，在转成树模型的时候，得到的对象，它有相应的属性和方法，利用他们可以完成任何操作。
M：model，模型，树模型，有节点构成的一颗树。节点（元素、属性和文本）转成对象。

DOM的分类
核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
HTMLDOM：针对HTML文档，提供的专有的属性和方法。
XMLDOM：针对XML文档，提供的专有的属性和方法。
EventDOM：事件DOM，提供了很多的常用事件。
CSSDOM：提供了操作CSS的一个接口。

HTML节点树：

DOM中节点的类型：

document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
element元素节点：元素节点对应于网页中的各标记。
attribute属性节点：每个元素都有若干个属性。
text文本节点：文本节点是最底层节点。

核心DOM公共属性和方法
nodeName：节点名称。
nodeValue：节点的值。
firstChild：第一个子节点。
lastChild：最后一个子节点。
parentNode：父节点。
childNodes：子节点列表，是一个数组。

查找html节点的方法
document.firstChild
document.documentElement(兼容性较好)

查找body节点的方法
document.firstChild.lastChild
document.body(推荐使用)

在核心DOM中，已经可以实现对网页元素的操作了，为什么还要有HTMLDOM呢？

因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM。

1、HTMLDOM的新特性

每一个HTML标记，都对应一个对象。如：标记，就是一个img对象。
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。

- img属性：src、width、height、border、style、title、id、class等。

- 在JS中，img对象属性：src、width、height、border、style、title、id、className等。

HTML DOM访问HTML元素的方法

1、根据元素的id查找对象——document.getElementById(id)

2、根据HTML标签名找对象

描述：根据HTML标签名找对象
语法：var arr = parentNode.getElementsByTagName(tagName)
参数：tagName就是要查找的标签名称，不能带尖括号。parentNode代表上层节点。
返回值：返回一个对象数组。
举例：ulObj.getElementsByTagName(“li”)

元素对象

offsetWidth：指元素的可见宽度，不含滚动条中的内容。只读属性。不带px单位。

offsetHeight：指元素的可见高度，不含滚动条中的内容。只读属性。不带px单位。

scrollWidth：指元素的总宽度，包含滚动条中的内容。只读属性。不带px单位。

scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。

scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。

scrollLeft：与scrollTop描述一样，只是向左滚动的距离。

书序案例

书讯快递