前面我们说过了JavaScript是一种运行在客户端的脚本语言 （Script 是脚本的意思）,它有三部分组成 ：ECMAScript 语法 ， DOM(页面文档对象模型) ，BOM(浏览器对象模型)而Web API则包含了DOM和BOM
js组成
通过JS语法我们可以实现数据的变化 ，运算 ，以及逻辑的编写 ，那么对于Web API我们则可以通过JS来操作HTML元素 ，通过语法知识为我们的网页元素添加特效.
什么是API
API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
比如手机为我们提供的耳机接口 ，充电接口类似 ，通过接口我们可以来操作手机中的部分功能
而Web API 则是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) ，即通过很多函数或对象方法操作网页的一系列工具
什么是DOM
文档对象模型（Document Object Model，简称DOM），是 W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口 ，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树
DOMshu
DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
以上三种元素对于DOM来说都是文档对象像 ，通过接口操作要改变的相应节点的文档对象就行 ，那么DOM是怎么操作元素呢？
怎么获取操作元素
我们想要操作页面(HTML)上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。
(1)根据ID获取元素对象
语法：document.getElementById(id)获取的是单个元素
之前我们做了一个距离五一还有多少天倒计时的例子 ，就是运用了这种id获取元素的方法 ，通过js来让时间动起来
标签节点
获取元素
JS操作DOM让时间动起来
(2)根据标签名获取元素对象
语法：document.getElementsByTagName(标签名) 或者element.getElementsByTagName(标签名)
注意：他们获取过来元素是对象的集合 以伪数组的形式存储的 ，比如网页上面有4span ，它会把所有span都获取到
数组的形式全部获取dao
因为它获取的是元素的集合 ，所以我们如果要改变其中的元素 ，就必须用到我们之前说过的数组方法来操作某一个元素
(3)H5新增获取元素方式
注意类名要加点(.nav) ，id要加#号(#nav) ，和css一样对应选择器前面的符号必须带才能获取到元素
H5新增方便使用
获取特殊元素（body，html）
特殊节点的获取方式
JavaScript基础原生的元素获取方法大致就这么多 ，那么我们在获取到元素后 ，怎么去进一步操作元素 ，进而去操作元素让它朝着我们预期的结果去变化呢？
什么是JS的事件
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击登录按钮时产生一个 登录事件，然后去执行某些操作。
事件三要素
事件源（谁）：触发事件的元素(获取到的元素)
事件类型（什么事件）： 例如 click 点击事件 ,触摸 ,拖动......事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
获取一个按钮元素加点击shij
鼠标点击点我按钮就会触发事件函数执行
事件执行的顺序
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序 (处理该事件的函数)
常用的鼠标事件
鼠标shij
