WebAPI

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

WebAPI 中包含两个部分：

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

# BOM

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

# windowopen in new window

# window.locationopen in new window

提供地址栏的相关操作

# window.historyopen in new window

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

# DOMopen in new window

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

# 获取 dom

# 创建 dom

# 更改 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 内容

# dom 样式

在 JS 中，有两种样式：

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

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

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

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

关于样式对象，注意：

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

# 监听 dom 事件

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

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

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

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

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

# 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>

# 事件类型open in new window

# 表单类事件

# 鼠标类事件

# 键盘事件

# 注册事件

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

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

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

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

属性名为on+事件类型

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

这种方式的特点是：

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

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

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

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

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

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

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

# 事件处理函数

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

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

常见的事件对象有：鼠标事件对象open in new window、键盘事件对象open in new window

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

# 事件默认行为

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

比如：

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

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

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

# 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.scrollHeightopen in 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()open in new window

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

# 事件传播机制

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

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

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

# 文件 API

文件 APIopen in new window

# 拖放 API

拖放 APIopen in new window

# Web Storage API

Web Storage APIopen in new window

# IndexedDB API

IndexedDB APIopen in new window

# Web Worker API

Web Worker APIopen in new window

# 地理位置 API API

地理位置 APIopen in new window

# Clipboard API API

Clipboard API APIopen in new window

# Web Worker API

Web Animations APIopen in new window

# 交叉观察器 API

交叉观察器 APIopen in new window

# MutationObserver API

MutationObserver APIopen in new window