今日重点：
一、Web API介绍
1、API的概念
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
2、Web API的概念
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
3、API 和 Web API 总结
1）API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2）Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3）Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
4）学习 Web API 可以结合前面学习内置对象方法的思路学习
二、DOM 介绍
1、DOM简介
1）文档：一个页面就是一个文档，DOM中使用document表示。
2）节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。
3）标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示。
三、获取元素
1、根据ID获取
getElementById获取元素 --返回元素对象
1）语法：document.getElementById(id)
2）作用：根据ID获取元素对象
3）参数：id值，区分大小写的字符串
4）返回值：元素对象 或 null
2、根据标签名获取元素
getElementsByTagName获取某类标签元素
1）语法：document.getElementsByTagName(‘标签名‘) 或者 element.getElementsByTagName(‘标签名‘)
2）作用：根据标签名获取元素对象
3）参数：标签名
4）返回值：元素对象集合（伪数组，数组元素是元素对象）
注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
3、H5新增获取元素方式
1）document.getElementsByClassName(‘类名‘); 注意类名不用加点--返回值：根据类名返回元素对象集合
2）document.querySelector(‘选择器‘); 返回值：根据指定选择器返回第一个元素对象
3）document.querySelectorAll(‘选择器‘); 返回值：根据指定选择器返回原对象集合
注：querySelector和querySelectorAll里面的选择器需要加符号。
4、获取特殊元素（body，html）
1）获取body元素
document.body; 返回body元素对象
2）获取html元素
document.documentElement; 返回html元素对象
四、事件基础
1、事件三要素
1）事件源（谁）：触发事件的元素
2）事件类型（什么事件）： 例如 click 点击事件
3）事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
语法：
div元素对象.onmouseover = function() {//注意：使用普通方式注册事件类型，需要添加on前缀
// }
2、执行事件的步骤
1）获取事件源（操作谁）
2）注册事件（绑定事件--事件类型）
3）添加事件处理程序（用函数赋值形式）
3、常见的鼠标事件
五、操作元素
1、改变元素内容（获取或设置）
1）element.innerText
2）element.innerHTML
2、innerText和innerHTML的区别
（1）获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
（2）设置内容时的区别：
innerText不会识别html，而innerHTML会识别
3、常用元素的属性操作--修改元素属性
1）获取属性值
元素对象.属性名 img对象.src
2）设置属性的值
元素对象.属性名 = 值 img对象.src=‘xxx/xx.jpg‘
4、表单元素的属性操作--修改表单属性
1）获取属性的值
元素对象.属性名
2）设置属性的值
元素对象.属性名 = 值
注：
（1）input button ...表单里面的值内容是通过value来修改 --- 不是通过innerHTML来修改！
（2）利用DOM 可操作表单如下属性：
type value checked selected disabled
（3）表单元素中这些属性如： disabled checked selected 属性值是布尔值
5、样式属性操作--修改样式属性
1）通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
注：js操作样式：属于行内样式方式修改 -- 权重比较高
2）显示隐藏文本框内容
获得焦点 -- focus
失去焦点事件 -- blur
3）通过操作className属性
使用场景 -- 如果修改样式比较多的时候
（1）元素对象.className = ‘值不要加点‘;
（2）因为class是关键字，所有使用className。
（3）className会直接更改元素类名，会覆盖原先的类名。
（4）因为className添加的类名会覆盖原来的类名样式 -- 要想保留原来的类名样式，采用追加类名方式：如下：
元素对象.className = ‘原来的类名 新添加的样式类名‘;
总结：
有关JS-内置对象和简单数据类型、复杂数据类型请点击a="https://www.cnblogs.com/kk199578/p/14099634.html"
原文：https://www.cnblogs.com/kk199578/p/14117817.html