一.API概述
API: 应用程序接口（Application Programming Interface）
接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
作用：使用 JavaScript提供的接口来操作网页元素和浏览器
二.DOM简介
DOM（Document Object Model——文档对象模型）
作用：DOM用来 操作网页文档，开发网页特效和实现用户交互
核心:把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
document 对象
document对象是 DOM 里提供的一个**对象，**是DOM顶级对象
他是网页内容的入口 , 它提供的属性和方法都是用来访问和操作网页内容的
三.获取DOM元素
CSS选择器来获取DOM元素（重点）
document.querySelector() 选择匹配的第一个元素
document.querySelectorAll() 选择匹配的多个元素对象
得到的是一个伪数组：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得
其他获取DOM元素
document.getElementById() 根据id获取元素，单个元素
document.getElementsByClassName() 根据类名获取元素，伪数组
document.getElementsByTagName() 根据标签名获取元素，伪数组
document.getElementsByName() 根据name属性值获取元素，伪数组
四.操作元素内容
DOM对象可以操作页面标签，就是操作DOM对象（增删改查）
操作标签元素的内容有以下2种方式：
-
对象.innerText 属性 显示纯文本，不解析标签
-
对象.innerHTML 属性 会解析标签
五.操作元素属性
1.操作元素常用属性
2.随机显示图片
3.操作元素样式属性
1.通过 style 属性操作元素样式
2. 通过类名(className) 操作元素样式
3. 通过 classList 操作元素样式（推荐）
新增类名 classList.add('类名') 例如: box.classList.add('box1')
移除类名 classList.remove('类名') 例如: box.classList.remove('box1')
切换一个类名 classList.toggle('类名') 有就删除,没有就增加
4.操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性
设置: DOM对象.属性 = 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示
比如实现禁用按钮，勾选按钮等 如果为 true 代表添加了该属性 如果是 false 代表移除了该属性
比如： disabled、checked、selected
5.自定义属性
在html5中推出来了专门的data-自定义属性
在标签上一律以 data- 开头
在DOM对象上一律以dataset对象方式获取
6.定时器-间隔函数
定时器函数可以开启和关闭定时器
作用：每隔一段时间调用这个函数
注意：间隔时间单位是毫秒
1. 开启定时器
2. 关闭定时器
