关于js方面常用的知识

 

 

 

一：什么是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("你还点”）

}；

目录

 

一：什么是DOM

二：文档的加载

三：文档的查询

四：什么是事件？

 

---

五：图片的自动切换

先绑定一个页面加载事件，使页面加载后，再执行代码

先获取第一图片ID

获取按钮的ID

为按钮绑定一个单击响应函数

为了方便图片的获取，要创建一个数组来保存图片的路径

定义一个变量来保存定时器的标识

var = timer

使第一个图片的索引值为0

var index=0

这时会出现一个小问题，就是我们每点击一次按钮，就会开启一个定时器

开启定时器来切换图片，点击多次就会开启多个定时器，这就会导致速度过快

所以要在开始定时器之前，需要将当前元素上的其他定时器关闭

clearInterval(timer);

关闭按钮原理如上是设置一个关闭定时器即可

注意：

clearInterval()可以接收任意参数

如果参数不是一个有效的标识符，则什么也不做