一:什么是DOM
.DOM,全称Document Object Model文档对象模型。
.JS中通过DOM来对HTML文档进行操作。只要理解DOM就可以随性所欲的操作WEB页面。
.文档
- 文档表示的就是整个的HTML网页文档
.对象
- 对象表示将网页中的每一个部分都转换为了一个对象。
. 模型
- 使用模型来表示对象之间的关系,这样方便我们获取对象。
浏览器已经为我们提供文档节点,对象是window属性
可以在页面中直接使用,文档节点代表是整个网页
二:文档的加载
浏览器在加载一个页面时,是按照自上而下的顺序加载的,
读取到一行就运行一行,如果将script标签写到页面上边,
在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载会导致无法获取到DOM对象
将js代码写到页面下部就是为,可以在页面加载完毕后可以执行js代码
所以为解决此问题
onload事件会在整个页面加载完成之后在触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行是所有的DOM对象已经加载完毕了
三:文档的查询
//通过js
获取元素节点
.通过document对象调用
1.getElementById()
- 通过id属性获取一个元素节点对象
2.getElementsByTagName()
- 通过标签名获取一组元素节点对象
3.getElementsByName()
- 通过nane属性获取一组元素节点对象
innerHTML用于获取元素内部的HTML代码的
对于自结束标签,这个属性没有意义
如果需要读取元素节点属性,
直接使用 元素,属性名
例子;元素.id 元素.name 元素.value
注意:class属性不能采用这种方式,
读取class属性时需要用元素.className;
四:什么是事件?
1.当执行某个动作或行为时称为事件
2.在DOM中时间就是用户和浏览器之间的交互行为,比如
点击按钮,鼠标移动,关闭窗口。。。
我们可以在事件的对应的属性中设置一些js代码,这样当事件被触发时, 这些代码将会执行
//获取按钮事件
var btn = document.getElementById(" btn" );
//可以为按钮的对应事件绑定处理函数的形式来响应事件
//绑定一个单击事件
//像这种为单击事件绑定的函数,我们称为单击响应事件;
btn.onlick = function(){
alert("你还点”)
};
目录
五:图片的自动切换
先绑定一个页面加载事件,使页面加载后,再执行代码
先获取第一图片ID
获取按钮的ID
为按钮绑定一个单击响应函数
为了方便图片的获取,要创建一个数组来保存图片的路径
定义一个变量来保存定时器的标识
var = timer
使第一个图片的索引值为0
var index=0
这时会出现一个小问题,就是我们每点击一次按钮,就会开启一个定时器
开启定时器来切换图片,点击多次就会开启多个定时器,这就会导致速度过快
所以要在开始定时器之前,需要将当前元素上的其他定时器关闭
clearInterval(timer);
关闭按钮原理如上是设置一个关闭定时器即可
注意:
clearInterval()可以接收任意参数
如果参数不是一个有效的标识符,则什么也不做