# WebAPI

和标准库不同，WebAPI 是浏览器提供的一套 API，用于操作浏览器窗口和界面

WebAPI 中包含两个部分：

BOM：Browser Object Model，浏览器模型，提供和浏览器相关的操作
DOM：Document Object Model，文档模型，提供和页面相关的操作

# BOM

BOM 提供了一系列的对象和函数，提供和浏览器本身相关的操作

# window (opens new window)

API	含义	备注
`open()` (opens new window)	打开一个新的浏览器窗口	返回新窗口的 window 对象
`close()` (opens new window)	关闭浏览器窗口	只能关闭使用 open 打开的浏览器窗口
`setTimeout()` (opens new window)	设置一个计时器在一段时间后自动执行某个函数	参数 1：函数，无参，this 指向 window 参数 2：时间，毫秒返回：计时器的 ID
`clearTimeout()` (opens new window)	清除指定 ID 的计时器	传入计时器的 ID
`setInterval()` (opens new window)	设置一个计时器每隔一段时间自动执行某个函数	参数 1：函数，无参，this 指向 window 参数 2：时间，毫秒返回：计时器的 ID
`clearInterval()` (opens new window)	清除指定 ID 的计时器	传入计时器的 ID
`alert()` (opens new window)	弹出提示框	不同的操作系统外观有差异
`confirm()` (opens new window)	弹出确认框	不同的操作系统外观有差异

# window.location (opens new window)

提供地址栏的相关操作

API	含义	备注
`Location.href` (opens new window)	获取或设置页面当前地址	设置地址回导致页面跳转
`Location.protocol` (opens new window)	获取或设置地址中的协议部分
`Location.host` (opens new window)	获取或设置地址中的主机名和端口号
`Location.hostname` (opens new window)	获取或设置地址中的主机名
`Location.port` (opens new window)	获取或设置地址中的端口号
`Location.pathname` (opens new window)	获取或设置地址中的路径部分
`Location.search` (opens new window)	获取或设置地址中的参数部分
`Location.hash` (opens new window)	获取或设置地址中的 hash 部分
`Location.reload()` (opens new window)	刷新页面

# window.history (opens new window)

提供当前窗口历史记录的操作

API	含义	备注
`History.back()` (opens new window)	后退
`History.forward()` (opens new window)	前进
`History.go()` (opens new window)	根据相对当前页面的偏移量，进入指定的记录页
`History.pushState()` (opens new window)	在历史记录中添加一条记录	页面不刷新
`History.replaceState()` (opens new window)	替换当前记录	页面不刷新

# DOM (opens new window)

DOM 是一个对象，它对应到 HTML 中的节点

# 获取 dom

API	含义	备注
document.getElementById()	根据元素 id 获取 dom	得到单个 dom
document.getElementsByTagName() dom.getElementsByTagName()	根据元素名称获取 dom	得到 dom 的伪数组
document.getElementsByClassName() dom.getElementsByClassName()	根据元素类样式获取 dom	得到 dom 的伪数组
document.querySelector() dom.querySelector()	根据 CSS 选择器获取 dom	得到第一个匹配的 dom
document.querySelectorAll() dom.querySelectorAll()	根据 CSS 选择器获取 dom	得到所有匹配的 dom 伪数组
document.documentElement	获取 html 元素
document.body	获取 body
document.head	获取 head
dom.children	获取 dom 的子元素	得到 dom 的伪数组
dom.childNodes	获取 dom 的子节点	得到 dom 节点的伪数组关于节点对象点这里 (opens new window)
dom.previousElementSibling	得到 dom 前一个兄弟元素
dom.nextElementSibling	得到 dom 后一个兄弟元素
dom.parentElement	得到 dom 的父元素

# 创建 dom

API	含义	备注
document.createElement()	创建一个 dom 并返回	传入元素名称

# 更改 dom 结构

这里是指更改文档树（DOM 树）

API	含义	备注
dom.remove()	从文档树中删除 dom	不是删除对象
dom.removeChild()	删除 dom 的某个子节点	传入 dom 对象
`dom.insertBefore()` (opens new window)	在 dom 的子节点中，添加一个新节点到另一个节点之前
dom.appendChild()	添加一个新节点到 dom 的子节点末尾	传入 dom 对象

# dom 属性

本节的「属性」，是指 HTML 元素的「属性」

属性有两种：

标准属性：HTML 元素本身拥有的属性，例如：
- a 元素的 href、title
- input 的 value
- img 的 src
- ......
自定义属性：HTML 元素标准中未定义的属性

所有标准属性均可通过 dom.属性名 得到，其中：

布尔属性会被自动转换为 boolean
路径类的属性会被转换为绝对路径
标准属性始终都是存在的，不管你是否有在元素中属性该属性
class 由于和关键字重名，因此需要使用 className

所有的自定义属性均可通过下面的方式操作：

dom.setAttribute(name, value)，设置属性键值对
dom.getAttribute(name)，获取属性值

自定义属性和元素源码书写是对应的，可以尝试获取 a 元素的 href 属性对比标准属性，看看有什么不同。

# dom 内容

API	含义	备注
dom.innerText	获取或设置元素文本内容	设置时会自动进行 HTML 实体编码
dom.innerHTML	获取或设置元素的 HTML 内容

# dom 样式

在 JS 中，有两种样式：

内联样式：元素的 style 属性中书写的样式
计算样式（最终样式）：元素最终计算出来的样式

JS 可以获取内联样式和计算样式，但只能设置内联样式

下面罗列了样式的常见操作：

dom.style：获取元素的内联样式，得到样式对象
- 对象中的所有样式属性均可以被赋值，赋值后即可应用样式到元素的 style 中
getComputedStyle(dom)：获取元素的计算样式，得到一个样式对象
- 该样式对象中的属性是只读的，无法被重新赋值

关于样式对象，注意：

当给样式赋值为空字符串时，相当于删除内联样式
当给样式的赋值不合法时，赋值语句无效，不会报错
CSS 的短横线命名法，在属性名中表现为驼峰命名法

# 监听 dom 事件

监听事件可以描述为一句话：

某个 DOM发生了某件事之后，我需要做某些处理

某个 DOM：监听谁？
某件事（事件类型）：它发生了什么？
某些处理（处理函数）：我要做什么？

下面是一段事件监听代码：

// 为dom注册点击事件，当被点击时，自动运行事件处理函数
dom.onclick = function () {
  console.log('dom 被点击了');
};

1
2
3
4

# dom 操作类样式（html5新增）

// 添加类样式
dom.classList.add('a');  // <div class="a"></div>
dom.classList.add('b');  // <div class="a b"></div>
dom.classList.add('c');  // <div class="a b c"></div>

// 是否包含某个类样式
dom.classList.contains('a');  // true 

// 移除类样式
dom.classList.remove('a');  // <div class="b c"></div>

// 切换类样式
dom.classList.toggle('a'); // <div class="a b c"></div>
dom.classList.toggle('a'); // <div class="b c"></div>
dom.classList.toggle('a'); // <div class="a b c"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 事件类型 (opens new window)

# 表单类事件

事件名称	触发时机	备注
submit	表单被提交时触发	注册到 form 元素上
input	文本框改变后立即出发	注册到 input、textarea 上
change	文本框改变后、失去焦点时触发下拉列表、多选框、单选框改变后立即触发	注册到 input、select、textarea 上
reset	表单被重置时触发	注册到 form 元素上
focus	元素聚焦时触发
blur	元素失去焦点时触发

# 鼠标类事件

事件名称	触发时机	备注
click	鼠标按下抬起后触发
contextmenu	右键菜单显示前触发
mousedown	鼠标按下时触发
mouseup	鼠标抬起时触发
mousemove	鼠标在元素上移动时触发
mouseenter	鼠标进入元素时触发（不冒泡）
mouseleave	鼠标离开元素时触发（不冒泡）
mouseover	鼠标进入元素时触发（冒泡）
mouseout	鼠标离开元素时触发（冒泡）
wheel	鼠标滚轮滚动时触发

# 键盘事件

事件名称	触发时机	备注
keydown	某个键被按下时触发
keyup	某个键被抬起时触发

# 注册事件

JS 提供了三种方式注册事件

方式 1：将事件注册写到元素上，这种方式基本被弃用

<button onclick="js代码">按钮</button>

方式 2：使用 dom 属性注册事件

属性名为on+事件类型

// 监听事件
dom.onclick = function () {
  // 处理函数
};
// 移除监听事件
dom.onclick = null;

1
2
3
4
5
6

这种方式的特点是：

优点：易于监听、覆盖、移除
缺点：只能注册一个处理函数
缺点：某些事件不支持用这种方式注册

方式 3：使用 addEventListener 方法注册事件

dom.addEventListener('click', function () {
  // 处理函数1
});
dom.addEventListener('click', function () {
  // 处理函数2
});

1
2
3
4
5
6

这是最完美的事件注册方式，如果要移除用这种方式注册的事件，需要改写代码

function handler1() {
  // 处理函数1
}
function handler2() {
  // 处理函数2
}

dom.addEventListener('click', handler1);
dom.addEventListener('click', handler2);

dom.removeEventListener('click', handler1); // 移除监听函数1

1
2
3
4
5
6
7
8
9
10
11

# 事件处理函数

当事件发生时，会自动调用事件处理函数，并向函数传递一个参数，该参数称之为事件对象，里面包含了事件发生的相关信息，比如鼠标位置、键盘按键等等

dom.addEventListener('click', function (e) {
  console.log(e.clientX); //打印鼠标的横坐标
});

1
2
3

常见的事件对象有：鼠标事件对象 (opens new window)、键盘事件对象 (opens new window)

另外，在事件处理函数中，this始终指向注册事件的 dom

# 事件默认行为

某些元素的某些事件，浏览器会有自己的默认行为

比如：

a 元素的 click 事件，浏览器会跳转页面
form 元素的 submit 事件，浏览器会提交表单，最终导致页面刷新
文本框的 keydown 事件，浏览器会将按键文本显示到文本框中
......

如果我们要阻止浏览器的默认行为，就需要在对应时间中加入以下代码：

// e为事件对象
e.preventDefault();

1
2

# dom 尺寸和位置

window.screen.width 获取屏幕宽度
window.screen.height 获取屏幕高度
window.innerWidth 获取网页视口宽度 (包含滚动条)
window.innerHeight 获取网页视口高度 (包含滚动条)

document.documentElement.clientWidth 获取网页视口宽度 (不包含滚动条)
document.documentElement.clientHeight 获取网页视口高度 (不包含滚动条)

dom.offsetWidth 获取元素的宽度 (包含滚动条) (border+padding+width)
dom.offsetHeight 获取元素的高度 (包含滚动条) (border+padding+height)
dom.clientWidth 获取元素宽度 (不包含滚动条) (padding+width)
dom.clientHeight 获取元素高度 (不包含滚动条) (padding+height)

dom.scrollHeight (opens new window) 获取元素内容高度，包括由于溢出导致的视图中不可见内容，包括内边距，但不包括元素的边框、外边距以及水平滚动条（如果存在）
dom.scrollWidth 获取元素内容宽度

dom.scrollLeft 获取元素内容水平滚动条位置
dom.scrollTop 获取元素内容垂直滚动条位置

调用dom.scrollTo(x, y)可以设置元素的滚动位置，x 和 y 分别表示 scrollLeft 和 scrollTop

该方法通用元素回到元素顶部dom.scrollTo(0, 0)

如果要监听元素的滚动，可以监听事件类型：scroll

#

Element.getBoundingClientRect: 其提供了元素的大小及其相对于视口的位置。 Element.getBoundingClientRect() (opens new window)

上图中的 top、left、right、bottom 均相对于视口

# 事件传播机制

```js // 在冒泡阶段触发 div.onclick = function () {};

// 在捕获阶段触发事件 div.addEventListener('click', function () {}, true);

// 在冒泡阶段触发事件（默认） div.addEventListener('click', function () {}, false);


```js
// 事件处理函数
function handler(e) {
  e.target; // 获取事件源（目标阶段的dom）
  e.stopPropagation(); // 阻止事件继续冒泡
}

1
2
3
4
5
6
7

# 文件 API

文件 API (opens new window)

# 拖放 API

拖放 API (opens new window)

# Web Storage API

Web Storage API (opens new window)

# IndexedDB API

IndexedDB API (opens new window)

# Web Worker API

Web Worker API (opens new window)

# 地理位置 API API

地理位置 API (opens new window)

# Clipboard API API

Clipboard API API (opens new window)

# Web Worker API

Web Animations API (opens new window)

# 交叉观察器 API

交叉观察器 API (opens new window)

# MutationObserver API

MutationObserver API (opens new window)

← 标准库学习笔记 →