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

WebAPI中包含两个部分：

• BOM：Browser Object Model，浏览器模型，提供和浏览器相关的操作

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

  
  
  1.png

BOM

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

window

全局对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/window

window.location

https://developer.mozilla.org/zh-CN/docs/Web/API/Location

提供地址栏的相关操作

window.history

https://developer.mozilla.org/zh-CN/docs/Web/API/History

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

DOM

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

0.png

获取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 被点击了')
}

事件类型

https://developer.mozilla.org/zh-CN/docs/Web/Events

表单类事件

鼠标类事件

键盘事件

注册事件

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); //打印鼠标的横坐标
})

常见的事件对象有：鼠标事件对象、键盘事件对象

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

dom进阶

事件默认行为

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

比如：

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

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

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

dom尺寸和位置

2.png

3.jpg

5.jpeg

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

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

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

Element.getBoundingClientRect()

6.png

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

事件传播机制

7.jpeg

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

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

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

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