【博学谷学习记录】超强总结，用心分享｜WebAPI编程(一)
目录
WebAPIs
DOM
获取元素
事件基础
事件三要素
常见的鼠标事件
操作元素
改变元素内容（获取或设置）
常见元素的属性操作
表单元素的属性操作
样式属性操作
WebAPIs
API
API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调动使用即可。
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。因为Web API很多，所以我们将这个阶段称为Web APIs，此处的Web API特指浏览器提供的一系列API，即操作网页的一系列工具，例如操作HTML标签，操作页面地址的方法。
API&Web API
1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
2.Web API主要是针对浏览器提供的接口，主要针对于浏览器做交互效果。
3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）。
DOM
文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
获取元素
1.根据ID获取
语法：Document.getElementById(id)
作用：根据ID获取元素对象
参数：ID值，区分大小写的字符串
返回值：元素对象或null
2019-9-9
2.根据标签名获取元素
语法：document.getElementByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合
- 知否知否，应是绿肥红瘦
- 知否知否，应是绿肥红瘦
- 知否知否，应是绿肥红瘦
- 知否知否，应是绿肥红瘦
3.H5新增获取元素对象
1.document.getElementsByClassName（'类名'）
获取类名返回元素对象集合
2.document.querySelector
根据指定选择器返回第一个元素对象
3.document.querySelectorAll
根据指定选择器返回
盒子1
盒子2
4.获取特殊元素
1.document.body
获取body元素对象
2.document.documentElement
获取html元素对象
事件基础
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript的事件。
事件三要素
1.事件源（谁）：触发事件的元素
2.事件类型（什么事件）：例如click点击事件
3.事件处理程序（做啥）：事件触发后要执行的代码
执行时间的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
常见的鼠标事件
| 鼠标事件 | 触发事件 |
| onclick | 鼠标点击左键出发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点出发 |
| onblur | 失去鼠标焦点出发 |
| onmousemove | 鼠标移动出发 |
| onmouseup | 鼠标弹起出发 |
| onmousedown | 鼠标按下触发 |
操作元素
JavaScript的DOM操作可以改变网页内容结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
改变元素内容（获取或设置）
1.element.innerText
从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉
2.element.innerHTML
起始位置到终止位置，全部内容包括HTML标签，同时保留空格和换行
我是文字
123
常见元素的属性操作
1.innerText、innerHTML
2.src、href
3.id、alt、title
获取属性的值：元素对象.属性名
设置属性的值：元素对象.属性名=值
表单元素的属性操作
利用DOM操作如下表单元素的属性。
type、value、checked、selected、disabled
获取属性的值：元素对象.属性名
设置属性的值：元素对象.属性名=值
样式属性操作
1.element.style
行内样式操作
2.element.className
类名样式操作
文本