WebAPI
web - 网站、网页
API - application programing interface - 应用程序编程接口 - 接口其实是在编程的一个借用现实生活的接口概念的东西 —— 以前有一些大佬，把一些对象封装好了，对象有很多的属性和方法，我们只需要按照人家给的使用说明书，进行使用就行 —— 应用编程接口 就是一堆人家封装好的代码，我们需要按照人家给定的参数进行调用
接口 - 约定好的规格和参数的数据交互的手段
这个阶段学习什么 ？ 就是学人家封装好的方法和属性，学习这些东西有什么用，怎么用
js的组成
ECMAScript - es - 人家规定的一个标准-约定js的语法
DOM - 文档对象模型 - 把文档(页面)看成是一个对象，里面有很多操作页面元素的方法和属性
BOM - 浏览器对象模型 - 把浏览器看成一个对象，有很多方法和属性，进行操作浏览
DOM - 文档对象模型
DOM - 就是把文档看成一个对象
分享一个小案例的思路（实现开关灯）
分析思路：
1.在点击开灯的时候，让页面变白
2.在点击关灯的时候，让页面变黑
3.如何才能让页面变白变黑
只需要修改body的背景颜色就行
如何改body的背景颜色 - 学会操作body的样式
点击按钮默认是没有反应的，怎么用才能让按钮点击了有反应？
步骤：
1.获取两个按钮
2.给两个按钮注册点击事件
3.修改body的背景颜色
小技巧：
1.获取body，不需要根据任何条件获取，只需要 通过 document.body 获取就行
2.如果想要去掉行内样式，可以把行内样式设置为空字符串
3.不要在事件处理程序里面获取元素，这样降低执行效率，以及写代码会更加复杂
DOM里面经常干的事情：
1.获取元素
2.告诉它在被操作之后有什么反应 - 注册事件
3.反应该如何去做 - 在事件处理程序里面写代码
获取元素
document.querySelector(‘选择器’)
该方法的返回值是一个对象，如果找不到对应的元素，则返回null
小补充：
null和undefined的区别
null表示对象空，undefined表示值空
根据标签名获取
document.querySelectorAll(‘选择器’)
返回值是一个伪数组，注意： 不管页面上有多少个同名的元素，都是返回伪数组，不要以为页面中只有1个，就会返回一个元素对象给你！！！
如果要操作里面的每个元素，需要使用索引先获取出来
注册事件
事件就是浏览器和用户交互的一种手段，这个手段是基于一种 触发-响应 的机制
事件有很多，可以是点击，鼠标悬停，按键按下...
要使用事件，需要先注册事件，就是告诉元素，在它被操作(触发)之后，有什么反应(响应)
固定语法
事件源.on事件类型 = 事件处理程序
翻译成能看懂的：
元素.on交互 = function(){}
例如：
var btn = document.getElementById('btn');
btn.onclick = function(){ alert() }
事件源.addEventListener('事件类型',事件处理程序)
只要触发了对应的事件，事件处理程序里面的代码就会执行，意思是： 函数会在触发事件的时候被调用
使用style属性操作行内样式
style行内样式，是标签的一个属性，如果把标签看成是一个对象，style也是标签对象的一个属性，这个属性管理着所有的行内样式。
获取行内样式
固定语法：
元素.style.css样式
例如：
box.style.backgroundColor
注意：
1.该方式只能获取行内样式，无法获取内嵌样式
2.属性名后面要把原本的css样式的属性名里面的横向去掉，然后改成驼峰名的方式，比如： background-color,需要改成 backgroundColor
修改行内样式
元素.style.css样式 = 新的值;
例如
box.style.backgroundColor = 'yellow';
WebAPI阶段的调试错误
经常可能有效果出不来的情况，如果报错还是按照报错先处理错误
如果不报错，还是需要断点调试 —— 哪里不对点哪里
注册事件的时候，如果触发了事件没有反应，就只该事件的函数内部打一个断点，触发执行
如果注册事件的函数，触发了事件还是没反应 —— 多半 就是 注册事件的问题
注册事件会出什么问题呢？ 要么事件源有问题，要么事件的类型有问题，就在注册事件的地方打断点，然后刷新
检查事件源和事件类型，肯定有一个写错了，如果是事件源，就把事件源改对
如果是事件类型的单词写错 —— 删除重新写
只要修改了之后，再次刷新触发，如果函数执行了，证明注册事件就没问题
注意： 如果你给的颜色单词不对，我们的css是不认的
常见错误
无法设置null的属性 'onclck'
证明在某一行，使用了一个null这个对象，点了onclck属性，给它赋值了
找到对象是null的原因，解决掉
如果是注册事件出这个错，通常就是获取的元素的条件写错单词了，需要复制粘贴不要手写
操作元素对象的属性
操作元素的标准属性
只需要通过元素对象，直接点来访问和操作就行
访问
元素对象.属性名
例如:
box.id
box.className
box.title
注意： class属性，不能使用class这个键访问，需要使用className访问，原因是class在es5里面是保留字，在es6里面是关键字，为了避免命名冲突，使用className来代替
修改
元素对象.属性名 = 新的值：
例如:
img.src = './images/05.jpg';
操作自定义属性
如果是以前，使用了一套比较麻烦的API
元素.getAttribute(属性名) - 根据属性名获取属性值
元素.setAttribute(属性名,属性值) -- 根据属性名设置属性值
元素.removeAttribute(属性名) -- 删除某个属性
h5里面推出一套比较简单一些的
<div data-id="" data-abc="" data-src="">
</div>
要求所有的自定义属性以data-开头
这些属性就可以从 元素.dataset 这个对象里面直接获取
div.dataset.id
div.dataset.abc
div.dataset.src
let关键字
作用是：
声明一个变量
let 变量名 = 值;
和var有什么不同
1.声明的变量不会提升
2.声明的变量，如果在for或者是if等等这种块级结构里面，会形成块级作用域
如果在全局下声明，依然是全局，如果是在函数内声明，依然是局部
以后，能用let就不用var了
两个事件
获得焦点 —— 会在输入框得到可以输入的光标的时候触发
元素.onfocus = function(){}
失去焦点 —— 会在光标失去的时候，无法输入的时候触发
元素.onblur = funciton(){}
