[TOC]

js DOM 浏览器文档对象模型

前言

js 主要应用场合之一是在浏览器。这些内容本身和 js 语言无关。可以把它视作 js 的一组对象，类库。

浏览器模型

核心部件：

1. 渲染引擎: 将 HTML 解析为 DOM，CSS 解析为 CSSOM，然后合并为渲染树（render tree），计算布局（layout），绘制。
   1. Gecko (firefox)
   2. WebKit (safari)
   3. Blink (chrome)
   4. Trident (ie)
   5. EdgeHTML (edge)
2. js 解释器：词法分析（lexical analysis) 分解为词元（token），对词元进行语法分析(Parsing)，整理为语法树(syntax tree)。使用翻译器（translator）将代码转换为字节码，使用字节码解释器（bytecode interpreter）转换为机器码。
   1. Chakra (ie)
   2. Nitro/JavaScript Core (safari)
   3. Carakan (opera)
   4. SpiderMonksey (firefox)
   5. V8 (chrome)

浏览器不会等到完全加载再执行渲染和解析任务，当得到局部信息就开始渲染，就算加载完毕，也会因为 js 代码动态改变 DOM 导致进行以下操作：

1. 重新布局（reflow）：重新布局必然导致需要重绘
2. 重绘(repaint)：重绘不一定都要重新布局

嵌入网页：

<script type="application/javascript"> 
// js 代码
</script>

<!-- 导入外部 js 脚本 -->
<!-- defer：渲染完毕后执行 async:下载完毕后执行-->
<script src="./script.js" integrity="签名信息" defer />

<!-- 事件属性 -->
<button id="b" onclick="console.log(this.id)">点击</button>

<!-- URL 协议 -->
<a href="javascript:void console.log('hello')">点击</a>

window

代表当前浏览器窗口，也是当前页面的顶层对象。

1. name : 名字
2. closed ： 是否关闭
3. opener ： 父窗口
4. self / window ： 自身
5. frames : 子框架窗口组，自身的别名
6. length ： 子框架窗口数
7. frameElement : 窗口所在的框架
8. top：顶层窗口
9. parent: 父窗口
10. status： 状态栏信息
11. devicePixelRatio: css 像素和物理像素的比率
12. screenX / screenY ： 相对当前屏幕的距离
13. innerHeight / innerWidth： 窗口大小
14. outerHeight / outerWidth: 浏览器大小
15. scrollX / scrollY： 滚动距离
16. pageXOffset / pageYOffset : 滚动距离
17. locationbar : 地址栏
18. menubar ： 菜单栏
19. scrollbars ： 滚动条
20. toolbar： 工具栏
21. statusbar： 状态栏
22. personalbar：个人工具栏
23. document：文档对象
24. location: URL
25. navigator: 环境信息
26. history： 浏览器历史
27. localStorage： 本地存储区
28. sessionStorage： 会话存储区
29. console： 控制台
30. screen：屏幕
31. isSecureContext： 是否安全上下文（https）

方法：

1. alert(): 对话框
2. prompt(): 对话框（输入）
3. confirm(): 对话框（选择）
4. open(): 打开窗口
5. close(): 关闭窗口
6. stop(): 停止加载
7. moveTo(): 移动浏览器
8. moveBy(): 移动浏览器到相对位置
9. resizeTo(): 缩放浏览器
10. resizeBy(): 相对缩放浏览器
11. scroolTo() / scroll() : 滚动页面
12. scrollBy() : 相对滚动
13. print(): 打印
14. focus(): 激活焦点
15. blur(): 失去焦点
16. getSelection(): 选中的对象
17. getComputedStype(): 返回元素的样式
18. matchMedia(): 检查样式
19. requestAnimationFrame(): 重新布局时执行回调
20. requestIdleCallback(): 空闲时执行回调
21. postMessage(): 跨域通信，接受方监听 message 事件

事件：

1. load: 加载完毕
2. error： 脚本错误
3. afterprint: 打印后
4. beforepprint: 打印前
5. hashchange:
6. languagechange:
7. message:
8. MessageError:
9. offline: 离线
10. online: 上线
11. pagehide: 页面隐藏
12. pageshow: 页面显示
13. popstate: 弹出状态
14. storage: 存储
15. unhandledrejection: 未处理 Promise reject
16. unload: 卸载
17. message： 跨域信息

Navigator

导航对象。

1. userAgent : 用户代理标识
2. plugins: 插件
3. platform: 平台
4. onLine: 在线状态
5. language / languages: 语言
6. geolocation: 地理位置
7. cookieEnabled: cookie 是否打开
8. deviceMemory: 内存数量
9. hardwareConcurrency: cpu 核心数
10. connection: 网络链接信息

方法：

1. javaEnabled(): 是否能运行 java
2. sendBeacon(): 异步发送数据

Screen

屏幕对象。

1. height: 高
2. width: 宽
3. availHeight: 可用高度
4. availWidth: 可用宽度
5. pixelDepth: 色深
6. colorDepth: 程序色深
7. orientation: 屏幕方向

Cookie

保存到用户端的一小段文本（4 KB）。

1. Expires / Max-Age : 到期时间 （UTC 格式）、到期秒数
2. Domain : 域名
3. Path: 路径
4. Secure: https 下发送 cookie
5. HttpOnly: 脚本不可读取
6. SameSite: 限制第三方访问（CSRF 攻击）

XMLHttpRequest

ajax （异步 js xml 通信）的基础。不过通信内容早已从 xml 转换到 JSON 格式了。

1. readyState: 状态
   1. 0 ： 生成但没有 open()
   2. 1: open(), 但没 send()，可使用 setRequestHeader() 设置请求
   3. 2: send() 并收到返回的头信息和状态码
   4. 3： 正在接收数据体
   5. 4： 完毕或错误
   6. readyState 属性改变时，并引发 readyStateChange 事件
2. response ： 数据体
3. responseType: 数据体类型
   1. '' / text : 文本
   2. 'arraybuffer': 二进制数组
   3. ‘blob’ ： 二进制对象
   4. 'document': Document 对象
   5. 'json': JSON 对象
4. responseText: 返回的是文本类型时，通过这个属性得到数据
5. responseXML: 返回 HTML 或 XML 文档时，通过这个属性得到数据
6. responseURL: 服务器网址
7. status： http 状态码
   1. 200: ok
   2. 301: 原网页移动
   3. 302: 跳转
   4. 304：未修改
   5. 307: 临时重定向
   6. 401: 未授权
   7. 403: 禁止访问
   8. 404: 不存在
   9. 500: 服务器错误
8. statusText: 状态码信息
9. timeout： 请求超时长度，引发 timeout 事件
10. withCredentials: 用户信息是否包含在跨域请求中
11. upload: 上传

事件：

1. loadstart: 请求发出
2. progress: 进度
3. abort: 中止
4. error： 请求失败
5. load: 请求完成
6. timeout: 超时
7. loadend： 请求结束（包括失败）
8. readyStateChange: readyState 属性发生改变

方法：

1. open(): 初始化请求
2. send(): 发起请求，上传数据
3. setRequestHeader(): 设置请求头信息，在 send() 前设置
4. overrideMimeType(): 覆盖服务器 MIME 类型（非正常情况下使用），在send（）前设置
5. getResponseHeader(): 返回 HTTP 头信息
6. getAllResponseHeaders(): 返回 HTTP 全部头信息
7. abort(): 中止请求
8. sendBeacon(): 以浏览器进程发出请求，但无法处理结果。

Storage

存储到用户本地的数据。只有 window.sessionStorage 和 window.localStorage 两个具体实现。

1. length： 个数

方法：

1. setItem(): 设置键值对，可以用数组写法
2. getItem(): 读取
3. removeItem(): 删除
4. clear():清空
5. key(): 下标读取键

事件：

1. StorageChange: 数据发生变化

History

浏览器历史。状态对象和当前的网址关联起来，并对网址做修饰，它并不改变实际网址，但能隐藏实际网址。

1. length: 数量
2. state： 当前状态对象

方法：

1. back(): 移动到上一个网址
2. forward(): 移动到下一个网址
3. go(): 相对位置移动
4. pushState(): 添加记录
5. repllaceState(): 修改记录

事件：

1. popstate : 移动网址时

Location

提供 URL 相关操作。

1. href : URL
2. protocol: URL 协议
3. host：主机和端口
4. hostname：主机
5. port：端口
6. pathname：路径
7. search: 查询段，即 ? 后
8. hash: 段落,即 # 后
9. username：用户名
10. password: 密码
11. origin： 协议、主机、端口

例子： http://用户名:密码@baidu.com:88/s?word=美女#第一段

方法：

1. assign(): 跳转到指定网址
2. replace(): 替换当前网址（和跳转差不多，但覆盖历史记录）
3. reload(): 刷新网页
4. toString(): URL 字符串
5. encodeURI(): URL 编码（将URL不合法的字符编码为合法形式）
6. encodeURIComponent(): 将词元和不合法字符编码，词元就是有意义的符号，目的是将 URL 变为无效的字符串。
7. decodeURI(): 解码
8. decodeURIComponet(): 解码

URL

网址对象。属性和 Location 大体一样

1. searchParams：返回一个URLSearchParams实例

方法：

1. createObjectURL(): 根据 Blod 对象创建临时 URL。
2. revokeObjectURL(): 释放 URL 对象。

URLSearchParams

解析 URL 的查询部分

1. toString(): 返回字符串
2. append(): 追加查询参数，键值对
3. delete(): 删除参数
4. has(): 是否存在
5. set(): 设置。
6. get(): 读取
7. getall(): 读取所有同键名的。
8. sort(): 按词典排序。
9. keys(): 键组
10. values(): 值组
11. entries(): 键值组

ArrayBuffer

二进制内存数组。

Blob

二进制文件。

1. size： 数据大小
2. type: 数据类型。

方法：

1. slice() ：拷贝数据

File

Blob 子类

1. name ：文件名
2. lastModifileDate:最后修改时间

FileList

文件组。

1. length: 文件个数
2. item(): 下标返回文件。

FileReader

读取文件。

1. error : 错误对象
2. readyState: 状态
   1. 0: 未加载
   2. 1: 正在加载
   3. 2: 加载完成
3. result： 读取完成后的文件内容

方法：

1. readAsText(): 返回文本
2. readAsArrayBuffer(): 返回 ArrayBuffer 数组
3. readAsDataURL(): 返回 DataURL
4. readAsBinaryString(): 返回原始二进制字符串。
5. abort(): 中止

事件：

1. abort: 中止读取
2. error: 读取错误
3. load: 读取完成
4. loadstart: 开始读取
5. loadend: 读取结束
6. progress: 进度

FormData

表单。（即用户提交给服务器的可交互表格）

1. get(): 根据键取值
2. getAll(): 根据键取所有值
3. set(): 设置
4. delete() : 删除
5. append(): 添加
6. has(): 是否存在
7. keys() : 键组
8. values(): 值组
9. entries(): 键值组

indexedDB

大容量本地存储对象。

1. 键值对存储
2. 异步
3. 支持事务
4. 同源限制
5. 可大于 250 MB
6. 支持二进制存储

Worker

多线程环境。顶层全局对象 WorkerGlobalScope 只有 Navigator 和 Location 接口。

DOM

事件

参考

1. javascript 教程:https://wangdoc.com/javascript/dom/index.html