一、web API的介绍
（1）Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
（2）API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
（3）Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
（4）Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。
（5）API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数。
二、DOM的概念
（1）document object model 文档对象模型
（2）作用：用来操作页面元素
三、查询元素（获取元素）
（1）根据 id 获取元素对象 ： document .getElementByld （id名称）；
（2）根据标签获取元素对象的集合 ： document . getElementByTagName （标签名）；
div.getElementByTagName（）；
（3）根据类名获取元素对象的集合 ：document.getElementsByClassName（类名）；
（4）根据name属性来获取对象的集合 ：document.getElementsByName（）；
（5）根据选择器获取 ：document.querySelector（选择器）获取的是一个对象；
document.querySelectorAll（）获取的是对象的集合；
四、事件
1、三要素 ：（1）事件源 ：触发事件的元素对象 ；
（2）事件类型 ：要触发的是什么事件；
（3）事件处理函数 ：触发了事件你要干嘛；
2、事件类型 ：（1）click ：点击事件；
（2）focus ：焦点事件；
（3）blur ：失去焦点事件；
（4）input ：表单类容发生改变的事件；
（5）mouseover ：鼠标移入事件；
（6）mouseout ：鼠标移出事件；
五、操作元素对象的属性
1、非表单元素 ：（1）element.innerText =‘ ’ 设置标签中的文本内容；
（2）element.innerHTML=‘ ’ 设置标签中的内容；
（3）element.src=‘ ’ 设置图片的路径；
（4）element.title=‘ ’ 设置标题 鼠标悬停在图片上显示的提示文本；
（5）element.href=‘ ’ 修改a标签的href属性；
2、表单元素 ：（1）input.value=‘ ’ 设置表单中的内容；
（2）input.type=‘ ’ 设置表单的类型；
（3）input.disabled= true 是否禁用 ；
（4）input.checked=true 是否选中 ；
3、样式的操作 ：（1）style 属性去设置 ： elenment.style . 属性名 = ‘ ’ 这里的属性名是驼峰命名法；
特点 ：设置数量比较少的样式 ，权重高 ，可以接收变量 ；
（2）设置类名 ：element.className = ‘ ’ 会覆盖原来的内容 ；
特点 ：设置数量比较多的样式 ，权重不高 ，不能接收变量； 2019-09-14