S04-02 Web-BOM

[TOC]

概述

~~BOM（Browser Object Model，浏览器对象模型）~~：是用于与浏览器窗口进行交互的 API 集合。它允许开发者通过 JavaScript 控制浏览器行为（如导航、窗口尺寸、历史记录等），与 DOM（文档对象模型，用于操作页面内容）相辅相成。

~~BOM 的核心对象~~：

BOM 的核心是 window 对象，代表浏览器窗口（全局对象）。其他 BOM 对象均作为 window 的属性存在

window：浏览器窗口的顶级对象，所有全局变量/函数均挂载在其下（如 window.alert()）。
navigator：提供浏览器及操作系统的信息（如浏览器名称、版本、是否联网等）。
location：提供当前页面的 URL 信息，并允许操作 URL（如跳转、重载）。
history：控制浏览器的会话历史（前进、后退、跳转历史记录）。
screen：获取用户屏幕的详细信息（如分辨率、色彩深度）。
document：属于 DOM 的一部分，代表当前页面内容（但常通过 BOM 的 window.document 访问）。

window

概述

~~window~~：对象是浏览器环境的顶级对象，代表当前浏览器窗口或标签页的实例。它是 JavaScript 与浏览器交互的桥梁，提供了控制窗口、文档、导航、定时器等功能的属性和方法。

~~核心特性~~：

全局对象：在浏览器中，window 是全局对象，所有全局变量和函数都自动成为 window 的属性和方法。
例外：ES6 的 let 和 const 声明的变量不会挂载到 window 上，而是存在于块级作用域中。

API-Window

~~实例属性~~：

window.document：指向当前窗口加载的文档（即 Document 对象），用于操作 DOM。
window.history：管理浏览历史（如 history.back(), history.pushState()）。
window.indexedDB：IDBFactory，为应用程序提供异步访问索引数据库的能力。
window.localStorage / window.sessionStorage：浏览器存储 API。
window.location：提供当前 URL 的信息和控制导航（如 location.href、location.reload()）。
window.navigator：获取浏览器信息（如用户代理、语言、平台等）。
window.opener：返回对打开当前窗口的 window 的引用。
window.performance：Performance ，返回包括 timing 和 navigation 属性的Performance对象，每个属性都是提供性能相关数据的对象。
window.screen：访问屏幕信息（如 screen.width, screen.height）。

~~实例方法~~：

定时器：

window.setTimeout()：(callback,delay?,...args?)，用于在指定延迟时间后执行函数或代码的全局方法。
window.setInterval()：(callback,delay,...args?)，用于周期性无限循环调用函数或代码直到被显式取消的全局方法。
window.clearTimeout()：(timeoutID)，用于取消由 setTimeout() 创建的定时器的全局方法。可以阻止尚未执行的定时器回调函数的运行。
window.clearInterval()：(intervalID)，用于终止由 setInterval() 创建的周期性定时器的全局方法。

弹窗交互：

window.alert()：(message)，用于在浏览器中显示一个模态对话框的全局方法，向用户展示一条消息并等待用户点击确认按钮，常用于简单的用户提示或调试。
window.prompt()：(text,defaultText?)，用于显示一个模态对话框的全局方法，允许用户输入文本并返回输入内容。适用于快速获取用户输入的场景。
window.confirm()：(message)，用于显示一个模态对话框的全局方法，允许用户通过点击“确定”或“取消”按钮进行二元选择（确认或取消）。

窗口：

window.open()：(url?,target?,windowFeatures?)，用于打开新浏览器窗口或标签页的全局方法。可以控制新窗口的 URL、尺寸、位置、工具栏等属性。
window.close()：()，用于关闭当前浏览器窗口或标签页的方法。其行为受浏览器安全策略限制。

网络请求：

window.fetch()：(url, options?)，用于发起网络请求的现代 API，基于 Promise 设计，取代了传统的 XMLHttpRequest。

CSS样式：

window.getComputedStyle()：(el,pseudoEl?)，只读，用于获取元素最终计算后的 CSS 样式的方法。

帧动画：

window.requestAnimationFrame()：(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。
window.cancelAnimationFrame()：(requestID)，用于取消由 requestAnimationFrame() 请求的动画帧的方法。

事件：

鼠标事件：

click：鼠标点击元素（按下并释放左键）。
dblclick：鼠标双击元素。
contextmenu：右键点击元素（弹出上下文菜单前）。
mousedown / mouseup：鼠标按下 / 释放。
mousemove：鼠标在元素内移动。
mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，在子元素之间移动不触发。
mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

keydown：按下键盘任意键。
keyup：松开键盘按键。

表单事件：

submit：表单提交。
reset：表单重置。
input：输入框内容实时变化。
change：表单元素值变化并失焦（如输入框、下拉框）。
focus / blur：元素获得 / 失去焦点。

窗口事件：

DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
load：页面及资源（如图片）加载完成。
beforeunload：窗口关闭或刷新前。
resize：窗口大小变化。
scroll：页面滚动。

过渡事件：

transitionend：CSS 过渡结束播放。

触摸事件：

touchstart：触摸开始。
touchmove：触摸移动。
touchend：触摸结束。

剪切板事件：

copy / paste：复制 / 粘贴内容。

媒体事件：

play / pause：媒体播放 / 暂停。

网络连接事件：

online / offline：用户网络连接 / 断开。

location

概述

location

~~location~~：对象提供了当前文档的 URL 信息，并允许操作页面导航。使用时可以省略window。

URL

~~URL（Uniform Resource Locator，统一资源定位符）~~：是用于定位和访问互联网资源的地址，通俗来说就是我们在浏览器中输入的“网址”。它定义了资源的位置、访问方式及名称，是互联网资源的标准标识符。

~~URL 的组成结构~~：

一个完整的 URL 通常包含以下部分：

组成部分	示例值	说明
协议	`https:`	定义如何访问资源（如 `http`、`https`、`ftp`）
域名	`www.example.com`	资源所在的服务器的名称（或 IP 地址）
端口	`:8080`	服务器监听的端口（可选，默认根据协议隐藏，如 HTTP 默认端口是 80）
路径	`/path/to/page`	资源在服务器上的具体位置（类似文件路径）
查询参数	`?name=John&age=25`	以 `?` 开头的键值对参数，用于向服务器传递附加信息（如搜索关键词）
哈希	`#section2`	页面内的锚点定位标识（浏览器滚动到指定位置，不会发送到服务器）

~~URL 的编码规则~~：

URL 中只能包含特定字符（字母、数字和 -_.~ 等），其他字符需通过 百分号编码 转换：

示例：空格 → %20，中文 → %E4%B8%AD
作用：确保特殊字符（如空格、符号、非英文字符）能安全传输。

~~注意事项~~：

安全性：使用 https 协议（如 https://bank.com）加密数据传输，避免敏感信息泄露。
长度限制：浏览器对 URL 长度有限制（通常 2000 字符左右），超长 URL 可能导致错误。
SEO 友好：清晰的路径和参数（如 /products/phones）有助于搜索引擎优化。

API-Location

Location

属性：

href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。

方法：

location.assign()：(url)，用于导航到新 URL 的核心方法，它会将新页面添加到浏览历史中（用户可通过“后退”按钮返回）。
location.replace()：(url)，用于导航到新 URL 的方法，不会在浏览历史中新增记录，而是直接替换当前页面的历史条目（用户无法通过“后退”按钮返回原页面）。
location.reload()：(forceRefresh?)，用于重新加载当前页面，支持从缓存或服务器强制获取最新内容。

URL

属性：

与 Location 属性一致
href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。
特有属性：
url.searchParams：URLSearchParams，返回专门用于操作 URL 查询参数的 URLSearchParams 对象（即 ? 后的键值对）。

方法：

new URL()：(urlString,baseUrlString?)，用于创建并解析一个 URL 对象，提供对 URL 各组成部分的标准化访问和操作。
URL.createObjectURL()：(object)，用于为 Blob 或 File 对象生成临时 URL 的方法，允许在浏览器中直接引用本地文件或内存中的数据（如图片、视频、二进制流等）。
URL.revokeObjectURL()：(objectURL)，用于释放由 URL.createObjectURL() 生成的临时 URL 所占用的内存，避免内存泄漏。

URLSearchParams

方法：

new URLSearchParams()：(init?)，创建一个专门用于操作 URL 的查询参数的实例。
params.append()：(key, value)，用于向 URL 的查询参数中添加一个新的键值对，即使键已存在也不会覆盖原有值，而是追加新的值。
params.delete()：(key)，用于删除 URL 查询参数中指定键的所有值。
params.get()：(key)，用于从 URL 的查询参数中获取指定键的第一个值。
params.set()：(key,value)，用于设置指定键的查询参数值。若键已存在，则覆盖其所有值；若不存在，则添加新的键值对。
params.has()：(key)，用于检查 URL 的查询参数中是否存在指定键。
params.getAll()：(key)，用于从 URL 的查询参数中获取指定键的所有值（以数组形式返回）。
params.sort()：()，用于按键名对 URL 的查询参数进行排序，并原地修改参数列表。
params.toString()：()，用于将查询参数序列化为 URL 编码的字符串（即 ? 后的键值对部分）。
params.keys()：()，用于获取 URL 查询参数中所有键的迭代器。它允许你遍历查询字符串中的所有键名。
params.values()：()，用于获取 URL 查询参数中所有值的迭代器。它允许你遍历查询字符串中的所有参数值。
params.entries()：()，用于获取 URL 查询参数中所有键值对的迭代器。它允许遍历查询字符串中的所有参数，并以 [key, value] 数组形式返回每个键值对。
params.forEach()：(callback,thisArg?)，用于遍历 URL 查询参数中的所有键值对，并对每个键值对执行回调函数。

query

解析URL中的query，并返回对象的形式

javascript

function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf('?') > -1) {
    var index = queryStr.indexOf('?');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split('&');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split('=');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history

概述

~~history~~：对象用于管理用户的浏览会话历史记录。它允许开发者以编程方式操作浏览器的历史记录，实现无刷新页面导航等功能，尤其在单页面应用（SPA）中至关重要。

API-History

属性：

history.length：number，只读，返回一个表示会话历史中的条目数量的整数，包括当前加载的页面。
history.state：State，用于访问/操作浏览器历史记录中的状态对象。主要用于SPA中的导航操作。
history.scrollRestoration：auto|manual，默认：auto，控制浏览器是否在导航时自动恢复滚动位置。

方法：

history.back()：()，用于让浏览器回到历史记录中的前一个页面。可理解为模拟用户点击浏览器的“后退”按钮。
history.forward()：()，用于让浏览器前进到历史记录中的下一个页面。可理解为模拟用户点击浏览器的“前进”按钮。
history.go()：(delta)，用于在浏览器历史记录栈中进行前进或后退操作。
history.pushState()：(state,title?,url?)，用于将一个新的历史记录条目添加到浏览器的历史记录栈中，而不会刷新页面。
history.replaceState()：(state,title?,url?)，用于替换当前浏览器历史记录中的条目。

事件：

onpopstate：是一个浏览器的事件监听器，用于监听浏览器历史记录的变化。当用户通过浏览器的“后退”/“前进”按钮导航，或通过 pushState()/replaceState() 方法修改历史记录时触发。

navigator

概述

~~navigator~~：对象用于获取浏览器和操作系统的信息。它提供了丰富的属性和方法，帮助开发者检测用户环境、设备特性及浏览器功能支持情况，从而实现跨平台适配或功能增强。

API-Navigator

Navigator

属性：

浏览器标识：

navigator.userAgent：string，返回浏览器的完整用户代理字符串（包含浏览器名称、版本、操作系统等信息）。

平台与操作系统：

navigator.platform：string，返回操作系统平台（如 "Win32"、"MacIntel"、"Linux x86_64"）。
navigator.oscpu：string，返回操作系统详细版本（仅 Firefox 支持）。
navigator.language：string，返回浏览器首选语言（如 "zh-CN"）。
navigator.languages：string，返回用户偏好语言列表（按优先级排序）。

硬件与设备：

navigator.hardwareConcurrency：number，返回 CPU 核心数（用于优化多线程任务）。
navigator.deviceMemory：number，返回设备内存大小（以 GB 为单位，如 8，需 HTTPS）。
navigator.maxTouchPoints：number，返回设备支持的最大触控点数（检测触屏设备）。

网络与连接：

navigator.onLine：boolean，返回布尔值，表示浏览器是否联网。
navigator.connection：NetworkInformation，返回网络连接信息对象 NetworkInformation（如类型、速度、流量节省模式等，需 HTTPS）。

功能检测与权限：

navigator.cookieEnabled：boolean，返回布尔值，表示是否启用 Cookie。
navigator.permissions：Permissions，提供权限查询接口的 Permissions 对象（如地理位置、摄像头权限）。

地理位置：

navigator.geolocation：Geolocation，返回一个用于访问设备的地理位置的 Geolocation 对象。

剪切板：

navigator.clipboard：Clipboard，返回一个用于读写访问系统剪贴板内容的 Clipboard 对象。

Geolocation

方法：

navigator.geolocation.getCurrentPosition()：(successCallback,errorCallback?,options?)，用于获取用户设备当前位置的异步方法。
navigator.geolocation.watchPosition()：(successCallback,errorCallback?,options?)，用于持续监听用户设备位置变化的异步方法，当位置更新时会重复触发回调函数。
navigator.geolocation.clearWatch()：(watchID)，用于停止通过 watchPosition() 启动的持续位置监听。

Clipboard

方法：

navigator.clipboard.read()：()，用于异步读取剪贴板内容的现代 API，支持读取多种数据类型（如文本、图片等）。
navigator.clipboard.readText()：(text)，用于异步读取剪贴板中的纯文本内容。
navigator.clipboard.write()：(data)，用于异步向剪贴板写入多种数据类型（如文本、图片、HTML 等）的现代 API。

screen

概述

~~screen~~：对象是浏览器提供的全局对象（通过 window.screen 访问），用于获取用户屏幕的硬件信息，如分辨率、颜色深度、可用显示区域等。它帮助开发者适配不同设备的屏幕特性，优化网页的显示效果。

API-Screen

属性：

screen.width / screen.height：number，屏幕的总宽度 / 高度（像素），包括系统任务栏等不可用区域。
screen.availWidth / screen.availHeight：number，屏幕的可用宽度 / 高度（像素），减去固定组件（如任务栏）。
screen.colorDepth：number，颜色深度（位数），表示屏幕支持的颜色数量（如 24 表示 16,777,216 色）。
screen.pixelDepth：number，像素深度（位数），通常与 colorDepth 相同。
screen.orientation：Object，屏幕方向信息（需通过 window.screen.orientation 访问，包含 type 和 angle 属性）。

S04-02 Web-BOM ​

概述 ​

window ​

概述 ​

API-Window ​

location ​

概述 ​

location ​

URL ​

API-Location ​

Location ​

URL ​

URLSearchParams ​

query ​

history ​

概述 ​

API-History ​

navigator ​

概述 ​

API-Navigator ​

Navigator ​

Geolocation ​

Clipboard ​

screen ​

概述 ​

API-Screen ​

S04-02 Web-BOM

概述

window

概述

API-Window

location

概述

location

URL

API-Location

Location

URL

URLSearchParams

query

history

概述

API-History

navigator

概述

API-Navigator

Navigator

Geolocation

Clipboard

screen

概述

API-Screen