Web API（仅浏览器环境）

BOM

在JavaScript中，BOM（Browser Object Model）指的是与浏览器交互的对象模型。它为开发者提供了与浏览器窗口交互的方法和接口，不同于DOM（Document Object Model），BOM主要关注的是浏览器窗口和框架，而不是文档的内容。

窗口（Window）对象

在JavaScript中，Window 对象是一个非常重要的概念，它代表了浏览器窗口，并且是BOM（Browser Object Model）的核心部分。Window 对象提供了许多用于与浏览器窗口交互的属性和方法。

属性

尺寸
- window.innerWidth：返回视口的宽度，以像素为单位。这个宽度不包括窗口边框和可能的侧边栏。
- window.innerHeight：返回视口的高度，以像素为单位。这个高度不包括窗口边框、工具栏、地址栏和其他可能的浏览器界面元素。
- window.outerWidth：返回浏览器窗口的外部宽度，以像素为单位。这个宽度包括窗口边框和可能的侧边栏。
- window.outerHeight：返回浏览器窗口的外部高度，以像素为单位。这个高度包括窗口边框、工具栏、地址栏和其他可能的浏览器界面元素。
位置
- window.pageXOffset：用于获取文档在水平方向上已滚动的像素值。
- window.pageYOffset：用于获取文档在垂直方向上已滚动的像素值。
- window.scrollX：较新的属性名，在功能上与 window.pageXOffset 完全相同。
- window.scrollY：较新的属性名，在功能上与 window.pageYOffset 完全相同。
- window.screenX：浏览器窗口相对于屏幕左上角的水平方向距离的像素值。
- window.screenY：浏览器窗口相对于屏幕左上角的垂直方向距离的像素值。
- window.screenLeft：与 window.screenX 类似，但在某些浏览器中这些属性更常用。
- window.screenTop：与 window.screenY 类似，但在某些浏览器中这些属性更常用。
- window.visualViewport：提供有关视口（用户当前可见区域）的信息，包括尺寸和缩放级别。
- window.devicePixelRatio：返回一个数值，表示当前显示设备的物理像素与CSS像素的比例。
基本概念
- 物理像素：显示器实际使用的最小显示单元。
- CSS像素：Web开发中用于布局和样式的抽象单位，可能与物理像素不一致。
窗口界面组件
- window.locationbar：提供有关地址栏的信息。
- window.menubar：提供有关菜单栏的信息。
- window.personalbar：提供有关个人工具栏的信息。
- window.scrollbars：提供有关窗口滚动条的信息。
- window.statusbar：提供有关状态栏的信息。
- window.toolbar：提供有关浏览器工具栏的信息。
窗口
- window.self：指向当前窗口。
- window.top：指向当前窗口的顶层窗口。
- window.parent：指向当前窗口的父窗口。
- window.opener：指向打开当前窗口的窗口。
其他属性
- speechSynthesis：提供语音合成功能，允许对文本进行语音读出。
- console：提供访问浏览器控制台的功能，用于打印日志、错误、警告等。
- name：当前窗口的名称。
- closed：表示窗口是否已被关闭。

方法

窗口位置
- window.moveTo(x, y)：将将浏览器窗口移动到屏幕上的特定坐标。
js
```
// 将窗口移动到屏幕的 (100, 100) 位置
window.moveTo(100, 100);
```
- window.moveBy(deltaX, deltaY)：将浏览器窗口相对于其当前位置移动指定的像素数。
js
```
// 将窗口向右移动 50 像素，向下移动 50 像素
window.moveBy(50, 50);
```
窗口尺寸
- window.resizeTo(width, height)：将窗口的大小调整到指定的宽度和高度。
js
```
// 将窗口大小调整为宽度 800 像素，高度 600 像素
window.resizeTo(800, 600);
```
- window.resizeBy(deltaX, deltaY)：根据指定的像素数值增加或减少窗口的大小。
js
```
// 将窗口宽度增加 100 像素，高度增加 50 像素
window.resizeBy(100, 50);
```
窗口控制
- window.open(url, windowName, [windowFeatures])：打开一个新的浏览器窗口或标签页。
常用的 windowFeatures 选项
- width=px 和 height=px：设置窗口的宽度和高度（以像素为单位）。
- left=px 和 top=px：设置窗口在屏幕上的位置（以像素为单位）。
- menubar=yes|no：是否显示菜单栏。在现代浏览器中，此选项可能不起作用或受限。
- toolbar=yes|no：是否显示浏览器的工具栏。同样，在许多现代浏览器中，这个特性可能被忽略。
- location=yes|no：是否显示地址栏。出于安全考虑，大多数现代浏览器始终显示地址栏。
- status=yes|no：是否显示状态栏。大部分现代浏览器不支持隐藏状态栏。
- resizable=yes|no：窗口是否可以被用户调整大小。在一些浏览器中，新窗口默认是可调整大小的。
- scrollbars=yes|no：是否允许显示滚动条。
注意事项：
- 出于安全考虑，现代浏览器对弹出窗口有严格的限制。通常只有在用户的直接操作（如点击事件）下，window.open() 才能打开新窗口。
- 部分浏览器可能会阻止或询问用户是否允许弹窗，检测弹窗是否被屏蔽：
js
```
let blocked = false, url = 'http://www.wrox.com'
try {
  let wroxWin = window.open(url, "_blank")
  if (wroxWin == null) {
    blocked = true
  }
}catch(e){
  blocked = true
}

if (blocked) {
  alert("无法打开新窗口，请点击此链接：" + url)
}
```
- window.close()：关闭当前浏览器窗口。
使用限制：
- 只能关闭由window.open()创建的窗口。
- 在现代浏览器中，出于安全考虑，不能用这个方法关闭用户自己打开的窗口或标签页。
动画帧
- requestAnimationFrame(callback)：告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘前调用指定的回调函数更新动画。
js
```
let animationId = requestAnimationFrame(step);
```
- cancelAnimationFrame(id)：取消由 requestAnimationFrame() 方法预定的动画帧请求。
js
```
cancelAnimationFrame(animationId);
```
定时器
- setTimeout(function, delay, [...args])：在指定的延迟后（以毫秒为单位），执行一次提供的函数。返回一个定时器ID，可用于取消定时器。
js
```
var timer = setTimeout(function() { 
    console.log("Hello after 3 seconds"); 
}, 3000);
```
- setInterval(function, interval, [...args])：每隔指定的间隔时间（以毫秒为单位），重复执行提供的函数。返回一个间隔ID，可用于取消间隔。
js
```
var interval = setInterval(function() { 
    console.log("This message appears every 2 seconds"); 
}, 2000);
```
- clearTimeout(timeoutId)：取消由 setTimeout 设置的定时器。
js
```
clearTimeout(timer); // 取消setTimeout设置的定时器
```
- clearInterval(intervalId)：取消由 setInterval 设置的定时器。
js
```
clearInterval(interval); // 取消setInterval设置的间隔
```
定时器动画
1. 匀速动画：必须添加定位 position，才能使用element.style.left/top。
  - 核心原理：通过定时器setInterval()不断移动固定距离
  - 实现步骤：
    1. 获取元素当前位置
    2. 让元素在当前位置加上一个移动距离
    3. 利用定时器不断重复执行这个移动距离
    4. 加上一个结束定时器的条件
2. 缓动动画：步长 = (目标位置 - 现在位置) / 10
  - window.requestAnimationFrame()：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
  js
```
window.requestAnimationFrame(callback);
```
  - window.CancelAnimationFrame()：取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求。
  js
```
window.CancelAnimationFrame(requestID);
```
弹窗对话框
- alert(message)：示一个包含指定消息和一个确认按钮的警告框。
js
```
alert("Hello, world!");
```
- confirm(message)：显示一个包含指定消息、一个确认按钮和一个取消按钮的确认框。如果用户点击确认，返回 true；如果点击取消，返回 false。
js
```
if (confirm("Are you sure?")) {
    console.log("User clicked OK!");
} else {
    console.log("User clicked Cancel!");
}
```
- prompt(message, [default])：显示一个包含指定消息、一个文本输入框、一个确认按钮和一个取消按钮的提示框。如果用户输入文本并点击确认，返回输入的文本；如果用户点击取消，返回 null。
js
```
let userInput = prompt("Please enter your name:", "Harry Potter");
if (userInput != null) {
    console.log("Hello, " + userInput + "!");
}
```
视口位置
- window.scroll(options) 或 window.scroll(x-coord, y-coord)：滚动到文档中的指定位置。
- window.scrollTo()：与 window.scroll() 完全相同。
js
```
window.scrollTo( 0, 1000 );  //向下滚动1000px
window.scrollTo({  // 设置滚动行为改为平滑的滚动
    top: 1000,
    behavior: "smooth"
});
```
- window.scrollBy(options) 或 window.scrollBy(x-coord, y-coord)：滚动到文档中的指定位置，相对于当前位置。
js
```
window.scrollBy(0, window.innerHeight);//向下滚动一页：
window.scrollBy(0, -window.innerHeight);//向上滚动一页：
window.scrollBy({  // 设置滚动行为改为平滑的滚动
  top: 100,
  behavior: "smooth"
});
```
TIP
- x-coord：是文档中的横轴坐标
- y-coord：是文档中的纵轴坐标
- options：是一个包含三个属性的对象：
  - top：等同于 y-coord
  - left：等同于 x-coord
  - behavior：类型 String，表示滚动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
焦点
- focus()：将焦点给予窗口。
js
```
window.focus();
```
- blur()：移除窗口的焦点。
js
```
window.blur();
```
其他
- requestIdleCallback(callback, [options])：请求在浏览器的空闲时期调用的函数，用于执行低优先级或后台任务。
js
```
let idleCallbackId = requestIdleCallback(myNonEssentialFunction);
```
- *cancelIdleCallback(id)：取消由 requestIdleCallback() 方法预定的回调。
js
```
cancelIdleCallback(idleCallbackId);
```
- getComputedStyle(element, [pseudoElement])：获取并返回指定元素的计算样式。
js
```
let style = window.getComputedStyle(element);
```
- getSelection()：返回一个表示用户选择的文本范围或光标位置的 Selection 对象。
js
```
let selection = window.getSelection();
```
- matchMedia(mediaQueryString)：返回一个 MediaQueryList 对象，表示指定的媒体查询字符串的解析结果。
js
```
let mql = window.matchMedia("(min-width: 600px)");
```
- postMessage(message, targetOrigin, [transfer])：安全地实现跨源通信。
js
```
window.postMessage('Hello!', '*');
```
- print()：打开浏览器的打印对话框。
js
```
window.print();
```
- stop()：停止加载资源，包括文档和所有相关资源（等同于浏览器的“停止”按钮）。
js
```
window.stop();
```

位置（Location）对象

在JavaScript中，Location 对象代表了当前窗口的URL，并提供了与该URL相关的一些方法。这个对象可以通过 window.location 访问，它包含了当前页面的地址信息，并允许对地址进行操作。

属性

location.hash：URL的锚部分（也称为“片段标识符”），以 '#' 开始。
location.host：服务器名称和端口号（如果有）。
location.hostname：只包含服务器名称。
location.href：完整的URL字符串。
location.pathname：URL的路径部分。
location.port：URL的端口号。
location.protocol：URL的协议部分，例如 'http:' 或 'https:'。
location.search：URL的查询字符串部分，以 '?' 开始。
location.origin：URL的源，包括协议、主机名和端口号。

方法

location.assign(url)：加载一个新的文档。

location.assign("https://www.example.com");

location.reload(forceGet)：重新加载当前页面。如果forceGet为true，页面将以GET请求方式从服务器重新加载，忽略缓存。

location.reload(true);

location.replace(url)：用新的文档替换当前文档，并在浏览器历史中删除当前文档的记录。

location.replace("https://www.another-example.com");

location.toString()：返回整个URL的字符串表示，与 href 属性的值相同。

console.log(location.toString());

TIP

replace() 方法与 assign() 方法的区别在于，replace() 不会在浏览器历史记录中留下当前页面的记录，因此用户不能使用“后退”按钮返回到该页面。

导航器（Navigator）对象

在JavaScript中，Navigator 对象包含有关浏览器的信息，它可以用来获取浏览器的名称、版本、所在的操作系统等信息。

属性

navigator.clipboard：提供对剪贴板的读写访问。
navigator.cookieEnabled：指示是否启用了cookie。
navigator.credentials：提供对浏览器凭据管理器的访问。
navigator.geolocation：提供访问设备的地理位置的API。
navigator.hardwareConcurrency：返回处理器的逻辑核心数。
navigator.language：返回浏览器界面的首选语言。
navigator.languages：返回用户的首选语言列表。
navigator.locks：提供一种方式来异步获取资源的排他锁。
navigator.maxTouchPoints：返回设备能够处理的最大同时触摸点数。
navigator.mediaCapabilities：提供有关设备媒体播放能力的信息。
navigator.mediaDevices：提供访问连接到计算机的媒体输入设备（如摄像头和麦克风）的能力。
navigator.mediaSession：用于自定义媒体播放通知和硬件媒体键的交互。
navigator.onLine：指示设备是否连接到网络。
navigator.pdfViewerEnabled：指示浏览器是否有启用的PDF查看器。
navigator.permissions：提供了查询和撤销各种权限的API。
navigator.presentation：用于控制显示在连接屏幕上的演示文稿。
navigator.serviceWorker：提供了注册、删除和管理Service Workers的接口。
navigator.storage：提供访问浏览器存储能力的API，如IndexedDB、缓存API。
navigator.usb：提供访问连接到USB设备的API。
navigator.userActivation：提供了用户激活状态的信息。
navigator.userAgent：返回用户代理字符串，即浏览器的身份标识。
navigator.wakeLock：允许一个文档保持设备的屏幕打开。
navigator.webdriver：指示浏览器是否由自动化测试软件控制。
navigator.windowControlsOverlay：提供了用于确定窗口控制叠加层的存在和位置的信息。

方法

navigator.share(data)：调用浏览器的原生分享功能，允许用户分享文本、链接或其他内容。

navigator.share({ title: "Example Page", url: "https://www.example.com" }).then(() => {
    console.log("数据已分享");
}).catch((error) => {
    console.log("分享失败", error);
});

navigator.canShare(data)：检查浏览器是否支持共享指定的数据（例如文件或图片）。

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
    console.log("可以分享文件");
} else {
    console.log("不支持分享文件");
}

navigator.setAppBadge(value)：在应用程序图标上设置徽章计数器，通常用于显示未读消息数量等。

navigator.setAppBadge(3).then(() => {
    console.log("徽章设置为 3");
});

navigator.clearAppBadge()：清除应用程序在平台上的徽章计数器。

navigator.clearAppBadge().then(() => {
    console.log("徽章计数器已清除");
});

navigator.getBattery()：返回一个承诺（Promise），该承诺解析为提供有关系统电池状态的对象。

navigator.getBattery().then(function(battery) {
    console.log("电池充电状态：" + (battery.charging ? "充电中" : "未充电"));
});

navigator.getGamepads()：返回当前连接的游戏控制器列表。

var gamepads = navigator.getGamepads();
console.log(gamepads);

navigator.registerProtocolHandler(protocol, url, title)：允许网站注册为特定协议（如 mailto 或 webcal）的处理程序。

navigator.registerProtocolHandler("web+myscheme", "/path/to/handler?%s", "My Handler");

navigator.unregisterProtocolHandler(protocol, url)：取消之前通过 registerProtocolHandler() 方法注册的协议处理程序。

navigator.unregisterProtocolHandler("web+myscheme", "/path/to/handler");

navigator.requestMediaKeySystemAccess(keySystem, supportedConfigurations)：请求对媒体密钥系统的访问，用于控制内容加密。

navigator.requestMediaKeySystemAccess('org.w3.clearkey', [{ initDataTypes: ['keyids'] }]).then(function(mediaKeySystemAccess) {
    // Do something with mediaKeySystemAccess
});

navigator.requestMIDIAccess(options)：请求对MIDI（Musical Instrument Digital Interface）设备的访问权限。

navigator.requestMIDIAccess({ sysex: true }).then(function(midiAccess) {
    // Do something with midiAccess
}, function(err) {
    console.log("无法获取MIDI访问权限", err);
});

navigator.sendBeacon(url, data)：在浏览器卸载文档之后，用于向服务器异步发送小量数据。通常用于收集分析数据、日志记录、错误报告和性能指标等情况下的客户端到服务器的数据传输。

window.addEventListener("unload", function() {
    navigator.sendBeacon("https://example.com/log", analyticsData);
});

navigator.vibrate(pattern)：使设备产生振动。可以接受一个表示振动模式的数字或数字数组。

navigator.vibrate(1000); // 振动1秒

屏幕（Screen）对象

在JavaScript中，Screen 对象是 window 对象的一部分，提供了关于用户屏幕的信息，包括屏幕尺寸和颜色深度的信息等。

属性

screen.height：屏幕的整体高度，单位为像素。
screen.width：屏幕的整体宽度，单位为像素。
screen.availHeight：屏幕的可用高度，单位为像素。这个高度排除了操作系统的任务栏等界面元素。
screen.availWidth：屏幕的可用宽度，单位为像素。这个宽度排除了操作系统的任务栏等界面元素。
screen.colorDepth：屏幕的颜色深度，单位为位。通常是24或32。
screen.pixelDepth：屏幕的颜色分辨率，单位为位。大多数情况下与 colorDepth 相同。
screen.orientation：提供关于屏幕方向的信息，包括角度和类型（如横屏或竖屏）。

历史（History）对象

代表浏览器的历史记录，通过该对象可以操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或后后翻页

属性

history.length：返回当前浏览器历史列表中的元素数量。这个数量包括当前页面。可以用来判断用户在当前标签页的浏览历史深度。
history.scrollRestoration：允许或禁止浏览器在导航历史记录时恢复滚动位置。它的值可以是 "auto"（默认值，浏览器自动恢复滚动位置）或 "manual"（阻止浏览器自动恢复滚动位置）。
history.state：返回一个表示历史堆栈顶部条目的状态的值。这是与 pushState 和 replaceState 方法设置的状态对象相关联的。

方法

history.back()：移动到会话历史中的前一个页面，类似于点击浏览器的“后退”按钮。

javascript

history.back()

history.forward()：移动到会话历史中的下一个页面，类似于点击浏览器的“前进”按钮。

javascript

history.forward();

history.go(delta)：根据指定的 delta 值移动历史记录。delta 可以是正数（向前移动）、负数（向后移动）或0（重新加载当前页面）。

javascript

history.go(-1); // 后退一个页面
history.go(1);  // 前进一个页面
history.go(0);  // 重新加载当前页面

history.pushState(state, title, url)：在历史记录中添加一个新的记录。可以指定状态对象、标题（大多数浏览器目前忽略此参数）和（可选的）URL。

javascript

history.pushState({page: 1}, "title 1", "?page=1");

history.replaceState(state, title, url)：修改当前历史记录条目。这与 pushState 类似，但不会创建新的历史记录。

javascript

history.replaceState({page: 2}, "title 2", "?page=2");

Core DOM

表示所有文档类型的标准模型。定义基本的文档结构，包括document、element、attribute和text等节点。

文档（Document）
- 基础: 文档代表整个HTML或XML网页，是DOM树的根节点。
- 角色: 作为起点，它提供了访问网页中所有其他节点（元素、文本、注释、属性等）的接口。
节点（Node）
- 通用概念: 节点是DOM中的基本单位，表示文档中的一个独立部分。
- 类型多样性: 节点有多种类型，包括元素节点、文本节点、注释节点、属性节点等。
元素（Element）
- 特定类型的节点: 元素是节点的一种，特指HTML或XML标签，如HTMLElement、SVGElement、MathMLElement、SMILElement等。
- 结构构成: 元素节点构成了文档的结构，可以包含其他元素节点或文本节点，形成树状层次结构。
属性（Attribute）
- 元素的组成部分: 属性是元素的组成部分，不是独立的节点（在HTML DOM中）。它们定义了元素的特性，如 id, class, style 等。
- 附加信息: 属性提供了关于元素的额外信息，但不直接形成文档的结构。
文本（Text）
- 内容表现: 文本节点是表示元素内部文本（如标签之间的文字）的节点。
- 元素的子节点: 文本是元素节点的子节点。例如，在 <p>Hello</p> 中，“Hello”是 <p> 元素的文本子节点。

节点属性

baseURI: 返回节点所属文档的基础URI。这通常是文档的URL。
parentNode: 返回节点的父节点。任何节点类型都可能有父节点，不仅仅是元素。
childNodes: 返回包含节点所有子节点的NodeList对象。这个列表是实时的，即它随着DOM的变化而自动更新。
firstChild: 返回节点的第一个子节点。如果没有子节点，则返回null。
lastChild: 返回节点的最后一个子节点。如果没有子节点，则返回null。
previousSibling: 返回紧接在此节点之前的兄弟节点。如果节点是其父节点的第一个子节点，则返回null。
nextSibling: 返回紧接在此节点之后的兄弟节点。如果节点是其父节点的最后一个子节点，则返回null。
nodeName: 返回节点的名称。对于元素节点，这是标签名（大写），对于文本节点，这是#text，对于文档节点，这是#document。
nodeValue: 返回或设置节点的值。对于不同类型的节点，这个属性的作用不同。比如，对于文本节点，它是文本内容。
nodeType: 返回一个整数，表示节点的类型。例如，元素节点的类型是1，文本节点的类型是3。
isConnected: 布尔属性，如果节点是与文档的DOM树相连的，则为true。
ownerDocument: 返回包含该节点的顶级文档对象，即文档节点（Document）。
parentElement: 返回节点的父元素。如果节点没有父元素，或父节点不是元素，则返回null。
textContent: 返回或设置节点及其后代的文本内容。与innerText不同，textContent不考虑样式，并且获取所有元素的纯文本内容。

节点方法

appendChild()：将一个节点添加到指定父节点的子节点列表的末尾。

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
parentElement.appendChild(newElement);

removeChild()：从DOM中删除一个子节点。

let parentElement = document.getElementById('parent');
let childElement = document.getElementById('child');
parentElement.removeChild(childElement);

replaceChild()：替换父节点下的一个子节点。

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
let oldElement = document.getElementById('oldChild');
parentElement.replaceChild(newElement, oldElement);

cloneNode()：复制一个节点，如果传入参数为true，则连同其子节点一起复制。

let originalElement = document.getElementById('original');
let clonedElement = originalElement.cloneNode(true);
document.body.appendChild(clonedElement);

compareDocumentPosition()：比较两个节点在文档中的位置关系。

let element1 = document.getElementById('element1');
let element2 = document.getElementById('element2');
console.log(element1.compareDocumentPosition(element2));

contains()：检查一个节点是否包含另一个节点。

let parentElement = document.getElementById('parent');
let childElement = document.getElementById('child');
console.log(parentElement.contains(childElement));

getRootNode()：返回节点的根节点（例如文档或影子根）。

let element = document.getElementById('myElement');
console.log(element.getRootNode());

hasChildNodes()：检查一个节点是否有子节点。

let element = document.getElementById('myElement');
console.log(element.hasChildNodes());

insertBefore()：在指定的子节点前插入新的子节点。

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
let referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

isEqualNode()：检查两个节点是否相等。

let element1 = document.getElementById('element1');
let element2 = document.getElementById('element2');
console.log(element1.isEqualNode(element2));

isSameNode()：检查两个节点是否是同一个节点。

let element1 = document.getElementById('element1');
let element2 = document.getElementById('element1');
console.log(element1.isSameNode(element2)); // 总是返回true

normalize()：合并当前节点内部的所有文本节点，并删除空的文本节点。

let element = document.getElementById('myElement');
element.normalize();

文档 Document

属性

activeElement：用于获取当前处于活动状态（获得焦点）的 HTML 元素。若没有焦点，则获取文档的 <body> 元素。
head：用于获取文档的 <head> 元素。
title：用于获取或设置当前文档的标题。
body：用于获取文档的 <body> 元素。
characterSet：用于获取当前文档的字符编码（例如，"UTF-8"）。
contentType：用于获取当前文档的内容类型（例如，"text/html"）。
cookie：用于读取或设置文档的 HTTP Cookie。
currentScript：用于获取当前正在执行的 <script> 元素。
defaultView：用于获取文档的默认视图（default view）。默认视图通常是指与文档相关联的窗口（window）对象，它提供了对文档的访问和控制，以及与浏览器窗口相关的操作。
dir：用于获取或设置文档的文本方向（text direction）。文本方向可以是从左到右（LTR，默认值）或从右到左（RTL）。
doctype：用于获取文档的文档类型声明（Document Type Declaration，简称文档类型或DOCTYPE）。
documentElement：用于获取文档的根元素，通常是 <html> 元素。
documentURI：用于获取当前文档的统一资源标识符（URI），也就是 URL。
URL：用于获取当前文档的完整 URL 地址，包括协议、主机、端口、路径、查询参数和哈希值等信息。
fonts：用于获取文档中已加载的字体信息的 FontFaceSet 对象。
- FontFaceSet.size：返回已加载的字体的数量。
- FontFaceSet.ready：一个 Promise，当所有字体都已成功加载时，该 Promise 将被解析。
- FontFaceSet.status：一个字符串，表示字体加载状态。可能的值包括 "loading"（加载中）、"loaded"（已加载）和 "error"（加载出错）。
- FontFaceSet.add(fontFace)：将一个 FontFace 对象添加到集合中以进行加载。
- FontFaceSet.check(font, text)：检查指定的字体是否已加载。font 参数可以是字符串（字体名称和样式）或 FontFace 对象。text 参数是一个可选的字符串，用于测试字体加载的文本。
- FontFaceSet.clear()：清除集合中的所有字体对象。
- FontFaceSet.delete(fontFace)：从集合中删除一个 FontFace 对象，不再加载或应用该字体。
- FontFaceSet.entries()：返回一个包含集合中所有字体对象的迭代器。
- FontFaceSet.forEach(callback)：遍历已加载的字体，对每个字体执行回调函数。
- FontFaceSet.has(fontFace)：检查集合中是否存在指定的 FontFace 对象。
- FontFaceSet.keys()：返回一个包含集合中所有字体对象的键的迭代器。
- FontFaceSet.load(font, text)：加载指定的字体。font 参数可以是字符串（字体名称和样式）或 FontFace 对象。text 参数是一个可选的字符串，用于测试字体加载的文本。
- FontFaceSet.values()：返回一个包含集合中所有字体对象的值的迭代器。
forms：用于获取当前文档中所有 <form> 元素的 HTMLCollection，它包含了文档中所有表单的引用。
fullscreenElement：用于检查当前文档是否处于全屏模式（Fullscreen Mode）。如果文档处于全屏模式，则该属性返回当前正在全屏显示的元素；如果文档不处于全屏模式，则返回 null。通常用于多媒体播放、演示文稿或其他需要占据整个屏幕的情况。
fullscreenEnabled：用于检查浏览器是否支持全屏模式（Fullscreen Mode）。如果浏览器支持全屏模式，则该属性返回 true；如果浏览器不支持全屏模式，则返回 false。
hidden：用于检查当前文档是否处于隐藏状态。如果文档被隐藏，该属性返回 true；如果文档处于可见状态，则返回 false。
images：用于获取文档中所有 <img> 元素的 HTMLCollection，它包含了文档中所有图像元素的引用。
lastModified：用于获取当前文档的最后修改时间。
links：用于获取文档中所有的超链接元素 (<a> 元素) 的 HTMLCollection。
pictureInPictureElement：用于检查是否存在处于画中画模式（Picture-in-Picture）的元素。如果文档中的某个元素当前处于画中画模式，该属性返回该元素的引用；否则，返回 null。
pictureInPictureEnabled：用于检查浏览器是否支持画中画（Picture-in-Picture）模式。如果浏览器支持画中画模式，则该属性返回 true；如果不支持，则返回 false。
pointerLockElement：用于检查当前是否存在被锁定指针（Pointer Lock）的元素。如果文档中的某个元素当前处于锁定指针状态，该属性返回该元素的引用；否则，返回 null。
readyState：用于获取当前文档的加载状态。
- loading: 文档正在加载中，还没有完全加载完成。这是文档一开始加载时的初始状态。
- interactive: 文档已经加载完所有的 HTML，并且正在解析和执行 JavaScript 代码。在这个状态下，文档的大部分内容已经可用，但可能还有异步加载的资源尚未完成加载。
- complete: 文档已经完全加载完成，包括所有的 HTML、JavaScript、样式表和其他资源。
referrer：用于获取包含当前文档的引用来源（referrer）的 URL。简单来说，它返回访问当前页面的前一个页面的 URL。
scripts：用于获取文档中所有的 <script> 元素的 HTMLCollection。
scrollingElement：用于获取文档中用于滚动的元素。通常，它返回文档的根元素，即 <html> 元素或 <body> 元素中的其中一个，取决于浏览器和文档的具体设置。
styleSheets：用于获取文档中所有 CSS 样式表（<style> 元素）的集合，返回 CSSStyleSheet 对象。
- CSSStyleSheet.cssRules: 返回 CSSRuleList，包含了样式表中所有的 CSS 规则。通过这个列表，你可以访问、修改或删除样式表中的规则。
- CSSStyleSheet.ownerRule: 如果一个 CSSStyleSheet 是由另一个规则（如 @import 规则）导入的，则 ownerRule 属性返回表示那个导入规则的 CSSRule 对象。如果样式表不是由导入规则生成的，则此属性为 null。
- CSSStyleSheet.deleteRule(index): CSSStyleSheet 对象的 deleteRule() 方法用于删除样式表中的一个规则。你需要指定要删除规则的索引。
- CSSStyleSheet.insertRule(rule[, index]): CSSStyleSheet 对象的 insertRule() 方法用于在样式表中插入新的规则。你需要提供规则的文本和插入的位置索引。
- CSSStyleSheet.replace(text) / CSSStyleSheet.replaceSync(text): 这些是 CSSStyleSheet 对象的新方法，用于动态替换样式表的内容。replace() 返回一个 Promise，在样式表成功替换时解析；而 replaceSync() 则是同步版本，会立即替换样式表的内容，但不返回任何值。
timeline：用于获取与文档关联的时间轴（Timeline）对象，用于执行和控制 Web 动画和时间相关的操作。
visibilityState：用于获取当前文档的可见性状态。
- visible: 文档当前处于可见状态，即当前标签页处于活动状态并且可见。
- hidden: 文档当前处于隐藏状态，即当前标签页不可见，可能是因为用户切换到其他标签页、最小化浏览器窗口或将浏览器最小化。
- prerender: 文档处于预渲染状态，表示浏览器正在预渲染该页面，但用户尚未查看它。
- unloaded: 文档处于卸载状态，表示页面已经被卸载或关闭。

方法

append()：在文档的末尾添加节点或字符串。

let newElement = document.createElement("div");
document.body.append(newElement);

close()：关闭用document.open()打开的文档流。

document.open();
document.write('<h1>Hello World</h1>');
document.close();

createAttribute()：创建新的属性节点。

let attr = document.createAttribute("class");
attr.value = "demoClass";
document.body.setAttributeNode(attr);

createComment()：创建新的注释节点。

let comment = document.createComment("This is a comment");
document.body.appendChild(comment);

createDocumentFragment()：创建一个新的空文档片段。

let fragment = document.createDocumentFragment();
let child = document.createElement("div");
fragment.appendChild(child);
document.body.appendChild(fragment);

createElement()：创建新的元素节点。

let newDiv = document.createElement("div");
document.body.appendChild(newDiv);

createEvent()：创建一个新的事件对象。

let event = document.createEvent("HTMLEvents");
event.initEvent("click", true, true);
document.dispatchEvent(event);

createNodeIterator()：创建一个新的节点迭代器，返回一个 NodeIterator 对象。

let iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT);
let currentNode;
while (currentNode = iterator.nextNode()) {
    console.log(currentNode);
}

createProcessingInstruction()：创建一个新的处理指令节点。

let pi = document.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
document.insertBefore(pi, document.firstChild);

createRange()：创建一个新的范围对象，返回一个 Range 对象。

let range = document.createRange();
range.selectNode(document.body);
console.log(range);

createTextNode()：创建新的文本节点。

let textNode = document.createTextNode("Hello World!");
document.body.appendChild(textNode);

createTreeWalker()：创建一个新的树遍历对象，返回一个 TreeWalker 对象。

let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
let node;
while(node = walker.nextNode()) {
    console.log(node.nodeValue);
}

elementFromPoint()：返回指定坐标下最上层的元素。

document.addEventListener("click", function(event) {
    let element = document.elementFromPoint(event.clientX, event.clientY);
    console.log(element);
});

elementsFromPoint()：返回指定坐标下的所有元素。

document.addEventListener("click", function(event) {
    let elements = document.elementsFromPoint(event.clientX, event.clientY);
    console.log(elements);
});

exitFullscreen()：退出全屏模式。

if (document.fullscreenElement) {
    document.exitFullscreen();
}

exitPictureInPicture()：退出画中画模式。

if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
}

exitPointerLock()：退出指针锁定。

document.exitPointerLock();

getAnimations()：返回当前文档中所有活动的动画。

document.getAnimations().forEach(function(animation) {
    console.log(animation);
});

getElementById()：返回具有指定ID的元素。

let element = document.getElementById("myElement");
console.log(element);

getElementsByClassName()：返回包含指定类名的所有元素。

let elements = document.getElementsByClassName("myClass");
console.log(elements);

getElementsByName()：返回具有指定name属性的所有元素。

let elements = document.getElementsByName("myName");
console.log(elements);

getElementsByTagName()：返回包含指定标签名的所有元素。

let elements = document.getElementsByTagName("div");
console.log(elements);

getSelection()：返回当前选中的文本范围或光标位置。

let selection = document.getSelection();
console.log(selection.toString());

hasFocus()：检查文档是否获得焦点。

console.log(document.hasFocus());

hasStorageAccess()：检查当前页面是否有访问存储的权限（主要用于跟踪保护）。

document.hasStorageAccess().then(function(hasAccess) {
    console.log(hasAccess);
});

open()：打开一个文档流以收集来自document.write()的输出。

let newWindow = window.open();
newWindow.document.open();
newWindow.document.write("<h1>Hello World!</h1>");
newWindow.document.close();

prepend()：在文档的开头添加节点或字符串。

let newElement = document.createElement("div");
document.body.prepend(newElement);

querySelector()：返回匹配指定CSS选择器的第一个元素。

let element = document.querySelector(".myClass");
console.log(element);

querySelectorAll()：返回匹配指定CSS选择器的所有元素的列表。

let elements = document.querySelectorAll("div");
elements.forEach(function(element) {
    console.log(element);
});

replaceChildren()：替换元素的所有子节点。

let newElement = document.createElement("div");
document.body.replaceChildren(newElement);

requestStorageAccess()：请求存储访问权限。

document.requestStorageAccess().then(function() {
    console.log("Storage access granted");
}).catch(function() {
    console.log("Storage access denied");
});

write()：向文档写入HTML表达式或JavaScript代码。

document.write("<h1>Hello World!</h1>");

writeln()：类似write()，但在每个表达式后添加换行符。

document.writeln("<h1>Hello World!</h1>");

元素 Element

元素节点是 DOM 树的构成单元，表示 HTML 或 SVG 文档中的元素，如 HTMLElement 代表 HTML 文档的元素，而 SVGElement 代表 SVG 图形的元素，它们具有各自独特的属性和方法，用于定义网页的结构、样式和行为。

属性

assignedSlot：返回一个指向 <slot> 元素的引用，该 <slot> 元素是分配给该元素的影子DOM（Shadow DOM）中的位置。如果元素没有被分配到任何 <slot> 或者元素不在影子DOM中，那么该属性的值为 null。通常用于Web组件（Web Components）。
attributes：返回一个NamedNodeMap对象(可迭代的)，这个对象包含了元素的所有属性节点。
- NamedNodeMap.length：属性提供了集合中属性的数量。
- NamedNodeMap.getNamedItem(name): 返回具有指定名称的节点（Attr）。
- NamedNodeMap.item(index): 按索引位置返回节点。
- NamedNodeMap.setNamedItem(node): 添加新节点，如果具有相同名称的节点已经存在，则替换它。
- NamedNodeMap.removeNamedItem(name): 移除具有指定名称的节点。
childElementCount：返回一个元素的子元素数量，不包括文本节点、注释节点或其他类型的节点，只计算元素节点。
children：返回一个实时的 HTMLCollection，这个集合包含了元素的所有子元素（即那些直接嵌套在该元素内的元素节点），只包括元素节点（Element nodes），而不包括文本节点或注释节点。
classList：返回一个DOMTokenList对象(可迭代的)，它表示元素的类属性（class）。
- DOMTokenList.length: 属性提供了集合中项的数量。
- DOMTokenList.item(index): 根据索引返回集合中的项。
- DOMTokenList.contains(token): 检查集合中是否存在指定的项。
- DOMTokenList.add(token1, token2, ...): 添加一个或多个项。
- DOMTokenList.remove(token1, token2, ...): 删除一个或多个项。
- DOMTokenList.toggle(token, force): 切换指定的项的存在。如果 force 参数为 true，则添加该项；如果为 false，则删除该项。
- DOMTokenList.replace(oldToken, newToken): 用新的项替换旧的项。
className：用来获取或设置 HTML 元素的 class 属性的属性。
clientHeight：用于获取一个元素的内部高度，包括 padding 但不包括 border、margin 和 horizontal scrollbar（如果存在）。
clientWidth：用于获取一个元素的内部高度，包括 padding 但不包括 border、margin 和 horizontal scrollbar（如果存在）。
clientLeft：用于获取一个元素的左边框（border）的宽度，不包括 margin 或 padding。
clientTop：用于获取一个元素的上边框（border）的宽度，不包括 margin 或 padding。
firstElementChild：返回指定元素的第一个子元素节点，忽略其他类型的节点，如文本节点或注释节点。如果指定元素没有子元素节点，则返回 null。
lastElementChild：返回指定元素的最后一个子元素节点，忽略其他类型的节点，如文本节点或注释节点。如果指定元素没有子元素节点，则返回 null。
id：用于获取或设置元素的id属性的值。
innerHTML：用于获取或设置某个元素内部的 HTML 内容，不包括元素本身的标签，仅包含其内部的 HTML（即所有子元素的标签、文本内容和其他 HTML 结构）。
outerHTML：用于获取某个元素及其所有后代的 HTML 或 XML 源代码的序列化，包括元素本身的标签以及其内部的 HTML（即所有子元素的标签、文本内容和其他 HTML 结构）。
previousElementSibling：用于获取指定元素前的第一个同级元素（即兄弟元素），忽略其他类型的节点，如文本节点或注释节点。如果指定元素是其父元素的第一个子元素，或者没有同级元素，那么该属性的值为 null。
nextElementSibling：用于获取指定元素后的第一个同级元素（即兄弟元素），忽略其他类型的节点，如文本节点或注释节点。如果指定元素是其父元素的最后一个子元素，或者没有同级元素，那么该属性的值为 null。
scrollHeight：用于获取一个元素的滚动视图的总高度，包括元素的可见高度和因为溢出被隐藏的部分，不包括元素的边框（border）。
scrollWidth：用于获取一个元素的滚动视图的总宽度，包括元素的可见宽度和因为溢出被隐藏的部分，不包括元素的边框（border）。
scrollLeft：用于获取一个元素的内容左边超出元素左边的距离，通常用于可横向滚动的元素。
scrollTop：用于获取一个元素的内容顶部超出元素顶部的距离，通常用于可垂直滚动的元素。
shadowRoot：是一个 Web 组件中的属性，用于获取一个元素的 shadow DOM 的根节点。
slot：是一个 Web 组件中的属性，用于指定一个元素所属的 slot。
tagName：用于获取表示 HTML 或 XML 元素名称的字符串。在 HTML 文档中，通常以大写字母形式表示，而在 XML 文档中，则保留原来的大小写格式。

方法

before()：在当前元素之前插入节点或字符串。

let newElement = document.createElement('div');
newElement.textContent = 'New Element';
let referenceElement = document.getElementById('myElement');
referenceElement.before(newElement);

after()：在当前元素之后插入节点或字符串。

let newElement = document.createElement('div');
newElement.textContent = 'New Element';
let referenceElement = document.getElementById('myElement');
referenceElement.after(newElement);

animate()：对元素应用CSS动画。

let element = document.getElementById('myElement');
element.animate([
  { transform: 'translateX(0px)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  iterations: Infinity
});

append()：在元素内部的末尾添加节点或字符串。

let newElement = document.createElement('span');
newElement.textContent = 'Appended Text';
document.body.append(newElement);

attachShadow()：为元素添加一个影子DOM并返回对应的ShadowRoot。

let element = document.getElementById('myElement');
let shadowRoot = element.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<p>Shadow DOM content</p>';

closest()：返回最近的匹配给定选择器的祖先元素。

let element = document.getElementById('myElement');
let closestDiv = element.closest('div');
console.log(closestDiv);

computedStyleMap()：返回元素的所有CSS属性及其值的映射。

let element = document.getElementById('myElement');
let styleMap = element.computedStyleMap();
console.log(styleMap.get('color'));

getAnimations()：返回应用于元素的所有动画对象。

let element = document.getElementById('myElement');
let animations = element.getAnimations();
animations.forEach(animation => console.log(animation));

getAttribute()：获取指定属性的值。

let element = document.getElementById('myElement');
let attributeValue = element.getAttribute('data-custom');
console.log(attributeValue);

getAttributeNames()：返回元素的所有属性名称。

let element = document.getElementById('myElement');
let attributeNames = element.getAttributeNames();
console.log(attributeNames);

getAttributeNode()：获取指定的属性节点。

let element = document.getElementById('myElement');
let attributeNode = element.getAttributeNode('data-custom');
console.log(attributeNode);

getBoundingClientRect()：返回元素的大小及其相对于视口的位置。

let element = document.getElementById('myElement');
let rect = element.getBoundingClientRect();
console.log(rect.width, rect.height);

getClientRects()：返回元素的客户端矩形集合。

let element = document.getElementById('myElement');
let clientRects = element.getClientRects();
Array.from(clientRects).forEach(rect => console.log(rect));

getElementsByClassName()：返回包含指定类名的所有后代元素。

let elements = document.getElementsByClassName('myClass');
console.log(elements.length);

getElementsByTagName()：返回包含指定标签名的所有后代元素。

let divs = document.getElementsByTagName('div');
console.log(divs.length);

hasAttribute()：检查元素是否具有指定的属性。

let element = document.getElementById('myElement');
console.log(element.hasAttribute('data-custom'));

hasAttributes()：检查元素是否有任何属性。

let element = document.getElementById('myElement');
console.log(element.hasAttributes());

hasPointerCapture()：检查元素是否捕获了指针。

let element = document.getElementById('myElement');
console.log(element.hasPointerCapture(1)); // 假设指针ID为1

insertAdjacentElement()：在指定位置插入一个元素。

let newElement = document.createElement('div');
let referenceElement = document.getElementById('myElement');
referenceElement.insertAdjacentElement('beforebegin', newElement);

insertAdjacentHTML()：在指定位置插入HTML代码。

let referenceElement = document.getElementById('myElement');
referenceElement.insertAdjacentHTML('afterend', '<div>New Element</div>');

insertAdjacentText()：在指定位置插入文本。

let referenceElement = document.getElementById('myElement');
referenceElement.insertAdjacentText('beforebegin', 'Hello');

matches()：检查元素是否匹配给定的CSS选择器。

let element = document.getElementById('myElement');
console.log(element.matches('.myClass'));

prepend()：在元素内部的开始位置添加节点或字符串。

let newElement = document.createElement('span');
document.body.prepend(newElement);

querySelector()：返回匹配指定CSS选择器的第一个子元素。

let firstButton = document.querySelector('button');
console.log(firstButton);

querySelectorAll()：返回匹配指定CSS选择器的所有子元素。

let allButtons = document.querySelectorAll('button');
allButtons.forEach(button => console.log(button));

releasePointerCapture()：释放指针捕获。

let element = document.getElementById('myElement');
element.releasePointerCapture(1); // 假设指针ID为1

remove()：从DOM中移除元素。

let elementToRemove = document.getElementById('myElement');
elementToRemove.remove();

removeAttribute()：移除元素的指定属性。

let element = document.getElementById('myElement');
element.removeAttribute('data-custom');

removeAttributeNode()：移除元素的指定属性节点。

let element = document.getElementById('myElement');
let attr = element.getAttributeNode('data-custom');
element.removeAttributeNode(attr);

replaceChildren()：替换元素的所有子节点。

let element = document.getElementById('myElement');
let newChild = document.createElement('div');
newChild.textContent = 'New Content';
element.replaceChildren(newChild);

replaceWith()：用一个或多个节点替换当前元素。

let element = document.getElementById('myElement');
let newElement = document.createElement('div');
newElement.textContent = 'Replacement';
element.replaceWith(newElement);

requestFullscreen()：请求元素进入全屏模式。

let element = document.getElementById('myElement');
element.requestFullscreen().catch(err => {
  console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});

requestPointerLock()：请求锁定指针到元素。

let element = document.getElementById('myElement');
element.requestPointerLock();

scroll()：滚动到元素的指定位置。

document.getElementById('myElement').scroll({ top: 100, left: 100, behavior: 'smooth' });

scrollBy()：相对当前位置滚动元素。

document.getElementById('myElement').scrollBy({ top: 100, left: 100, behavior: 'smooth' });

scrollIntoView()：滚动元素进入视口。

document.getElementById('myElement').scrollIntoView({ behavior: 'smooth' });

scrollTo()：滚动到元素的指定位置。

document.getElementById('myElement').scrollTo({ top: 0, left: 0, behavior: 'smooth' });

setAttribute()：设置元素的指定属性。

let element = document.getElementById('myElement');
element.setAttribute('data-custom', '123');

setAttributeNode()：设置元素的指定属性节点。

let element = document.getElementById('myElement');
let newAttr = document.createAttribute('data-custom');
newAttr.value = '123';
element.setAttributeNode(newAttr);

setPointerCapture()：设置元素捕获指针。

let element = document.getElementById('myElement');
element.setPointerCapture(1); // 假设指针ID为1

toggleAttribute()：切换元素的属性的存在。

let element = document.getElementById('myElement');
element.toggleAttribute('data-custom');

CharacterData

CharacterData 是 DOM（文档对象模型）中的一个抽象接口，代表含有字符数据的节点。这个接口为那些存储和操作字符数据的节点定义了通用的属性和方法。CharacterData 接口不直接对应于文档中的具体节点，而是被其他节点类型继承：

Text: 表示文本内容。
Comment: 表示注释。
CDATASection: 仅在 XML 中使用，用于包含未被解析的字符数据。

CharacterData 接口允许对文本内容进行灵活的操作，包括修改、删除、插入和替换，这对于动态处理文档内容非常重要。

属性

data: 包含节点的文本内容。
length: 返回 data 中的字符数。

方法

appendData()：在节点的文本末尾追加字符串。

letr textNode = document.createTextNode("Hello");
textNode.appendData(" World"); // 现在 textNode 包含 "Hello World"

deleteData()：从节点的文本中删除一段内容。

let textNode = document.createTextNode("Hello World");
textNode.deleteData(5, 6); // 删除从索引 5 开始的 6 个字符，现在 textNode 包含 "Hello"

insertData()：在节点的文本中某个位置插入字符串。

let textNode = document.createTextNode("Hello World");
textNode.insertData(5, ", New"); // 在索引 5 的位置插入字符串，现在 textNode 包含 "Hello, New World"

replaceData()：替换节点文本中的一段内容。

let textNode = document.createTextNode("Hello World");
textNode.replaceData(6, 5, "Universe"); // 替换从索引 6 开始的 5 个字符，现在 textNode 包含 "Hello Universe"

substringData()：获取节点文本的子字符串。

let textNode = document.createTextNode("Hello World");
let part = textNode.substringData(6, 5); // 提取从索引 6 开始的 5 个字符，part 包含 "World"

文本 Text

Text 节点是 DOM（文档对象模型）中的一种节点类型，用于表示文档中的文本内容。它是 CharacterData 接口的具体实现，因此继承了一系列用于操作文本数据的方法和属性。

属性

assignedSlot：返回 HTMLSlotElement 对象，表示一个被分配到的 <slot> 元素（如果有的话）。如果文本节点或元素没有被分配到任何 <slot>，这个属性的值为 null。
wholeText：返回与当前文本节点相邻的所有文本节点的文本内容的串联。

方法

splitText(offset)：用于将文本节点分割成两个节点。

var textNode = document.createTextNode("Hello World");
var newNode = textNode.splitText(5); // 分割点在第 5 个字符
// textNode 现在包含 "Hello"，newNode 包含 " World"

注释 Commnet

属性 Attr

属性

name：返回属性名，与nodeName一样。
value：返回属性值，与nodeValue一样。

文档片段 DocumentFragment

创建 DocumentFragment：

const fragment = document.createDocumentFragment();

陆续向 DocumentFragment 中添加节点：

const div = document.createElement("div");
const p = document.createElement("p");

div.textContent = "This is a div.";
p.textContent = "This is a paragraph.";

fragment.appendChild(div);
fragment.appendChild(p);

一次性将 DocumentFragment 插入到文档中：

const container = document.getElementById("container");
container.appendChild(fragment);

属性

childElementCount：返回元素的子元素（不包括文本节点和注释）的数量。
children：返回元素的子元素的集合（HTMLCollection），不包括文本节点和注释。
firstElementChild：返回元素的第一个子元素节点，如果没有子元素，则返回null。
lastElementChild：返回元素的最后一个子元素节点，如果没有子元素，则返回null。

方法

append()：在文档的末尾添加节点或字符串。

let newElement = document.createElement("div");
fragment.append(newElement);

getElementById()：返回具有指定ID的元素。

let element = fragment.getElementById("myElement");
console.log(element);

prepend()：在文档的开头添加节点或字符串。

let newElement = document.createElement("div");
fragment.prepend(newElement);

querySelector()：返回匹配指定CSS选择器的第一个元素。

let element = fragment.querySelector(".myClass");
console.log(element);

querySelectorAll()：返回匹配指定CSS选择器的所有元素的列表。

let elements = fragment.querySelectorAll("div");
elements.forEach(function(element) {
    console.log(element);
});

replaceChildren()：替换元素的所有子节点。

let newElement = document.createElement("div");
fragment.replaceChildren(newElement);

URL

构造函数

new URL(url, base?)：创建一个新的绝对 URL。

// 使用相对路径和基础 URL 创建新的绝对 URL
const relativeURL = new URL('path/to/resource', 'https://example.com/base/');
console.log(relativeURL.toString());
// 输出 'https://example.com/base/path/to/resource'

// 使用绝对路径和基础 URL 创建新的绝对 URL
const absoluteURL = new URL('/absolute/path', 'https://example.com/base/');
console.log(absoluteURL.toString());
// 输出 'https://example.com/absolute/path'

// 使用完整的 URL 字符串作为参数，不需要基础 URL
const fullURL = new URL('https://example.com/path');
console.log(fullURL.toString());
// 输出 'https://example.com/path'

属性

hash: 包含 URL 的片段标识（例如，#section）。
host: 包含 URL 的主机名和端口号（如果有）。
hostname: 包含 URL 的主机名。
href: 包含完整的 URL 字符串。
origin: 包含 URL 的协议、主机名和端口号（如果有），表示 URL 的来源。
password: 包含 URL 的密码部分（如果有），通常用于表示用户凭据。
pathname: 包含 URL 的路径部分（例如，/path/to/resource）。
port: 包含 URL 的端口号（如果有）。
protocol: 包含 URL 的协议部分（例如，https:）。
search: 包含 URL 的查询参数部分（例如，?key=value）。
searchParams: 返回一个 URLSearchParams 对象，允许对查询参数进行操作。
username: 包含 URL 的用户名部分（如果有），通常用于表示用户凭据。

静态方法

URL.canParse(url, base)：返回一个布尔值，指示绝对 URL 或与基本 URL 组合的相对 URL 是否可解析且有效。

URL.createObjectURL(object): 用于创建一个代表指定 File 或 Blob 对象的 URL。通常用于生成可以用作媒体元素（例如图像或视频）源的 URL。

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url);
// 输出类似 'blob:https://example.com/abcdefg' 的 URL

URL.revokeObjectURL(objectURL): 用于释放先前由 URL.createObjectURL() 创建的对象 URL。在对象 URL 不再需要时调用此方法是很重要的，以释放资源，特别是为了避免内存泄漏。

方法

toJSON(): 返回一个表示 URL 对象的 JSON 可序列化形式的对象。当 JSON.stringify() 方法被调用时，会自动触发 toJSON() 方法。

const myURL = new URL('https://example.com/path?query=value#fragment');
const jsonRepresentation = myURL.toJSON();
console.log(jsonRepresentation);
// 输出一个包含 URL 各个部分的 JSON 对象

toString(): 用于将 URL 对象转换为字符串形式，返回完整的 URL 字符串。这个方法在许多情况下会自动被调用，例如在进行字符串拼接时。

const myURL = new URL('https://example.com/path?query=value#fragment');
const urlString = myURL.toString();
console.log(urlString);
// 输出 'https://example.com/path?query=value#fragment'

URLSearchParams

构造函数

new URLSearchParams(options?)：用于创建一个 URLSearchParams 对象

// Retrieve params via url.search, passed into constructor
const url = new URL("https://example.com?foo=1&bar=2");
const params1 = new URLSearchParams(url.search);

// Get the URLSearchParams object directly from a URL object
const params1a = url.searchParams;

// Pass in a string literal
const params2 = new URLSearchParams("foo=1&bar=2");
const params2a = new URLSearchParams("?foo=1&bar=2");

// Pass in a sequence of pairs
const params3 = new URLSearchParams([
  ["foo", "1"],
  ["bar", "2"],
]);

// Pass in a record
const params4 = new URLSearchParams({ foo: "1", bar: "2" });

属性

size：返回查询字符串中键值对的数量。

方法

append(name, value)：向查询参数添加一个新的键值对。
delete(name)：删除指定名称的所有查询参数。
entries()：返回一个包含所有键值对的迭代器。
forEach(callback)：遍历所有键值对，并对每一对调用提供的回调函数。
get(name)：返回指定名称的第一个查询参数的值。
getAll(name)：返回指定名称的所有查询参数的值的数组。
has(name)：判断是否存在指定名称的查询参数。
keys()：返回一个包含所有键的迭代器。
set(name, value)：设置指定名称的查询参数的值，如果已存在则替换。
sort()：根据键对查询参数进行排序。
toString()：返回查询参数的字符串表示形式。
values()：返回一个包含所有值的迭代器。

const params = new URLSearchParams('key1=value1&key2=value2&key1=value3');

params.append('key3', 'value4');
params.delete('key2');

params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

console.log(params.get('key1')); // 输出 'value1'
console.log(params.getAll('key1')); // 输出 ['value1', 'value3']
console.log(params.has('key2')); // 输出 false

console.log(params.toString());
// 输出 'key1=value1&key1=value3&key3=value4'

HTML DOM

扩展了核心 DOM，专门用于处理HTML文档。引入了用于HTML元素的附加对象和属性，如HTMLDocument、HTMLElement和特定元素类型。

Collection

可迭代对象（可以使用 for...of）
- DataTransferItemList：表示数据传输项（data transfer items）的列表，通常与拖放（drag-and-drop）操作一起使用。
- DOMTokenList：表示元素的类名的列表，通常用于操作元素的类名。
- FileList：表示文件（file）的列表，通常与文件输入元素 (<input type="file">) 结合使用。
- NodeList：表示一组节点的列表，通常是通过 DOM 操作获取的元素列表。
- PerformanceObserverEntryList：表示性能观察器（Performance Observer）的条目列表，用于监测性能。
- PresentationConnectionList：表示演示文稿连接（presentation connection）的列表，用于表示演示文稿的连接。
- RadioNodeList：表示一组带有相同名称的 <input> 元素的列表，通常用于单选按钮。
- TouchList：表示触摸事件中触摸点（touch point）的列表。
不可迭代对象：可以通过使用 Symbol.iterator 来获取迭代器或使用 Array.form 来转换成数组，从而使其可迭代。
- HTMLCollection：表示 DOM 元素的集合，通常是通过类名、标签名等方式获取的。
- DOMStringMap：表示一组名称/值对，通常用于与 HTML 元素的 data-* 属性交互。
- NamedNodeMap：表示属性节点的集合，通常是通过元素的 attributes 属性获取的。
- CSSRuleList：表示 CSS 规则（rules）的列表，通常是通过样式表（如 CSS）中的规则集合。
- DOMStringList：表示 DOM 字符串的列表。
- MediaList：表示媒体查询（media query）的列表，通常与样式表中的媒体查询一起使用。
- MediaQueryList：表示媒体查询的状态列表，用于监听媒体查询状态的变化。
- StyleSheetList：表示样式表（style sheet）的列表，通常是通过样式表集合。
- TextTrackCueList：表示文本轨迹的条目列表，通常用于媒体元素的文本轨迹。
- AudioTrackList：表示音轨（audio track）的列表，通常与 <audio> 和 <video> 元素一起使用。
- ImageTrackList：表示图像轨迹（image track）的列表，通常用于媒体元素（如 <video>）的图像轨迹。
- VideoTrackList：表示视频轨迹的列表，通常用于媒体元素（如 <video>）的视频轨迹。

HTMLElement

HTMLElement 提供了所有 HTML 元素的基础类，且继承自 Element 类的属性和方法，并添加了一些特定于 HTML 的属性和方法。这些属性和方法允许你操作 HTML 元素的样式、类名、内联样式等。

属性

accessKey：用于获取或设置与 HTML 元素相关联的访问键（access key）。访问键是一个快捷键，允许用户通过键盘直接跳转到特定的元素。
accessKeyLabel：用于返回被分配给 HTML 元素的访问键（access key）的标签。通常用于提示用户需要按哪些键来访问这个元素。
contentEditable：用于获取或设置 HTML 元素的可编辑状态。
dataset：用于对一个 HTML 元素中所有 data-* 属性（用于储存自定义数据）的访问。返回一个 DOMStringMap 对象，其中每个 data-* 属性都是一个键值对。
enterKeyHint：用于指定在移动设备和软键盘环境中，虚拟键盘的回车键应该显示什么样的提示标签。
- "enter"：普通的回车
- "done"：完成输入
- "go"：前往
- "next"：下一个
- "previous"：上一个
- "search"：搜索
- "send"：发送
hidden：用于控制 HTML 元素的显示与隐藏。当这个属性被设置为 true 或者在 HTML 标记中以 hidden 属性出现时，对应的元素将不会显示在页面上。
inert：用于标记一个元素及其所有子元素为不可交互。当一个元素被设置为 inert 时，用户无法与其进行交互，比如点击或聚焦。
innerText：用于获取或设置 HTML 元素的“渲染”文本内容。与 textContent 不同，innerText 会受到 CSS 样式（如隐藏元素）的影响，并且不会返回隐藏元素的文本。
inputMode：用于指定在移动设备和软键盘环境中设置用户输入的模式，包括decimal(小数数字键盘)、email(电子邮件键盘)、none(没有键盘)、numeric(数字键盘)、search(搜索键盘)、tel(电话键盘)、text(标准键盘)、url(URL键盘)。
isContentEditable：用于判断 HTML 元素是否可编辑。当元素本身或其任意父元素设置了 contentEditable="true" 时，返回 true，否则返回 false。
lang：用于获取或设置 HTML 元素的语言标记。
nonce：用于提供或获取与元素关联的 "nonce"（number used once，一次性数字）。这个属性主要用于内容安全策略（CSP），帮助浏览器确定哪些脚本应该被执行。
offsetLeft：用于获取元素的左边框外缘到其最近的相对定位（position: relative）或绝对定位（position: absolute）的父元素的左边框内缘的距离，不包括外边距（margin）、边框（border）或内边距（padding）。
offsetTop：用于获取元素的上边框外缘到其最近的相对定位（position: relative）或绝对定位（position: absolute）的父元素的上边框内缘的距离，不包括外边距（margin）、边框（border）或内边距（padding）。
offsetWidth：用于获取元素的总宽度，包括了元素的内容区（content area）、内边距（padding）、和水平方向的边框宽度（border），但不包括外边距（margin）。
offsetHeight：用于获取元素的总高度，包括了元素的内容区（content area）、内边距（padding）、和垂直方向的边框高度（border），但不包括外边距（margin）。
offsetParent：用于获取最近的包含该元素的定位元素，即 position 属性被设置为非 static（例如 relative、absolute、fixed 或 sticky）的元素。
outerText：用于获取或设置一个元素及其内容的文本表示，与 innerText 不同的是，outerText 在设置时不仅会替换元素的文本内容，还会替换整个元素本身。
popover：用于通过 JavaScript 获取和设置元素的弹出窗状态，可以设置为 "auto" 或 "manual"。
style：用于获取或设置元素的内联样式，返回CSSStyleDeclaration 对象。
- cssKey：可以直接修改 style 对象的属性来更改样式，CSS属性在 JavaScript 中以驼峰命名法表示，如：element.style.backgroundColor = 'red' 。
- CSSStyleDeclaration.cssFloat: 在 CSSStyleDeclaration 对象中，cssFloat 属性用于获取或设置元素的 float 样式，如：element.style.cssFloat = 'left' 。
- CSSStyleDeclaration.cssText: 在 CSSStyleDeclaration 对象中，cssText 属性用于获取或设置元素的全部内联样式，如：element.style.cssText = "color: blue; background-color: yellow;" 。
- CSSStyleDeclaration.length: 用于获取 CSSStyleDeclaration 对象中包含的样式属性数量。
- CSSStyleDeclaration.parentRule: 用于获取 CSSRule 对象，表示与该 CSSStyleDeclaration 相关联的 CSS 规则（仅行内样式）。如果 HTML 使用内联样式或引入外部样式，则返回 null 。
- CSSStyleDeclaration.getPropertyPriority(key): 返回该属性的优先级。如果属性使用了 !important 规则，则返回 "important"；否则，返回空字符串。
- CSSStyleDeclaration.getPropertyValue(key): 返回该属性的值。如果该属性在样式声明中存在，它将返回属性的值（作为字符串）；如果不存在，则返回空字符串。
- CSSStyleDeclaration.item(index): 返回在样式声明中该索引位置的属性名。如果索引超出范围，则返回空字符串。
- CSSStyleDeclaration.removeProperty(key): 从样式声明中删除该属性。如果该属性存在，则返回被删除的属性值；如果不存在，则返回空字符串。
- CSSStyleDeclaration.setProperty(key[, value[, priority]]): 用于添加新的样式规则或修改现有规则。

方法

attachInternals()：用于自定义元素（Web Components），允许元素与表单关联，支持自定义校验、状态反馈等。

class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.internals = this.attachInternals();
    }
}
customElements.define('my-custom-element', MyCustomElement);

blur()：使元素失去焦点。

document.getElementById('myElement').blur();

click()：模拟元素上的鼠标点击行为。

document.getElementById('myButton').click();

focus([options])：使元素获得焦点，可以传递选项对象以指定焦点行为。

document.getElementById('myPopover').hidePopover();

options选项

preventScroll: 布尔值，当设置为 true 时，调用 focus() 方法不会导致浏览器滚动到该元素。默认情况下，当一个元素获得焦点时，浏览器可能会自动滚动到该元素。

showPopover()：显示弹出窗口。

document.getElementById('myPopover').showPopover();

togglePopover(force)：切换弹出窗口的显示和隐藏，force 参数可以强制显示或隐藏。

document.getElementById('myPopover').togglePopover(true); // 强制显示

HTMLMediaElement(`<audio> / <video>`)

HTMLMediaElement 向 HTMLElement 添加了支持 <audio> 和 <video>常见的基本媒体相关功能所需的属性和方法。

属性
- audioTracks：获取表示媒体中的音轨的 AudioTrackList 对象。
  - AudioTrackList.length：获取音轨列表中的音轨数量。
  - AudioTrackList.getTrackById(id)：根据音轨的 ID 获取特定音轨。
- autoplay：获取或设置媒体在加载后是否自动播放。
- buffered：获取表示已缓冲媒体范围的 TimeRanges 对象。
  - TimeRanges.length：获取时间范围的数量。
  - TimeRanges.start(index)：获取指定索引位置的时间范围的起始时间。
  - TimeRanges.end(index)：获取指定索引位置的时间范围的结束时间。
- controls：获取或设置是否显示用户界面控件。
- controlsList：获取或设置用户界面控件的显示选项。
- crossOrigin：获取或设置跨域资源请求的 CORS 设置。
- currentSrc：获取当前媒体的源 URL。
- currentTime：获取或设置媒体的当前播放时间。
- defaultMuted：获取或设置媒体的默认静音状态。
- defaultPlaybackRate：获取或设置媒体的默认播放速率。
- disableRemotePlayback：获取或设置是否禁用远程播放。
- duration：获取媒体的总时长（以秒为单位）。
- ended：获取媒体是否已结束。
- error：获取表示媒体错误状态的 MediaError 对象。
  - MediaError.code：获取一个表示错误代码的整数。
  - MediaError.message：获取一个包含错误信息的字符串。
- loop：获取或设置媒体是否循环播放。
- mediaKeys：获取表示媒体加密的 MediaKeys 对象。
  - MediaKeys.createSession(mediaType)：创建一个新的 MediaKeySession 对象，该对象表示与媒体密钥相关的会话。
  - MediaKeys.setServerCertificate(serverCertificate)：设置用于加密的服务器证书。
- muted：获取或设置媒体是否静音。
- networkState：获取媒体的网络状态。
- paused：获取媒体是否处于暂停状态。
- playbackRate：获取或设置媒体的播放速率。
- preservesPitch：获取或设置是否保留音调。
- readyState：获取媒体的就绪状态。
- seekable：获取表示媒体可寻址范围的 TimeRanges 对象。
  - TimeRanges.length：获取时间范围的数量。
  - TimeRanges.start(index)：获取指定索引位置的时间范围的起始时间。
  - TimeRanges.end(index)：获取指定索引位置的时间范围的结束时间。
- sinkId：获取或设置目标设备的 ID。
- src：获取或设置媒体的源 URL。
- srcObject：获取或设置媒体的 MediaStream 对象。
  - new MediaStream([tracks])：创建一个新的 MediaStream 对象。
  - MediaStream.active：表示媒体流是否处于活动状态。
  - MediaStream.id：获取媒体流的唯一标识符。
  - MediaStream.addTrack(track)：向媒体流中添加轨道。
  - MediaStream.clone()：克隆媒体流。
  - MediaStream.getAudioTracks()：获取媒体流中的所有音频轨道。
  - MediaStream.getTrackById(id)：根据轨道的 ID 获取特定轨道。
  - MediaStream.getTracks()：获取媒体流中的所有轨道。
  - MediaStream.getVideoTracks()：获取媒体流中的所有视频轨道。
  - MediaStream.removeTrack(track)：从媒体流中移除轨道。
- textTracks：获取表示媒体文本轨道的 TextTrackList 对象
  - TextTrackList.length：获取文本轨道列表中的文本轨道数量。
  - TextTrackList.getTrackById(id)：根据文本轨道的 ID 获取特定文本轨道。
- videoTracks：获取表示媒体视频轨道的 VideoTrackList 对象。
  - VideoTrackList.length：获取视频轨道列表中的视频轨道数量。
  - VideoTrackList.selectedIndex：获取或设置当前选定的视频轨道的索引。如果没有选定的轨道，则为 -1。
  - VideoTrackList.getTrackById(id)：根据视频轨道的 ID 获取特定视频轨道。
- volume：获取或设置媒体的音量。

方法

canPlayType(type)：检查浏览器是否能够播放指定类型的媒体。返回一个字符串，表示指定类型的媒体是否能够播放。可能的返回值包括："probably"（可以播放）、"maybe"（可能可以播放）或空字符串（不能播放）。

let video = document.getElementById('myVideo');
let canPlayMp4 = video.canPlayType('video/mp4');
if (canPlayMp4 === 'probably') {
  console.log('Browser can probably play MP4 videos.');
} else if (canPlayMp4 === 'maybe') {
  console.log('Browser may be able to play MP4 videos.');
} else {
  console.log('Browser cannot play MP4 videos.');
}

captureStream()：返回一个包含当前媒体元素的实时捕获内容的 MediaStream 对象，该对象包含当前媒体元素的实时捕获内容。

let video = document.getElementById('myVideo');
let mediaStream = video.captureStream();

fastSeek(time)：在媒体上执行一个快速定位（seek）操作，以便跳转到指定的时间。

let video = document.getElementById('myVideo');
video.fastSeek(60); // 跳转到媒体的第 60 秒

load()：重新加载媒体元素。

let video = document.getElementById('myVideo');
video.load();

pause()：暂停媒体播放。

let video = document.getElementById('myVideo');
video.load();

play()：开始媒体播放。返回一个 Promise 对象，在媒体开始播放后解析。

let video = document.getElementById('myVideo');
video.play().then(() => {
  console.log('Media playback started successfully.');
}).catch((error) => {
  console.error('Failed to start media playback:', error);
});

setMediaKeys(mediaKeys)：设置与当前媒体元素关联的媒体密钥对象。

let video = document.getElementById('myVideo');
let mediaKeys = /* 获取或创建 MediaKeys 对象 */;
video.setMediaKeys(mediaKeys);

setSinkId(sinkId)：设置媒体元素的目标输出设备。返回一个 Promise 对象，表示设置操作是否成功。

let video = document.getElementById('myVideo');
let sinkId = /* 获取目标输出设备的标识符 */;
video.setSinkId(sinkId).then(() => {
  console.log('Successfully set the sink ID.');
}).catch((error) => {
  console.error('Failed to set the sink ID:', error);
});

HTMLAnchorElement (`<a>`)

创建超链接，用于从一个页面链接到另一个页面。

属性
- download：设置或获取超链接是否应该下载为文件。
- hash：获取或设置 URL 的片段标识符部分（即 URL 中的 # 及其后面的部分）。
- host：获取或设置 URL 的主机部分（即 URL 中的域名和端口号）。
- hostname：获取或设置 URL 的主机名部分（即 URL 中的域名部分，不包括端口号）。
- href：获取或设置整个 URL。
- origin：获取 URL 的协议、域名和端口部分。
- username：获取或设置 URL 的用户名部分。
- password：获取或设置 URL 的密码部分。
- pathname：获取或设置 URL 的路径部分。
- port：获取或设置 URL 的端口部分。
- protocol：获取或设置 URL 的协议部分。
- referrerPolicy：获取或设置用于请求的 Referer HTTP 头的策略。
- rel：获取或设置当前文档和链接文档之间的关系。
- relList：获取包含与链接元素的 rel 属性关联的 DOMTokenList。
- search：获取或设置 URL 的查询字符串部分。
方法
- toString()：用于返回一个表示对象的字符串。

HTMLInputElement (`<input>`)

用于创建交互式控件以接收用户数据。

属性
- disabled：表示输入框是否被禁用。
- files：用于<input type="file">元素，表示用户选择的文件列表。返回一个 FileList 对象，包含用户选择的文件。
- labels：获取与当前 <input> 元素关联的 <label> 元素的 NodeList。返回一个 NodeList 对象，包含与当前输入元素相关联的标签元素。
- multiple：用于<input type="file">元素，表示是否允许用户选择多个文件。返回一个布尔值，true 表示允许多选，false 表示只能单选。
- popoverTargetAction：指定弹出框的触发动作，用于某些浏览器扩展。返回一个字符串，指定触发动作的类型。
- popoverTargetElement：指定弹出框的目标元素，用于某些浏览器扩展。返回一个 DOM 元素，作为弹出框的目标。
- webkitdirectory：用于<input type="file">元素，表示是否允许选择文件夹而不是单个文件。返回一个布尔值，true 表示允许选择文件夹，false 表示只能选择文件。
- webkitEntries：用于<input type="file">元素，表示用户选择的文件和目录的文件系统条目。返回一个 FileEntry 或 DirectoryEntry 对象，表示文件系统中的条目。

方法

checkValidity()：用于检查输入元素的有效性，触发浏览器内置的验证。返回一个布尔值，表示输入元素的有效性。

<form id="myForm">
  <input type="text" required>
  <button onclick="checkValidity()">Check Validity</button>
</form>
<script>
  function checkValidity() {
    let form = document.getElementById('myForm');
    let isValid = form.checkValidity();
    alert('Form is valid: ' + isValid);
  }
</script>

reportValidity()：在输入元素上触发验证，并在验证失败时显示用户界面上的错误消息。返回一个布尔值，表示输入元素的有效性。

<form id="myForm">
  <input type="text" required>
  <button onclick="reportValidity()">Report Validity</button>
</form>
<script>
  function reportValidity() {
    let form = document.getElementById('myForm');
    let isValid = form.reportValidity();
    alert('Form is valid: ' + isValid);
  }
</script>

select()：选择输入元素中的文本内容。

<input type="text" value="Select me" id="myInput">
<button onclick="selectText()">Select Text</button>
<script>
  function selectText() {
    let input = document.getElementById('myInput');
    input.select();
  }
</script>

setCustomValidity(message)：设置自定义的验证消息，用于在验证失败时显示自定义错误消息。

<form id="myForm">
  <input type="text" required pattern="\d+" oninvalid="setCustomValidity('Please enter a number.')">
  <button onclick="checkValidity()">Check Validity</button>
</form>
<script>
  function checkValidity() {
    let form = document.getElementById('myForm');
    let isValid = form.checkValidity();
    alert('Form is valid: ' + isValid);
  }
</script>

setRangeText(replacement[, start[, end[, selectionMode]]])：用指定的文本替换指定范围内的输入元素的部分文本。

<input type="text" value="Hello, World!" id="myInput">
<button onclick="replaceText()">Replace Text</button>
<script>
  function replaceText() {
    let input = document.getElementById('myInput');
    input.focus();
    input.setRangeText('GPT', 0, 5);
  }
</script>

setSelectionRange(start, end, direction)：设置输入元素中所选文本的范围。

<input type="text" value="Select me" id="myInput">
<button onclick="setSelection()">Set Selection</button>
<script>
  function setSelection() {
    let input = document.getElementById('myInput');
    input.focus();
    input.setSelectionRange(2, 6);
  }
</script>

showPicker()：在支持的浏览器中，显示颜色和文件选择器。

<input type="color" id="colorInput">
<button onclick="showColorPicker()">Show Color Picker</button>
<script>
  function showColorPicker() {
    let colorInput = document.getElementById('colorInput');
    colorInput.showPicker();
  }
</script>

stepDown([n]) 和 stepUp([n])：递增或递减输入元素的值。默认为 1 。

<input type="number" value="5" id="myNumberInput">
<button onclick="stepDown()">Step Down</button>
<button onclick="stepUp()">Step Up</button>
<script>
  function stepDown() {
    let input = document.getElementById('myNumberInput');
    input.stepDown();
  }

  function stepUp() {
    let input = document.getElementById('myNumberInput');
    input.stepUp();
  }
</script>

HTMLFormElement (`<form>`)

用于创建表单，收集并提交用户输入的数据。

属性
- acceptCharset：获取或设置表单可接受的字符集。
- action：获取或设置表单数据提交的目标 URL。
- elements：获取表单中所有控件的集合。返回一个 HTMLFormControlsCollection 对象。
- enctype：获取或设置表单的编码类型。
- length：获取表单中控件的数量。
- method：获取或设置表单数据的提交方法。
- name：获取或设置表单的名称。
- target：获取或设置表单数据提交的目标窗口或框架。

方法

reportValidity()：用于触发表单验证，并在验证失败时显示用户界面上的错误消息。如果表单有效，则返回 true，否则返回 false。

<form id="myForm">
  <input type="text" required>
  <button onclick="reportValidity()">Check Validity</button>
</form>
<script>
  function reportValidity() {
    let form = document.getElementById('myForm');
    let isValid = form.reportValidity();
    alert('Form is valid: ' + isValid);
  }
</script>

requestSubmit([submitter])：用于请求提交表单，类似于调用 submit() 方法，但不触发表单的提交事件。

<form id="myForm">
  <input type="text" required>
  <button onclick="requestSubmit()">Request Submit</button>
</form>
<script>
  function requestSubmit() {
    let form = document.getElementById('myForm');
    form.requestSubmit();
  }
</script>

reset()：用于重置表单的所有控件到它们的初始值。

<form id="myForm">
  <input type="text" value="Initial Value">
  <button onclick="resetForm()">Reset Form</button>
</form>
<script>
  function resetForm() {
    let form = document.getElementById('myForm');
    form.reset();
  }
</script>

submit()：用于提交表单。

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <button type="button" onclick="submitForm()">Submit Form</button>
</form>
<script>
  function submitForm() {
    let form = document.getElementById('myForm');
    form.submit();
  }
</script>

HTMLImageElement (`<img>`)

用于在页面上显示图片。

构造函数
js
```
let img = new Image([width[, height]])
```
属性
- alt：获取或设置图像的替代文本，用于在图像无法显示时显示。
- complete：表示图像是否已经完全加载。
- crossOrigin：获取或设置图像请求的 crossorigin 属性，用于处理跨域资源。
- currentSrc：获取图像的当前 URL。
- decoding：获取或设置图像的解码方式，用于优化性能。
- width：获取或设置图像的宽度，以像素为单位。
- height：获取或设置图像的高度，以像素为单位。
- isMap：获取或设置图像是否是一个图像地图。
- loading：获取或设置图像的加载行为。
- naturalHeight：获取图像的原始高度，即图像的实际高度，以像素为单位。
- naturalWidth：获取图像的原始宽度，即图像的实际宽度，以像素为单位。
- referrerPolicy：获取或设置图像请求的 referrerPolicy 属性，用于控制 HTTP 请求的 Referer 头。
- srcset：获取或设置图像的多个 URL，用于支持不同的屏幕分辨率和显示尺寸。
- sizes：获取或设置图像在不同显示尺寸下的规模描述。
- src：获取或设置图像的 URL。
- useMap：获取或设置图像使用的图像地图的名称或锚点。
- x 和 y：获取或设置图像地图中的热点的 x 和 y 坐标。

方法

decode()：用于在图像加载后解码图像数据。该方法返回一个 Promise，该 Promise 在图像解码完成时解决（resolve），或在解码失败时拒绝（reject）。

var img = new Image();
img.src = 'image.jpg';

img.decode().then(function() {
  console.log('Image has been successfully decoded.');
  // 在这里可以安全地使用图像，因为它已经解码完成
}).catch(function(error) {
  console.error('Image decoding failed:', error);
});

HTMLButtonElement (`<button>`)

创建一个按钮。

属性
- disabled：获取或设置按钮是否禁用。
- labels：获取 <button> 元素关联的 <label> 元素的 NodeList 对象。
- popoverTargetAction：获取或设置按钮在弹出窗口中的目标动作。
- popoverTargetElement：获取或设置按钮在弹出窗口中的目标元素。

HTMLTableElement (`<table>`)

创建表格。

属性
- caption：获取或设置表格的标题元素（<caption>）。
- rows：获取表格中所有行（<tr>）的 HTMLCollection。
- tBodies：获取表格中所有主体（<tbody>）的 HTMLCollection。
- tFoot：获取或设置表格的页脚部分（<tfoot>）。
- tHead：获取或设置表格的页眉部分（<thead>）。

方法

createCaption()：创建并返回一个表格的标题元素（<caption>）。

let table = document.createElement('table');
let caption = table.createCaption();

deleteCaption()：删除表格的标题元素（<caption>）。

let table = document.getElementById('myTable');
table.deleteCaption();

createTBody()：创建并返回一个表格的主体部分（<tbody>）。

let table = document.createElement('table');
let tbody = table.createTBody();

createTFoot()：创建并返回一个表格的页脚部分（<tfoot>）。

let table = document.createElement('table');
let tfoot = table.createTFoot();

deleteTFoot()：删除表格的页脚部分（<tfoot>）。

let table = document.getElementById('myTable');
table.deleteTFoot();

createTHead()：创建并返回一个表格的页眉部分（<thead>）。

let table = document.createElement('table');
let thead = table.createTHead();

deleteTHead()：删除表格的页眉部分（<thead>）。

let table = document.getElementById('myTable');
table.deleteTHead();

insertRow(index)：在表格中的指定索引处插入一行，并返回一个新的 HTMLTableRowElement 对象。

let table = document.getElementById('myTable');
let newRow = table.insertRow(1); // 在第二行位置插入新行

deleteRow(index)：删除表格中指定索引的行。

let table = document.getElementById('myTable');
table.deleteRow(1); // 删除第二行

HTMLTableRowElement(`<tr>`)

用于创建表格行。

属性
- rowIndex：表示该行在其所属表格中的索引（从 0 开始）。如果该行不属于任何表格，rowIndex 的值为 -1。

方法

insertCell(index?)：用于在当前行中插入一个新的 <td> 元素（表格单元格）。这个方法返回一个 HTMLTableCellElement 对象，代表新插入的单元格。

html

<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

<script>
  var table = document.getElementById('myTable');
  var row = table.rows[0];

  // 在当前行末尾插入一个新的单元格
  var newCell = row.insertCell();

  // 设置新单元格的内容
  newCell.textContent = 'Row 1, Cell 3';
</script>

HTMLTextAreaElement(`<textarea>`)

用于创建文本域。

属性
- accessKey：获取或设置元素的访问键（用于通过键盘快捷键访问元素）。
- autofocus：获取或设置元素是否自动获取焦点。
- cols：获取或设置 <textarea> 元素的列数。
- defaultValue：获取或设置表单元素的默认值。
- disabled：获取或设置表单元素是否被禁用。
- form：获取元素所属的 <form> 元素。
- maxLength：获取或设置输入元素的最大字符数。
- minLength：获取或设置输入元素的最小字符数。
- name：获取或设置表单元素的名称。
- placeholder：获取或设置输入元素的占位符文本。
- readOnly：获取或设置输入元素是否为只读。
- required：获取或设置输入元素是否为必填项。
- rows：获取或设置 <textarea> 元素的行数。
- selectionEnd：获取或设置文本框或文本区域中所选文本的结束位置。
- selectionStart：获取或设置文本框或文本区域中所选文本的起始位置。
- tabIndex：获取或设置元素在焦点遍历中的顺序。
- textLength：获取输入元素的文本长度。
- type：获取元素的类型，对于 <textarea> 固定为 "textarea"。
- validationMessage：获取元素的验证消息。
- validity：获取元素的验证状态。
- value：获取或设置输入元素的值。
- willValidate：表示元素是否参与验证。
- wrap：获取或设置 <textarea> 元素的文本换行方式。
- labels：获取与元素相关联的 <label> 元素的集合。

方法

blur()：将焦点从 <textarea> 中移开。

let textarea = document.getElementById('myTextarea');
textarea.blur();

focus()：将焦点设置到 <textarea>。

let textarea = document.getElementById('myTextarea');
textarea.focus();

select()：选中 <textarea> 中的文本。

let textarea = document.getElementById('myTextarea');
textarea.select();

setRangeText(replacement, start, end, selectionMode)：替换指定范围内的文本，并根据需要设置新的光标位置。

let textarea = document.getElementById('myTextarea');
textarea.setRangeText('Replacement Text', 5, 10, 'select');

setSelectionRange(start, end, direction)：设置 <textarea> 中所选文本的起始和结束位置。

let textarea = document.getElementById('myTextarea');
textarea.setSelectionRange(5, 10, 'backward');

checkValidity()：检查 <textarea> 是否通过其验证约束。返回一个布尔值。

let textarea = document.getElementById('myTextarea');
let isValid = textarea.checkValidity();
console.log('Validity:', isValid);

reportValidity()：如果 <textarea> 通过其验证约束，则返回 true，否则返回 false，还会触发用户代理（浏览器）显示验证消息。

let textarea = document.getElementById('myTextarea');
let isValid = textarea.reportValidity();
console.log('Validity:', isValid);

setCustomValidity(errorMessage)：设置自定义验证消息，用于在验证时显示自定义的错误信息。

let textarea = document.getElementById('myTextarea');
textarea.setCustomValidity('This is a custom validation message.');

HTMLLabelElement(`<label>`)

用于关联文本标签与表单元素。

属性
- htmlFor：获取或设置与 <label> 元素关联的表单元素的 id 属性值。通过设置 htmlFor，可以将 <label> 与相应的表单元素关联起来。
- control：获取与 <label> 元素关联的表单元素。这个属性返回与 <label> 相关联的表单元素的引用。
- form：获取 <label> 元素所属的 <form> 元素。如果 <label> 不在任何 <form> 元素内，则返回 null。

HTMLDialogElement(`<dialog>`)

属性
- open：获取或设置对话框的打开状态。若为 true ，则为打开；若为 false ，则为关闭。
- returnValue：获取或设置对话框的返回值。当对话框被关闭时，可以通过这个属性获取用户的操作结果。
方法
- close()：关闭对话框。
js
```
let dialog = document.getElementById('myDialog');
dialog.close();
```
- show()：显示对话框。
js
```
let dialog = document.getElementById('myDialog');
dialog.show();
```
- showModal()：以模态方式（只能与对话框进行交互，而不能点击或操作页面上的其他元素）显示对话框，阻止用户与页面的其他部分进行交互，直到对话框被关闭。
js
```
let dialog = document.getElementById('myDialog');
dialog.showModal();
```

HTMLVideoElement(`<video>`)

HTMLVideoElement 由 <video> 元素实现，提供用于操作视频对象的特殊属性和方法。它还继承了 HTMLMediaElement 和 HTMLElement 的属性和方法。

属性
- disablePictureInPicture：获取或设置是否禁用画中画模式（Picture-in-Picture）。
- videoHeight：获取视频的高度，以像素为单位。
- videoWidth：获取视频的宽度，以像素为单位。
方法
- getVideoPlaybackQuality()：获取一个包含视频播放质量信息的 VideoPlaybackQuality 对象，包含有关视频播放质量的信息，如帧率、比特率等。
  - creationTime：视频创建的时间戳。
  - totalVideoFrames：总帧数。
  - droppedVideoFrames：已丢弃的帧数。
  - corruptedVideoFrames：已损坏的帧数。
  - totalFrameDelay：总帧延迟。
js
```
let video = document.getElementById('myVideo');
let playbackQuality = video.getVideoPlaybackQuality();
console.log('Current frame rate:', playbackQuality.frameRate);
```
- requestPictureInPicture()：请求将视频元素放入画中画模式。返回一个 Promise，该 Promise 在请求成功时解决，请求失败时拒绝。
js
```
let video = document.getElementById('myVideo');
video.requestPictureInPicture().then(function() {
  console.log('Entered Picture-in-Picture mode.');
}).catch(function(error) {
  console.error('Failed to enter Picture-in-Picture mode:', error);
});
```

HTMLSelectElement(`<select>`)

属性
- autofocus：表示在页面加载时是否自动获取焦点。
- disabled：表示下拉列表是否被禁用。
- form：获取包含当前下拉列表的 <select> 元素所属的表单元素。
- labels：获取与当前下拉列表相关联的 <label> 元素的 HTMLLabelElement 对象。
- options：获取包含当前下拉列表中所有选项的 HTMLOptionsCollection 对象。
- selectedIndex：获取或设置当前选中项的索引。
- selectedOptions：获取包含当前下拉列表中所有选中项的 HTMLCollection 对象。
- type：获取当前元素的类型。值始终为 "select-one" 或 "select-multiple"。

方法

add(element[, before])：向下拉列表中添加新的 <option> 元素。

let selectElement = document.getElementById('mySelect');
let newOption = new Option('Option Text', 'optionValue');
selectElement.add(newOption);

checkValidity()：检查下拉列表的选中项是否满足验证条件。

let selectElement = document.getElementById('mySelect');
let isValid = selectElement.checkValidity();

item(index)：获取指定索引位置的选项。返回指定索引位置的 HTMLOptionElement 对象。

let selectElement = document.getElementById('mySelect');
let optionAtIndex = selectElement.item(0);

namedItem(name)：根据选项的 name 属性获取选项。返回具有指定 name 属性值的 HTMLOptionElement 对象。

let selectElement = document.getElementById('mySelect');
let optionByName = selectElement.namedItem('optionName');

remove(index)：从下拉列表中移除指定索引位置的选项。

let selectElement = document.getElementById('mySelect');
selectElement.remove(0); // 移除第一个选项

setCustomValidity(error)：设置下拉列表的自定义验证消息。

let selectElement = document.getElementById('mySelect');
selectElement.setCustomValidity('Please select a valid option.');

HTMLSlotElement(`<slot>`)

属性
- name：获取或设置插槽的名称。如果未设置名称，则为 ''。

方法

assign(nodes)：将指定的节点分配到插槽。

let slotElement = document.getElementById('mySlot');
let content = document.getElementById('myContent');
slotElement.assign(content); // 将内容节点分配到插槽

assignedElements([options])：获取已分配到插槽的元素，返回一个 NodeList 对象。

let slotElement = document.getElementById('mySlot');
let assignedElements = slotElement.assignedElements();

assignedNodes([options])：获取已分配到插槽的节点，返回一个 NodeList 对象。

let slotElement = document.getElementById('mySlot');
let assignedNodes = slotElement.assignedNodes();

HTMLTemplateElement(`<template>`)

属性
- content：返回 <template> 元素的模板内容（文档片段）。

MutationObserver

MutationObserver 用于监听 DOM 树上的变化。它提供了一种方法来异步观察对 DOM 树所做的修改，包括元素的添加、删除、修改属性等。

构造函数

let observer = new MutationObserver(callback);

callback参数 MutationRecord 属性

type（类型）：描述了发生的变化类型。可能的值包括：
- "attributes"：属性发生了变化。
- "characterData"：节点的文本内容发生了变化。
- "childList"：子节点发生了变化。
target（目标）：发生变化的 DOM 节点。
addedNodes（新增节点）：包含了在变化中新增的节点的 NodeList。这是一个实时的 NodeList，你可以通过遍历它来访问新增的节点。
removedNodes（移除节点）：包含了在变化中移除的节点的 NodeList。同样，这是一个实时的 NodeList。
previousSibling（前一个同级节点）：在 childList 变化类型中，表示新增或移除节点的前一个同级节点。
nextSibling（后一个同级节点）：在 childList 变化类型中，表示新增或移除节点的后一个同级节点。
attributeName（属性名）：在 attributes 变化类型中，表示发生变化的属性的名称。
attributeNamespace（属性命名空间）：在 attributes 变化类型中，表示发生变化的属性的命名空间。
oldValue（旧值）：在 attributes 或 characterData 变化类型中，表示发生变化的属性或文本节点的旧值。

方法

observe(target, options)：用于启动观察器并指定要观察的目标节点和观察选项。

observer.observe(targetNode, { attributes: true });

options

childList：默认值 false 。当设置为 true 时，观察器将监视目标节点及其后代节点的子节点的变化，包括添加或删除子节点。
attributes：默认值 false 。当设置为 true 时，观察器将监视目标节点的属性值的变化。
characterData：默认值 false 。当设置为 true 时，观察器将监视目标节点的文本内容或文本节点值的变化。
subtree：默认值 false 。当设置为 true 时，观察器将监视目标节点及其整个子树中的变化，而不仅仅是目标节点的直接子节点。
attributeOldValue：默认值 false 。当设置为 true 时，在 attributes 被设置为 true 的同时，观察器将在 MutationRecord 中的 oldValue 属性中包含先前的属性值。
characterDataOldValue：默认值 false 。当设置为 true 时，在 characterData 被设置为 true 的同时，观察器将在 MutationRecord 中的 oldValue 属性中包含先前的文本节点值。
attributeFilter：默认值 null 。一个包含要观察的属性名称的数组。只有这些属性的变化会被观察，其他属性的变化将被忽略。如果未指定，则观察所有属性的变化。

disconnect()：用于停止观察器的运行，即取消监视器与 DOM 的关联，停止对 DOM 变化的监听。

observer.disconnect();

takeRecords()：用于获取自上一次调用 takeRecords() 以来发生的所有变化记录（Mutation Record）的数组。每个记录都描述了在观察的目标节点上发生的一项变化。

observer.takeRecords()

DOMStringList

属性

length：用于获取列表中包含的字符串的数量。

方法

contains(string)：用于检查字符串列表中是否包含特定的字符串。该方法接受一个参数，即要检查的字符串，如果字符串在列表中存在，则返回 true，否则返回 false。

// 假设有一个 DOMStringList 实例叫做 myStringList
let containsExample = myStringList.contains("example");
if (containsExample) {
  console.log("字符串列表中包含 'example'。");
} else {
  console.log("字符串列表中不包含 'example'。");
}

item(index)：用于根据索引获取字符串列表中的特定字符串。该方法接受一个参数，即要获取的字符串的索引。如果索引有效，则返回对应位置的字符串，否则返回 null。

// 假设有一个 DOMStringList 实例叫做 myStringList
let firstString = myStringList.item(0);
console.log(`第一个字符串是: ${firstString}`);

ShadowRoot

属性

activeElement：返回 ShadowRoot 内的当前获得焦点的元素。
adoptedStyleSheets：返回一个包含 ShadowRoot 使用的已采纳的样式表（adopted style sheets）的 StyleSheetList 对象。
delegatesFocus：返回一个布尔值，表示 ShadowRoot 是否代理焦点。
fullscreenElement：返回全屏元素，如果 ShadowRoot 当前处于全屏模式，则为其 Document，否则为 null。
host：返回包含当前 ShadowRoot 的宿主元素。
innerHTML：获取或设置 ShadowRoot 内的 HTML 内容。
mode：返回 ShadowRoot 的模式，可以是 "open" 或 "closed"。
pictureInPictureElement：返回当前处于画中画（Picture-in-Picture）模式的元素，如果 ShadowRoot 不在画中画模式下，则返回 null。
pointerLockElement：返回当前处于指针锁定状态的元素，如果 ShadowRoot 不在指针锁定状态下，则返回 null。
slotAssignment：返回一个包含了与 ShadowRoot 关联的所有插槽分配信息的对象。
styleSheets：返回一个包含了与 ShadowRoot 关联的样式表的 StyleSheetList 对象。

方法

getAnimations()：用于获取与 ShadowRoot 关联的所有正在运行的 CSS 动画。

const shadowRoot = document.getElementById('my-shadow-root').shadowRoot;

// 获取 ShadowRoot 中正在运行的动画
const animations = shadowRoot.getAnimations();

// 遍历动画数组
animations.forEach(animation => {
  console.log(`Animation ID: ${animation.id}`);
  console.log(`Animation Name: ${animation.animationName}`);
  console.log(`Animation State: ${animation.playState}`);
});

Blob

Blob 是二进制数据的不可变对象，可以包含任意类型的数据，例如文本、图像、音频等。它通常用于在浏览器中处理二进制数据。

构造函数

new Blob(array, options)：用于创建一个包含给定数据的 Blob 对象。Blob 表示一个不可变、原始数据的类文件对象。Blob 可以包含任意类型的数据，例如文本、二进制数据等。

// 创建包含文本的 Blob
const textBlob = new Blob(['Hello, World!'], { type: 'text/plain' });

// 创建包含二进制数据的 Blob
const binaryData = new Uint8Array([0, 1, 2, 3]);
const binaryBlob = new Blob([binaryData], { type: 'application/octet-stream' });

属性

size：返回 Blob 对象的字节大小。即表示 Blob 包含的数据的字节数。
type：返回 Blob 对象的 MIME 类型。MIME 类型表示 Blob 中数据的媒体类型，例如文本、图像、音频等。

方法

arrayBuffer()：返回一个 Promise，该 Promise 在成功时解析为包含 Blob 数据的 ArrayBuffer。这使得你可以将 Blob 数据转换为 ArrayBuffer，以便进行进一步的处理。

const data = 'Hello, World!';
const textBlob = new Blob([data], { type: 'text/plain' });

textBlob.arrayBuffer().then(buffer => {
  // 处理 ArrayBuffer
  console.log(new TextDecoder().decode(buffer));
});

slice(start, end, contentType)：返回一个新的 Blob 对象，其中包含了当前 Blob 的指定片段。start 和 end 参数表示截取的开始和结束位置，contentType 参数用于指定新 Blob 对象的 MIME 类型。

const fullBlob = new Blob(['The quick brown fox jumps over the lazy dog.'], { type: 'text/plain' });

// 获取 Blob 的一部分
const partialBlob = fullBlob.slice(4, 19, 'text/plain');

// 使用 FileReader 读取 Blob 数据
const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result);
};
reader.readAsText(partialBlob);

stream()：返回一个 ReadableStream 对象，该对象允许你以流的形式读取 Blob 中的数据。

const data = 'Hello, World!';
const textBlob = new Blob([data], { type: 'text/plain' });

const readableStream = textBlob.stream();
const reader = readableStream.getReader();

reader.read().then(({ value, done }) => {
  if (!done) {
    console.log(value); // 输出 Blob 数据
  }
});

text()：返回一个 Promise，该 Promise 在成功时解析为包含 Blob 数据的文本字符串。

const data = 'Hello, World!';
const textBlob = new Blob([data], { type: 'text/plain' });

textBlob.text().then(text => {
  console.log(text); // 输出 'Hello, World!'
});

File

File 是 Blob 的子类，可以使用 Blob 对象的所有方法和属性，通常表示用户选择的文件。File 对象包含了文件的数据、文件名以及其他文件相关的属性，如 MIME 类型、最后修改时间等。File 对象常用于在浏览器中上传文件。

构造函数

new File(bits, name, options?)：用于创建一个包含文件内容的 File 对象。它是 Blob 的子类，因此具有 Blob 的所有特性，同时还允许指定文件名和其他文件相关的属性。

const fileContent = 'Hello, World!';
const fileName = 'example.txt';

// 创建一个包含文件内容的 File 对象
const file = new File([fileContent], fileName, { type: 'text/plain', lastModified: Date.now() });

console.log(file instanceof File); // 输出 true
console.log(file instanceof Blob); // 输出 true

console.log(file.name); // 输出 'example.txt'
console.log(file.size); // 输出 文件内容的字节数
console.log(file.type); // 输出 'text/plain'
console.log(file.lastModified); // 输出 文件最后修改的时间戳

属性

lastModified：表示文件的最后修改时间，以毫秒为单位的时间戳。
name：表示文件名。

FileList

FileList 是一个类数组对象，表示通过文件输入框选择的文件列表。它包含了一个或多个 File 对象。FileList 通常由用户通过 <input type="file"> 元素选择文件时返回。它提供了一些方法和属性，例如 length 表示文件数量，以及通过索引或 item(index) 方法访问单个文件。

html

<input type="file" id="fileInput" multiple>

<script>
  const input = document.getElementById('fileInput');
  input.addEventListener('change', handleFileSelection);

  function handleFileSelection(event) {
    const fileList = event.target.files;

    console.log(fileList.length); // 输出选择的文件数量

    // 遍历文件列表
    for (let i = 0; i < fileList.length; i++) {
      const file = fileList[i];
      console.log(`File ${i + 1}: ${file.name}, ${file.size} bytes`);
    }

    // 或者使用 forEach
    fileList.forEach((file, index) => {
      console.log(`File ${index + 1}: ${file.name}, ${file.size} bytes`);
    });
  }
</script>

属性

length：表示 FileList 对象中包含的文件数量。

方法

item(index)：返回 FileList 中指定索引位置的文件。

const input = document.getElementById('fileInput');
const fileList = input.files;

const firstFile = fileList.item(0);
console.log(firstFile.name); // 输出第一个文件的文件名

[index]：可以通过类似数组的索引访问方式直接获取 FileList 中指定索引位置的文件。

const input = document.getElementById('fileInput');
const fileList = input.files;

const firstFile = fileList[0];
console.log(firstFile.name); // 输出第一个文件的文件名

FileReader

用于异步读取 Blob 或 File 对象中的数据。它提供了一种以非阻塞的方式读取文件内容的方法，适用于处理大型文件或需要异步处理文件数据的场景。

构造函数

new FileReader()：用于创建一个 FileReader 对象。

const reader = new FileReader();

属性

readyState：表示 FileReader 对象的当前状态。可能的值有：
- EMPTY (0): 初始状态，还没有开始读取文件。
- LOADING (1): 读取操作正在进行。
- DONE (2): 读取操作已完成。
result：包含读取操作的结果。在 onload 事件触发时，可以通过 result 获取读取到的数据。如果读取操作未完成或发生错误，result 为 null。
error：包含一个 DOMException 对象，表示在读取操作期间发生的错误。在 onerror 事件触发时，可以通过 error 获取读取到的数据。如果读取操作成功完成，error 将为 null。

方法

readAsText(blob, encoding)：用于以文本形式读取 Blob 或 File 中的数据。encoding 参数是可选的，用于指定文本的编码方式，默认为 UTF-8。

const reader = new FileReader();

reader.onload = function (event) {
  const result = event.target.result;
  console.log('File content as text:', result);
};

reader.readAsText(someFile, 'UTF-8');

abort()：用于中止读取操作。如果读取操作已经开始，调用此方法将会中止操作，触发 onabort 事件。一旦中止，FileReader 对象的状态将变为 DONE，result 属性将变为 null。

const reader = new FileReader();

reader.onabort = function (event) {
  console.log('File reading aborted');
};

// Start reading operation
reader.readAsText(someFile);

// Abort the reading operation
reader.abort();

readAsArrayBuffer(blob)：用于以 ArrayBuffer 形式读取 Blob 或 File 中的数据。

const reader = new FileReader();

reader.onload = function (event) {
  const result = event.target.result;
  console.log('File content as ArrayBuffer:', result);
};

reader.readAsArrayBuffer(someFile);

readAsDataURL(blob)：用于以 Data URL 形式读取 Blob 或 File 中的数据。

const reader = new FileReader();

reader.onload = function (event) {
  const result = event.target.result;
  console.log('File content as Data URL:', result);
};

reader.readAsDataURL(someFile);

事件

abort：在读取操作被中止时触发，可以通过调用 abort() 方法手动中止读取。
error：在读取操作发生错误时触发。通过检查 reader.error 属性可以获取错误信息。
load：在读取操作成功完成时触发。此时可以通过 reader.result 属性获取读取到的数据。
loadend：在读取操作完成（无论成功还是失败）时触发。这个事件总是在 load 事件之后触发。
loadstart：在读取操作开始时触发。这表示 FileReader 已经开始读取文件。
progress：在读取操作期间，每次读取到数据时触发。可以用它来监控读取的进度。

Event DOM

表示处理DOM中事件的接口。包括诸如Event、EventTarget和各种事件类型的对象，用于管理用户交互和其他事件。

事件流

DOM2 Events 规范规定事件流分为3个阶段：

捕获阶段：在捕获阶段中，事件从DOM树的根节点开始，沿着层次结构向下传播，直到达到目标元素。在捕获阶段，事件会在目标元素之前被捕获。
目标阶段：在目标阶段中，事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段：在冒泡阶段中，事件从目标元素开始向上冒泡，逐级经过包含目标元素的父元素。最终，事件会冒泡到DOM树的根节点。如果你在目标元素上注册了事件监听器，并且事件在冒泡阶段触发，那么监听器将在目标元素上被调用。

TIP

事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件。
可以使用 stopPropagation() 来阻止事件在冒泡或捕获阶段的传播。
可以通过 addEventListener() 的第三个参数来显式指定事件是在捕获阶段还是冒泡阶段进行处理，通常为 true 表示在捕获阶段处理，为 false 或者省略表示在冒泡阶段处理。

事件监听器

addEventListener(type, listener, options?)：向元素添加事件监听器。该方法接受三个参数：事件类型、要执行的函数、是否在捕获阶段进行处理。

javascript

element.addEventListener('click', handleClick, {
  capture: true,  // 表示事件是否在捕获阶段进行处理。如果设置为 true，则在捕获阶段执行监听器，否则在冒泡阶段执行。默认值为 false。
  once: false,  // 表示事件是否仅在首次触发时调用监听器。如果设置为 true，则监听器将在首次触发后自动移除。默认值为 false。
  passive: true // 表示监听器是否将调用 preventDefault。如果设置为 true，则表示监听器永远不会调用 preventDefault，这对于滚动事件等性能敏感的事件非常有用。默认值为 false。
});

removeEventListener(type, listener, options?)：删除之前添加的事件监听器。为了成功删除监听器，必须提供与添加监听器时相同的事件类型、函数引用以及是否在捕获阶段进行处理。
js
```
    element.removeEventListener('click', handleClick);
```
dispatchEvent(event)：在对象上派发一个事件。如果事件成功派发，该方法返回一个布尔值，指示是否调用了事件的默认操作（如果事件有默认操作的话）。
js
```
  let clickEvent = new Event('click');
  let success = element.dispatchEvent(clickEvent);
  console.log('Event Dispatched:', success);
```

HTML 事件监听器

在HTML中，可以直接在标签中使用事件属性来指定事件监听器。这些属性以 "on" 开头，后面跟着事件的名称。

html

<button onclick="myFunction()">点击我</button>

事件类型

事件类型是描述事件的种类或类型的字符串值。它指示事件的本质是什么，比如鼠标点击、键盘按下、表单提交等。在事件监听器中，通过指定事件类型来确定监听哪一种事件。

element.addEventListener('click', function() {
  // 处理点击事件的逻辑
});

事件类型不一定有事件对象：

有一些事件类型是由浏览器直接触发的，而不需要用户的交互，这些事件可能不会产生事件对象。例如，DOMContentLoaded 事件表示文档已完全加载，但在事件处理函数中，可能并不传递一个事件对象，因为没有用户直接的交互导致这个事件的发生。

UI 事件

load：在整个页面（包括样式表、图片等外部资源）加载完成后触发。
unload：在文档被完全卸载后触发，例如当用户离开页面或关闭浏览器窗口时。
resize：当窗口或页面大小发生变化时触发。
scroll：当页面滚动时触发。

鼠标事件

click: 当用户点击鼠标左键或使用键盘按下回车键时触发。
dblclick: 当用户双击鼠标左键时触发。
mousedown: 当鼠标按钮被按下时触发。
mouseup: 当鼠标按钮被释放时触发。
mouseenter: 当鼠标指针进入元素时触发，不冒泡。
mouseleave: 当鼠标指针离开元素时触发，不冒泡。
mousemove: 当鼠标指针在元素内移动时触发。
mouseover: 当鼠标指针位于元素上方时触发，冒泡。
mouseout: 当鼠标指针离开元素时触发，冒泡。

滚轮事件

wheel: 当使用鼠标滚轮时触发。

键盘事件

keydown: 当用户按下键盘上的任意键时触发，持续触发直到键被释放。
keyup: 当用户释放键盘上的任意键时触发。

焦点事件

在实际开发中，大多数情况下这两个事件确实更常见地与表单元素一起使用。

focus: 当元素获得焦点时触发。
blur: 当元素失去焦点时触发。
focusin: 当元素或其子元素获得焦点时触发，会冒泡。
focusout: 当元素或其子元素失去焦点时触发，会冒泡。

表单事件

submit：当用户提交表单时触发。
reset：当用户点击表单的重置按钮时触发。
input: 当输入框的值发生变化时触发。
change: 当元素的值发生变化，并失去焦点时触发。

拖拽事件

drag：当拖动过程中持续触发。它可用于实时更新拖动元素的位置或执行其他与拖拽相关的操作。
dragstart：当拖动操作开始时触发。在这个事件中，通常会设置拖动的数据。
dragend：当拖动操作结束时（通过释放鼠标按钮或按退出键）触发。
dragenter：当拖动元素进入目标区域时触发。
dragover：当拖动元素在目标区域内移动时触发。在这个事件中，通常需要阻止默认行为，以允许元素被拖放到目标区域。
dragleave：当拖动元素离开目标区域时触发。
drop：当拖动元素被释放到目标区域时触发。在这个事件中，通常需要阻止默认行为，以防止浏览器打开拖放的元素。

请注意

为了使元素可拖动，您还需要将 draggable 属性设置为 true：

<div draggable="true">
    <!-- 可拖动的内容 -->
</div>

合成事件

compositionstart: 在开始进行组合字符输入时触发。
compositionupdate: 在进行组合字符输入过程中，输入的字符发生变化时触发。
compositionend: 在完成组合字符输入时触发。

进度事件

在 JavaScript 中，进度事件（Progress Events）通常监控用于文件上传下载、文件读取、媒体加载和播放等进度。

progress：当资源加载过程中定期触发，提供有关加载进度的信息。
loadstart：当资源开始加载时触发，例如在发起网络请求时。
abort：当资源加载被中止时触发，例如在用户取消下载或上传时。

触摸事件

touchstart：当用户触摸屏幕时触发。
touchmove：当用户在屏幕上移动手指时触发。
touchend：当用户从屏幕上抬起手指时触发。
touchcancel：当触摸操作被取消时触发。

动画事件

animationstart：在CSS动画开始时触发。
animationend：在CSS动画完成时触发。
animationiteration：在CSS动画重复时触发。如果动画设置了重复次数，每次动画重复完成时都会触发一次。
animationcancel：在动画被取消时触发。例如，如果动画在中途被中断或取消，就会触发此事件。

过渡事件

transitionend：当CSS过渡完成时触发。这是在元素从一种样式过渡到另一种样式完成后触发的事件。
transitionstart：当CSS过渡开始时触发。这是在元素开始从一种样式过渡到另一种样式时触发的事件。
transitioncancel：当CSS过渡被取消时触发。例如，如果在过渡过程中元素的display属性被设置为none，那么过渡将被取消。
transitionrun：当CSS过渡首次创建时触发，即在任何 transition-delay 开始之前。

指针事件

pointerdown：在指针设备按钮按下时触发。
pointerup：在指针设备按钮释放时触发。
pointermove：在指针设备移动时触发。
pointercancel：在指针事件被取消时触发，例如在触摸屏上的手势被浏览器取消。
pointerover：在指针进入元素时触发。
pointerout：在指针离开元素时触发。
pointerenter：与 pointerover 相似，但不会在子元素之间移动时触发。
pointerleave：与 pointerout 相似，但不会在子元素之间移动时触发。

剪切板事件

cut：当用户执行剪切操作时触发。
copy：当用户执行复制操作时触发。
paste：当用户执行粘贴操作时触发。

全屏事件

fullscreenchange：在进入或退出全屏模式时触发。
fullscreenerror：在尝试进入全屏模式时发生错误时触发。

打印事件

afterprint: 打印或打印预览完成后触发。
beforeprint: 在打印或打印预览开始之前触发。

存储事件

Storage：当 localStorage 或 sessionStorage 中的数据发生变化时触发。

网络状态事件

online：当设备重新连接到互联网时触发。
offline：当设备失去互联网连接时触发。

设备事件

devicemotion：设备的加速度或者旋转速度发生变化时触发。
deviceorientation：设备初始方向的相对方向变化时触发。
deviceorientationabsolute：绝对的设备方向变化时触发。

媒体事件

abort：在媒体加载被中止时触发。
canplay：在媒体可以播放时触发，表示媒体的一部分已经加载，可以开始播放。
canplaythrough：在媒体可以无需停顿进行缓冲播放到结束时触发。
durationchange：在媒体的时长（duration）发生变化时触发，例如在加载后获取到了媒体的时长。
emptied：在媒体元素的网络状态变为空（无媒体可用）时触发。
encrypted：在媒体加密状态变化时触发。
ended：在媒体播放结束时触发。
error：在媒体发生错误时触发。
loadeddata：当当前帧的数据已加载，但不保证已解码时触发。
loadedmetadata：在媒体的元数据（例如时长和尺寸）加载后触发。
loadstart：在浏览器开始查找媒体源时触发。
pause：在媒体暂停时触发。
play：在媒体开始播放时触发。
playing：在媒体已开始播放时触发。
progress：在下载媒体数据时触发，用于监控下载进度。
ratechange：在播放速率发生变化时触发。
seeked：在媒体完成跳跃位置（seek）时触发。
seeking：在媒体开始跳跃位置时触发。
stalled：在浏览器尝试获取媒体数据，但数据不可用时触发。
suspend：在浏览器暂停获取媒体数据时触发。
timeupdate：在媒体的当前播放位置发生变化时触发。
volumechange：在音量发生变化时触发。
waiting：在媒体由于缓冲而暂停时触发。

事件对象

事件对象是由浏览器创建的包含有关事件详细信息的对象。它作为事件处理函数的参数传递给事件处理程序。事件对象包含有关事件的许多方面的信息，例如事件类型、触发事件的元素、鼠标位置、键盘按键、触摸信息、剪贴板内容等。在事件处理函数中，可以使用 event 对象来获取相关信息。

javascript

element.addEventListener('click', function(event) {
  // 使用 event 对象获取鼠标位置等信息
  var mouseX = event.clientX;
  var mouseY = event.clientY;
});

事件对象一定有事件类型：

每个事件对象都包含一个 type 属性，该属性表示事件的类型。事件对象的 type 属性是一个字符串，指示事件的本质是什么，如点击、键盘按下、表单提交等。因此，事件对象一定与一个特定的事件类型相关联。

公共构造函数

new Event(type[, options])：用于创建一个新的 Event 对象。

let myEvent = new Event('eventType', {
  bubbles: true,  // 事件是否冒泡
  cancelable: true  // 事件是否可以被取消
});

注意

使用 new Event('eventType') 创建的事件对象是一个简单的通用事件对象，不包含特定于某种事件类型的属性。如果你需要创建更特定类型的事件对象，例如鼠标事件，键盘事件等，你可能需要使用该事件类型的专用构造函数，如 MouseEvent、KeyboardEvent。

公共属性

event.bubbles：表示事件是否冒泡。如果为 true，表示事件会在DOM中进行冒泡传播。
event.cancelable：表示事件是否可以被取消。如果为 true，则表示可以使用 event.preventDefault() 方法取消事件的默认行为。
event.composed：表示事件是否会穿越 shadow DOM 边界，能否触发影子 DOM 内的事件监听器。如果为 false，表示不会。
event.target：返回触发事件的元素。通常是用户与之交互的元素。
event.currentTarget：返回事件处理程序当前正在处理事件的元素。与 event.target 不同，currentTarget 一般是事件处理程序所附加的元素。
event.defaultPrevented：表示是否调用了 event.preventDefault() 方法。如果调用了，值为 true。
event.eventPhase：表示事件在事件流中的阶段。可能的值有 Event.NONE、Event.CAPTURING_PHASE、Event.AT_TARGET、Event.BUBBLING_PHASE。
event.isTrusted：表示事件是否是由浏览器生成的真实事件。如果为 true，表示事件是由用户操作触发的；如果为 false，表示事件是通过脚本创建的（模拟事件）。
event.timeStamp：表示事件创建的时间戳。是一个数字，表示自 1970 年 1 月 1 日 00:00:00 UTC 到事件被创建时的毫秒数。
event.type：表示事件的类型，例如 "click"、"keydown" 等。

公共方法

event.composedPath()：返回一个包含事件路径上所有相关节点的数组。这个路径包括从事件目标到根节点的所有节点，包括在 Shadow DOM 中的节点。

document.addEventListener('click', function(event) {
    const path = event.composedPath();
    console.log('事件路径:', path);
});

event.preventDefault()：用于取消事件的默认行为。比如，在点击链接时使用它可以阻止浏览器跳转到链接的URL。

document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();
    console.log('链接被点击，但是默认行为被取消了。');
});

event.stopPropagation()：用于停止事件在 DOM 结构中的传播，即阻止事件继续冒泡或捕获。

document.getElementById('myButton').addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('按钮被点击，但是事件不会冒泡到父元素。');
});

event.stopImmediatePropagation()：用于立即停止事件的传播，同时阻止任何其他事件处理程序被调用。

document.getElementById('myElement').addEventListener('click', function(event) {
    event.stopImmediatePropagation();
    console.log('第一个点击事件处理程序');
});

document.getElementById('myElement').addEventListener('click', function() {
    console.log('第二个点击事件处理程序，但是不会被调用。');
});

MouseEvent

构造函数

new MouseEvent(type[, options])：用于创建一个新的 MouseEvent 对象。

let clickEvent = new MouseEvent('click', {
  clientX: 50,  // 鼠标在视口中的 X 坐标
  clientY: 50  // 鼠标在视口中的 Y 坐标
});

属性

button：表示鼠标按键的状态。主要用于区分左键、中键、右键等。具体取值可以是：
- 0：主鼠标按钮（通常是左键）
- 1：次要鼠标按钮（通常是中键）
- 2：次要鼠标按钮（通常是右键）
buttons：表示同时按下的鼠标按钮的状态，使用二进制掩码。具体取值可以是：
- 1：主鼠标按钮
- 2：次要鼠标按钮
- 4：辅助鼠标按钮（通常是中键）
- 其他值表示其他按钮的组合状态。
altKey：表示在事件发生时是否按下了"Alt"键。
ctrlKey：表示在事件发生时是否按下了"Ctrl"键。
shiftKey：表示在事件发生时是否按下了"Shift"键。
metaKey：表示在事件发生时是否按下了"Meta"键。在 Windows 系统上通常是"Windows"键，在 Mac 系统上通常是"Command"键。
clientX：表示事件发生时，鼠标指针相对于浏览器窗口客户区域左上角的水平坐标。
clientY：表示事件发生时，鼠标指针相对于浏览器窗口客户区域左上角的垂直坐标。
movementX：表示自上一次鼠标事件发生后，鼠标指针在水平方向上移动的距离。
movementY：表示自上一次鼠标事件发生后，鼠标指针在垂直方向上移动的距离。
offsetX：表示事件发生时，鼠标指针相对于触发事件的元素的水平坐标。
offsetY：表示事件发生时，鼠标指针相对于触发事件的元素的垂直坐标。
pageX：表示事件发生时，鼠标指针相对于整个文档的水平坐标。
pageY：表示事件发生时，鼠标指针相对于整个文档的垂直坐标。
screenX：表示事件发生时，鼠标指针相对于屏幕左上角的水平坐标。
screenY：表示事件发生时，鼠标指针相对于屏幕左上角的垂直坐标。
x：与 clientX 相同，表示事件发生时，鼠标指针相对于浏览器窗口客户区域左上角的水平坐标。
y：与 clientY 相同，表示事件发生时，鼠标指针相对于浏览器窗口客户区域左上角的垂直坐标。
relatedTarget：表示与事件相关的对象。在鼠标移入或移出元素时，这个属性通常指向与事件相关的另一个 DOM 元素。

方法

getModifierState()：于确定在触发鼠标事件时是否按下了指定的修饰键（如 Shift、Ctrl、Alt、Meta 等）。

document.addEventListener('mousedown', function(event) {
  if (event.getModifierState('Shift')) {
    console.log('Shift key was pressed.');
  } else {
    console.log('Shift key was not pressed.');
  }
});

KeyboardEvent

构造函数

new KeyboardEvent(type[, options])：用于创建 KeyboardEvent 对象。

let keydownEvent = new KeyboardEvent('keydown', {
  key: 'A',          // 触发事件的键
  code: 'KeyA',      // 与键关联的字符串
  ctrlKey: true,     // 是否按下 Ctrl 键
  shiftKey: false,   // 是否按下 Shift 键
  altKey: false,     // 是否按下 Alt 键
  metaKey: false,    // 是否按下 Meta 键 (在 Windows 上是 Windows 键，在 Mac 上是 Command 键)
  repeat: false      // 是否为重复事件
});

属性

altKey：表示在事件发生时是否按下了"Alt"键。
code：表示按下的键的物理标识符。与键盘布局无关，通常表示按键在标准键盘上的位置。例如，"KeyA" 表示字母 A 键。
ctrlKey：表示在事件发生时是否按下了"Ctrl"键。
isComposing：表示事件是否由正在进行中的输入事件（如IME输入）生成。
key：表示按下的键的标识符。与键盘布局有关，通常表示按键在实际键盘上的位置。例如，"A" 表示字母 A 键。
location：表示按下的键位于键盘的位置。具体取值可以是：
- 0：标准键盘或未知位置
- 1：左侧
- 2：右侧
- 3：数字键盘
metaKey：表示在事件发生时是否按下了"Meta"键。在 Windows 系统上通常是"Windows"键，在 Mac 系统上通常是"Command"键。
repeat：表示事件是否为重复触发，即按键保持按下状态并重复触发事件。
shiftKey：表示在事件发生时是否按下了"Shift"键。

方法

getModifierState()：用于确定在触发键盘事件时是否按下了指定的修饰键（如 Shift、Ctrl、Alt、Meta 等）。

document.addEventListener('keydown', function(event) {
  if (event.getModifierState('Shift')) {
    console.log('Shift key was pressed.');
  } else {
    console.log('Shift key was not pressed.');
  }
});

InputEvent

构造函数

new InputEvent(type[, options])：用于创建输入事件对象。

let inputEvent = new InputEvent('input', {
  data: 'Hello',          // 包含输入的文本数据
  inputType: 'insertText', // 描述输入的类型
  isComposing: false       // 指示是否在输入中
});

属性

data：包含了输入事件的数据。对于键盘事件，这可能是按下的字符；对于鼠标事件，这可能是鼠标操作的相关信息。
dataTransfer：用于在拖放操作中传递数据的对象。通常在拖放事件中使用，表示正在被拖动的数据。
inputType：表示输入事件的类型。可能的取值包括：
- "insertText": 插入文本
- "deleteContentBackward": 向后删除内容
- "deleteContentForward": 向前删除内容
- "insertLineBreak": 插入换行符
- "insertParagraph": 插入段落
- 等等，还有其他一些类型
isComposing：表示事件是否由正在进行中的输入事件（如IME输入）生成。如果正在输入中，则为 true；否则为 false。

方法

getTargetRanges()：返回一个 StaticRange 对象的数组。

html

<div contenteditable="true">
  初始文本内容...
</div>

<script>
  const editableElem = document.querySelector('[contenteditable="true"]')

  editableElem.addEventListener('beforeinput', (event) => {
    const targetRanges = event.getTargetRanges()
    console.log(targetRanges)
  })
</script>

WheelEvent

构造函数

new WheelEvent(type[, options])：用于创建 WheelEvent 对象。

let wheelEvent = new WheelEvent('wheel', {
  deltaX: 10,         // 鼠标滚轮在水平方向上的滚动量
  deltaY: 20,         // 鼠标滚轮在垂直方向上的滚动量
  deltaZ: 0,          // 鼠标滚轮的 Z 轴滚动量
  deltaMode: 0        // 滚动量的单位，0 表示像素，1 表示行，2 表示页
});

属性

deltaMode：表示 deltaX、deltaY 和 deltaZ 属性的单位。可能的取值包括：
- DOM_DELTA_PIXEL (0): 表示以像素为单位的滚动
- DOM_DELTA_LINE (1): 表示以行为单位的滚动
- DOM_DELTA_PAGE (2): 表示以页面为单位的滚动
deltaX：表示滚轮在水平方向上的滚动量。滚轮向右滚动为正值，向左滚动为负值。单位取决于 deltaMode 属性。
deltaY：表示滚轮在垂直方向上的滚动量。滚轮向前滚动为负值，向后滚动为正值。单位取决于 deltaMode 属性。
deltaZ：表示滚轮在 Z 轴方向上的滚动量。通常情况下，这个值不被使用。

TouchEvent

构造函数

new TouchEvent(type[, options])：用于创建 TouchEvent 对象。

let touchStartEvent = new TouchEvent('touchstart', {
  touches: [
    new Touch({ identifier: 1, target: document.body, pageX: 10, pageY: 20 }),
    new Touch({ identifier: 2, target: document.body, pageX: 30, pageY: 40 })
  ],
  changedTouches: [
    new Touch({ identifier: 1, target: document.body, pageX: 10, pageY: 20 })
  ]
});

属性

altKey：表示在事件发生时是否按下了"Alt"键。
changedTouches：表示与上一次触摸事件相比发生了变化的触摸点列表。每个触摸点都是一个包含有关触摸点信息的对象。
ctrlKey：表示在事件发生时是否按下了"Ctrl"键。
metaKey：表示在事件发生时是否按下了"Meta"键。在 Windows 系统上通常是"Windows"键，在 Mac 系统上通常是"Command"键。
shiftKey：表示在事件发生时是否按下了"Shift"键。
targetTouches：表示在当前事件目标上发生的触摸点列表。每个触摸点都是一个包含有关触摸点信息的对象。
touches：表示当前位于屏幕上的所有触摸点的列表。每个触摸点都是一个包含有关触摸点信息的对象。

AnimationEvent

构造函数

new AnimationEvent(type[, options])：用于创建 AnimationEvent 对象。

let animationEndEvent = new AnimationEvent('animationend', {
  animationName: 'myAnimation',  // 触发事件的动画名称
  elapsedTime: 2.5,              // 动画已运行的时间
  pseudoElement: 'after'         // 伪元素（如果有的话）
});

属性

animationName：表示触发事件的动画的名称。它返回一个字符串，表示与动画关联的 CSS 规则的名称。
elapsedTime：表示自动或通过 animation-play-state 属性控制的动画运行的时间（以秒为单位）。当动画开始时，elapsedTime 为 0，随着动画的进行，它会逐渐增加。
pseudoElement：表示触发事件的伪元素。如果动画与伪元素相关联，此属性将返回伪元素的名称，否则返回 null。

TransitionEvent

构造函数

new TransitionEvent(type[, options])：用于创建 TransitionEvent 对象。

let transitionEndEvent = new TransitionEvent('transitionend', {
  propertyName: 'width',    // 触发事件的属性名称
  elapsedTime: 1.5,         // 过渡已运行的时间
  pseudoElement: 'after'    // 伪元素（如果有的话）
});

属性

elapsedTime：表示自动或通过 transition-duration 属性控制的过渡运行的时间（以秒为单位）。当过渡开始时，elapsedTime 为 0，随着过渡的进行，它会逐渐增加。
propertyName：表示触发事件的 CSS 属性的名称。它返回一个字符串，表示与过渡关联的 CSS 属性的名称。
pseudoElement：表示触发事件的伪元素。如果过渡与伪元素相关联，此属性将返回伪元素的名称，否则返回 null。

CompositionEvent

构造函数

new CompositionEvent(type[, options])：用于创建 CompositionEvent 对象。

let compositionEndEvent = new CompositionEvent('compositionend', {
  data: '你好',    // 输入法中文输入的字符
});

属性

data：表示正在进行输入法组合时生成的文本。它返回一个字符串，其中包含由输入法生成的字符或文本。

FocusEvent

构造函数

new FocusEvent(type[, options])：用于创建 FocusEvent 对象。

let focusEvent = new FocusEvent('focus', {
  relatedTarget: null    // 与事件关联的相关元素
});

属性

relatedTarget：表示与事件相关的另一个 DOM 元素。对于 focus 事件，relatedTarget 表示失去焦点的元素；对于 blur 事件，relatedTarget 表示获取焦点的元素。如果焦点事件不涉及到两个元素之间的切换，则 relatedTarget 为 null。

MessageEvent

构造函数

new MessageEvent(type[, options])：用于创建 MessageEvent 对象。

let messageEvent = new MessageEvent('message', {
  data: {                // 传递的消息数据
    message: 'Hello, world!'
  },
  origin: 'https://example.com',  // 消息的来源
  lastEventId: '',                 // 与事件关联的上一次事件的 ID
  source: window                   // 发送消息的窗口对象
});

属性

data：表示从其他窗口或 Worker 接收到的消息数据。这可以是任何可序列化的数据，例如字符串、对象等。
lastEventId：表示消息的最后一个事件标识符。通常在与 Server-Sent Events (SSE) 一起使用，用于标识从服务器接收的最后一个事件。
origin：表示消息发送方的源（origin），即消息的来源。这是一个字符串，通常是协议、主机和端口的组合。
ports：表示与消息关联的 MessagePort 对象的数组。这通常在使用 Web Workers 或 MessageChannel 进行消息传递时使用。
source：表示消息的发送方，即消息的来源。对于跨窗口或跨文档通信，source 将是发送消息的 Window 对象；对于 Web Workers，source 将是发送消息的 Worker 对象。

DragEvent

构造函数

new DragEvent(type[, dragEventInit])：用于创建一个 DragEvent 对象。

letr dragStartEvent = new DragEvent('dragstart', {
  dataTransfer: new DataTransfer()  // 用于存储拖动操作的数据
});

属性

dataTransfer：包含有关拖放操作的数据，允许你在拖放过程中传递信息。返回一个 DataTransfer 对象。
- new DataTransfer()：创建一个 DataTransfer 对象。
- DataTransfer.dropEffect：获取或设置拖放操作的目标放置效果。可以是"none"(不允许放置)、"copy"(允许复制)、"link"(允许创建链接)、"move"(允许移动)。
- DataTransfer.effectAllowed：获取或设置拖动源允许的放置效果。可以是"none"(不允许放置)、"copy"(允许复制)、"copyLink"(允许复制链接)、"copyMove"(允许复制和移动)、"link"(允许创建链接)、"linkMove"(允许创建链接和移动)、"move"(允许移动)、"all"(允许所有操作)。
- DataTransfer.files：获取一个包含拖放操作中的文件的 FileList 对象。仅在拖放文件时才有意义。
- DataTransfer.items：获取一个包含拖放操作中的数据项的 DataTransferItemList 对象。
  - DataTransferItemList.length：用于获取列表中数据项的数量。
  - DataTransferItemList.add(data, type)：将一个新的数据项添加到数据项列表中。返回新添加的 DataTransferItem 对象。
    - DataTransferItem.kind：表示数据项的类型，可以是字符串 "string"、"file" 或其他值。
    - DataTransferItem.type：表示数据项的具体类型。对于 "string" 类型的数据项，type 是一个空字符串；对于 "file" 类型的数据项，type 是文件的 MIME 类型。
    - DataTransferItem.getAsFile()：返回数据项的文件对象。对于代表文件的数据项有效，其他类型的数据项返回 null。
    - DataTransferItem.getAsString(callback)：异步获取数据项的文本内容。
    - DataTransferItem.webkitGetAsEntry()：用于获取数据项的文件或目录的 FileSystemEntry 对象。
  - DataTransferItemList.clear()：清除数据项列表中的所有数据项。
  - DataTransferItemList.remove(index)：移除指定位置的数据项。
- DataTransfer.types：获取一个数组，包含当前拖动的数据类型。每个元素是一个字符串，表示数据的 MIME 类型。
- DataTransfer.clearData([format])：清除拖动操作的指定数据格式，或者如果没有指定格式，则清除所有数据。这个方法通常用于在拖放操作过程中动态更新数据。
- DataTransfer.getData(format)：获取拖动操作的指定数据格式的数据。如果指定的格式不存在，则返回一个空字符串。
- DataTransfer.setData(format, data)：设置拖动操作的数据。可以为指定的数据格式设置相应的数据。如果指定的格式不存在，则创建一个新的格式。
- DataTransfer.setDragImage(image, x, y)：设置拖动时显示的自定义图像。通常在 dragstart 事件中使用，以定义拖动时显示的图像。

PointerEvent

构造函数

new PointerEvent(type[, options])：用于创建 PointerEvent 对象。指针事件是一种通用的事件类型，用于表示用户与输入设备（如鼠标、触摸屏、触控笔等）的交互。

let pointerDownEvent = new PointerEvent('pointerdown', {
  pointerId: 1,         // 指针的唯一标识符
  pointerType: 'mouse', // 指针的类型，可以是 'mouse'、'pen'、'touch' 等
  tiltX: 100,         // 事件发生时，指针相对于浏览器窗口的 X 坐标
  tiltY: 150          // 事件发生时，指针相对于浏览器窗口的 Y 坐标
});

属性

width：表示指针设备接触面的宽度。这个值通常在 0 到 1 之间，表示相对于设备的宽度。
height：表示指针设备（例如触摸屏或压感笔）的接触面的高度。这个值的范围通常在 0 到 1 之间，表示相对于设备的高度。
isPrimary：是一个布尔值，表示事件是否来自主要的指针设备（例如，主要的触摸点或鼠标按键）。对于多点触摸设备，只有一个触摸点被标记为主要。
pointerId：表示指针设备的唯一标识符。对于触摸设备，每个触摸点都有一个唯一的 pointerId。
pointerType：表示指针设备的类型，可能的值包括：
- "mouse"：鼠标
- "pen"：笔
- "touch"：触摸屏
- "other"：其他类型的指针设备
pressure：表示指针设备的压力。对于支持压感的笔或触摸设备，pressure 的值在 0 到 1 之间。
tangentialPressure：表示指针设备的切向压力。它表示笔与表面之间的切向压力，通常在 -1 到 1 之间的范围。
tiltX：和 tiltY：表示指针设备的倾斜角度。这些值通常在 -90 度到 90 度之间，表示设备相对于水平轴和垂直轴的倾斜角度。
twist：表示指针设备的旋转角度。通常在 0 到 359 度之间，表示设备相对于参考方向的旋转角度。

方法

getCoalescedEvents()：用于获取在当前指针事件期间发生的协同事件列表。协同事件是在主要指针事件（例如鼠标按下）期间发生的其他指针事件，通常是在同一输入设备上。返回一个 TouchList 对象，其中包含了协同事件的信息。

element.addEventListener('pointermove', function(event) {
  var coalescedEvents = event.getCoalescedEvents();
  console.log('Coalesced events:', coalescedEvents);
});

getPredictedEvents()：用于获取在当前指针事件之后可能会发生的预测事件列表。预测事件是基于系统的事件预测算法，用于估计未来可能发生的指针事件。返回一个 TouchList 对象，其中包含了预测事件的信息。

element.addEventListener('pointermove', function(event) {
  var predictedEvents = event.getPredictedEvents();
  console.log('Predicted events:', predictedEvents);
});

ClipboardEvent

构造函数

new ClipboardEvent(type[, options])：用于创建 ClipboardEvent 对象。

let copyEvent = new ClipboardEvent('copy', {
  clipboardData: new DataTransfer()  // 用于存储剪贴板数据的 DataTransfer 对象
});

属性

clipboardData：是一个 DataTransfer 对象，它包含有关剪贴板操作的数据。通过这个对象，你可以访问剪贴板中的文本或文件等数据。

ProgressEvent

构造函数

new ProgressEvent(type[, options])：用于创建 ProgressEvent 对象。

let progressEvent = new ProgressEvent('progress', {
  lengthComputable: true,   // 进度是否可计算
  loaded: 50,               // 已加载的数据量
  total: 100                // 总共的数据量
});

属性

lengthComputable：是一个布尔值，表示是否可以获取事件的总大小。如果为 true，则可以使用 loaded 和 total 属性获取进度信息。
loaded：表示已经加载的数据量。这通常用于显示已完成的进度。
total：表示事件的总大小。如果 lengthComputable 为 false，total 的值可能是未定义的或无效的。

SubmitEvent

构造函数

new SubmitEvent(type[, options])：用于创建一个 SubmitEvent 对象。

let progressEvent = new SubmitEvent('submit', {
  submitter: document.querySelector('#submit')
});

属性

submitter：表示触发提交事件的提交按钮或提交图像元素。如果事件是由 <button> 或 <input> 元素触发的，该属性将引用该元素；如果是由图像元素触发的，该属性将引用包含图像的 <input> 元素。

StorageEvent

构造函数

new StorageEvent(type, options):用于创建一个 StorageEvent 对象。

const storageEvent = new StorageEvent('storage', {
  key: 'username',
  oldValue: null,
  newValue: 'JohnDoe',
  url: 'https://example.com',
  storageArea: localStorage
});

属性

key：发生变化的键名。
oldValue：变化前的值。
newValue：变化后的值。
url：触发事件的文档的 URL。
storageArea：发生变化的 Storage 对象的引用（即 localStorage 或 sessionStorage）。

CustomEvent

构造函数

new CustomEvent(type[, options])：用于创建一个 CustomEvent 对象。

let customEvent = new CustomEvent('customEventType', {
  bubbles: true,         // 事件是否冒泡
  cancelable: true,      // 事件是否可以被取消
  detail: { key: 'value' }     // 自定义数据
});

属性

detail：返回初始化事件时传递的任何数据。

事件委托

当多个相同子级元素有多个相同事件处理程序时，将该子级元素事件统一绑定给该子级元素的共父级元素，这样当子级元素上的事件触发时，会一直冒泡到父级元素，从而通过父级元素事件的event.target来响应函数来处理子元素事件

html

  <ul id="parentList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    // 添加事件处理程序到父元素
    document.getElementById('parentList').addEventListener('click', function(event) {
      // 检查事件目标是否是<li>元素
      if (event.target.tagName === 'LI') {
        // 执行相应的操作
        alert('Item clicked: ' + event.target.textContent);
      }
    });
  </script>

事件模拟

EventTarget.dispatchEvent()：用于模拟触发指定类型的事件。

html

<button id="myButton">Click me</button>

<script>
  // 获取一个实现了 EventTarget 接口的对象
  let button = document.getElementById('myButton');

  // 创建一个点击事件：Event 构造函数或指定类型的事件对象构造函数，如：new MouseEvent('click')
  let clickEvent = new Event('click');
  

  // 添加事件监听器
  button.addEventListener('click', function(event) {
    alert('Button clicked!');
  });

  // 模拟点击事件
  button.dispatchEvent(clickEvent);
</script>

HTTP

报文

请求报文

HTTP 请求报文由客户端发送到服务器，以请求特定资源或执行特定操作。

bash

[请求行]
[请求头]
[空行]
[请求体]

请求行

bash

[请求方法] [请求目标] [HTTP 版本]

请求头
- 通用头部（General Headers）: 这些头部是请求和响应消息双方都可以使用的头部。
- 请求头部（Request Headers）: 这些头部提供了有关客户端发送的请求的信息。
- 实体头部（Entity Headers）: 这些头部提供了关于请求体或响应体的信息。
- 其他常见头部: 这里可以包括一些特定的头部，比如 "Referer (or Referrer)" 头部，用于表示请求的来源。这种头部通常用于防盗链、统计分析等场景。
请求体
- 单一数据（Single Data）：请求体中包含单一数据实体。这通常是已知长度且请求头包含 Content-Type 和 Content-Length 。
  - application/x-www-form-urlencoded：常见于表单提交，数据以键值对形式编码在请求体中。
    md
```
key1=value1&key2=value2&key3=value3
```
  - application/json：常见于发送 JSON 格式的数据。
    json
```
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}
```
  - text/plain: 纯文本格式的数据，不包含任何格式化或标记。
    md
```
This is a plain text data.
```
  - text/html: 适用于包含 HTML 标记的文本数据。
    html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Example</title>
</head>
<body>
    <p>This is a HTML data.</p>
</body>
</html>
```
- 多部分数据（Multipart Data）：请求体中包含多个独立的数据部分，适用于上传文件或包含多种类型数据的场景。
  - multipart/form-data：常见于文件上传，数据以多部分形式编码在请求体中。
  md
```
--boundary
Content-Disposition: form-data; name="key1"

value1
--boundary
Content-Disposition: form-data; name="key2"

value2
--boundary
Content-Disposition: form-data; name="file"; filename="file.txt"
Content-Type: text/plain

file content
--boundary--
```
注意
并非所有的请求都包含请求体。请求体通常用于 POST、PUT、PATCH 等请求方法，而其他方法如 GET、DELETE 等通常通过 URL 的查询字符串来向服务器发送数据。查询字符串位于 URL 中问号 ? 之后，由多个键值对组成，各键值对之间用 & 分隔。
md
```
https://www.example.com/search?q=query&category=web&page=1
```

响应报文

HTTP 响应报文由服务器发送到客户端，以回复客户端的请求。

bash

[状态行]
[响应头]
[空行]
[响应体]

状态行

bash

[协议版本号] [状态码] [状态文本]

响应头
- 通用头部（General Headers）: 这些头部是请求和响应消息双方都可以使用的头部，如 Cache-Control、Connection、Date 等。
- 响应头部（Response Headers）: 提供了关于服务器响应的信息，如 Server、Content-Type、Content-Length 等。
- 实体头部（Entity Headers）: 提供了关于响应体的信息，如 Content-Encoding、Content-Language、Content-Disposition 等。
- 其他常见头部: 这里可以包括一些特定的头部，例如 Set-Cookie 用于在客户端设置 Cookie。
响应体
- 单一数据（Single Part Data）：响应体中包含单一的数据块，可以是 JSON 对象、HTML 页面、纯文本等。
  - 已知长度：响应头包含 Content-Type 和 Content-Length
    - JSON 响应体
      json
      {"key1": "value1", "key2": "value2"}
    - HTML 响应体
      html
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example HTML</title> </head> <body> <h1>Hello, World!</h1> <p>This is an example HTML response.</p> </body> </html>
    - 文本响应体
      md
      This is a plain text response.
  - 未知长度：分块传输编码（Chunked Transfer Encoding），响应头包含 Transfer-Encoding
    md
```
HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

7
Chunk 1
6
Chunk 2
0
```
- 多部分数据（Multipart Data）：响应体中包含多个独立的数据块，每个块可能有不同的媒体类型，通过分隔符分隔。这适用于传输多个文件或多种不同类型的数据。
  md
```
--boundary
Content-Type: application/json

{"key1": "value1"}

--boundary
Content-Type: text/plain

This is a plain text response.

--boundary--
```
注意
1. 并非所有响应都有响应体，如201或204状态码通常没有实际数据。通过检查Content-Length或Content-Type字段，可以确定响应是否包含响应体。
2. 请求体类型与响应体类型无需一致。客户端通过请求头的Content-Type定义请求体格式，服务器通过响应头的Content-Type定义返回的数据格式。例如，客户端可使用JSON格式的请求体，而服务器可以返回HTML格式的响应体，实现更灵活的数据处理。

头部信息

HTTP头部（HTTP Headers）是在HTTP协议中用于传递额外信息的重要组成部分。头部包含在HTTP请求和响应消息中，它提供了关于消息、请求或响应的重要元数据。一般可以分为五大头部：通用头部、请求头部、响应头部、实体头部和其他头部。

通用头部

Cache-Control: 控制缓存的行为，包括请求和响应的缓存指令。
Connection: 控制是否需要持久连接。
Date: 表示消息创建的日期和时间。
Pragma: 用于向后兼容的头部，控制缓存和连接选项。
Trailer: 列出在分块传输编码的尾部存在的头部字段。
Transfer-Encoding: 指明在消息主体内如何编码以确保安全传输。
Upgrade: 用于在客户端和服务器之间切换协议。
Via: 显示请求和响应经过的中间节点（代理、网关等）。
Warning: 用于传递关于消息状态或可能错误的附加信息。
Keep-Alive：允许发送方提示如何使用连接来设置超时和最大请求量。将 Connection 标头设置为“keep-alive”才能使该标头生效。

请求头部

Accept: 告诉服务器可以处理的媒体类型。
Accept-Charset: 指定客户端可以接受的字符集。
Accept-Encoding: 指定客户端可以接受的内容编码。
Accept-Language: 指定客户端可以接受的自然语言。
Authorization: 包含用于进行身份验证的凭证信息。
Cookie: 包含在先前的请求中服务器通过 Set-Cookie 头部设置的 Cookie。
Expect: 用于表示对服务器的期望行为。
From: 包含发送请求的用户的电子邮件地址。
Host: 表示请求资源所在的域名。
If-Match: 仅当特定条件为真时，才执行请求。
If-Modified-Since: 只有在指定日期后资源被修改过时，才执行请求。
If-None-Match: 只有在指定的实体标记未与资源的当前实体标记匹配时，才执行请求。
If-Range: 如果实体标记匹配，将返回范围请求的实体；否则，将返回整个实体。
If-Unmodified-Since: 只有在指定日期后资源未被修改过时，才执行请求。
Max-Forwards: 限制在请求链中跟踪的服务器的数量。
Proxy-Authorization: 包含连接到代理的凭证信息。
Range: 请求资源的一个或多个子范围。
Referer: 表示当前页面的 URI。
TE: 指定可使用的传输编码。
User-Agent: 包含发起请求的用户代理的信息。

响应头部

Accept-Patch: 指定服务器支持的补丁文档的媒体类型。
Accept-Ranges: 表示服务器是否支持范围请求。
Age: 表示响应的实体从原始服务器创建的时间。
Allow: 指定对资源有效的请求方法。
Alt-Svc: 说明备用服务的位置。
Alt-Used: 表示已经使用了备用服务。
ETag: 表示请求变体的当前值。
Location: 用于重定向，指示客户端重定向到的位置。
Proxy-Authenticate: 提供用于对代理进行身份验证的凭证信息。
Retry-After: 表示在执行新的请求之前需要等待的时间。
Server: 包含服务器的信息。
Server-Timing: 用于提供关于服务器执行时间的性能信息。
Vary: 控制缓存的选择性。
WWW-Authenticate: 提供用于对服务器进行身份验证的凭证信息。

实体头部

Allow: 指定对资源有效的请求方法。
Content-Disposition: 提供有关如何展示响应的提示，例如以附件的形式。
Content-Encoding: 指示已应用于实体的编码。
Content-Language: 指定实体主体的自然语言。
Content-Length: 表示实体主体的大小。
Content-Location: 表示替代实体的位置。
Content-Range: 指定整个实体中使用的字节范围。
Content-Security-Policy: 定义加载页面时允许的资源以及如何处理不符合策略的内容。
Content-Security-Policy-Report-Only: 类似于 Content-Security-Policy，但只用于报告违规。
Content-Type: 指定实体主体的媒体类型。
Expires: 表示实体过期的日期和时间。
Last-Modified: 表示资源的最后修改日期和时间。
Link: 在响应中引入其他资源，通常用于指定样式表或脚本。

其他头部

Access-Control-Allow-Credentials: 指示是否允许请求携带身份验证信息。
Access-Control-Allow-Headers: 指定哪些 HTTP 头部是安全的请求头。
Access-Control-Allow-Methods: 指定哪些 HTTP 方法是允许的。
Access-Control-Allow-Origin: 指定哪些域名可以访问资源。
Access-Control-Expose-Headers: 指定哪些头部可以暴露给请求的响应。
Access-Control-Max-Age: 指定预检请求的有效期。
Access-Control-Request-Headers: 在实际的请求中，指示预检请求中 Access-Control-Allow-Headers 中应该允许的字段。
Access-Control-Request-Method: 在实际的请求中，指示预检请求中 Access-Control-Allow-Methods 中应该允许的方法。
Clear-Site-Data: 用于指示清除与当前网页关联的数据。
Cross-Origin-Embedder-Policy: 控制嵌入内容的权限。
Cross-Origin-Opener-Policy: 控制新窗口、标签页等的权限。
Cross-Origin-Resource-Policy: 控制跨源请求资源的权限。
Forwarded: 用于标识原始请求的客户端和服务器的信息。
Origin: 表示发起请求的源。
Permissions-Policy: 控制页面的权限特性，如摄像头、麦克风等。
Sec-Fetch-Dest: 指定请求的预期目标。
Sec-Fetch-Mode: 指定浏览器应该使用何种模式来获取资源。
Sec-Fetch-Site: 指定请求的上下文是同源还是跨源。
Sec-Fetch-User: 指定请求是否包含用户的凭证。
Sec-WebSocket-Accept: WebSocket 连接中的服务器确认。
Service-Worker-Navigation-Preload: 指定是否启用导航预加载。
Set-Cookie: 在响应中设置 Cookie。
SourceMap: 提供关于 JavaScript 或 CSS 文件生成源映射的信息。
Strict-Transport-Security: 用于启用 HTTPS，并指定在特定时间内仅通过 HTTPS 访问该资源。
Timing-Allow-Origin: 指定哪些源可以获取性能计时信息。
Upgrade-Insecure-Requests: 用于向服务器指示客户端希望使用安全连接。
X-Content-Type-Options: 控制浏览器是否应该识别指定的 MIME 类型。
X-Frame-Options: 控制浏览器是否允许页面在 frame 或 iframe 中展示。
Referrer-Policy: 控制浏览器在请求中如何传递 Referer 头部。

请求方式

GET：从服务器获取资源。GET 请求只是请求数据，不会对服务器资源进行修改。
POST：向服务器提交数据，用于提交表单数据或上传文件。POST 请求可能会导致服务器状态的变化。
PUT：向服务器上传新的数据，或更新现有资源。PUT 请求通常用于更新服务器上的资源，或创建新资源。
DELETE：请求服务器删除指定的资源。
PATCH：对资源进行部分修改。PATCH 请求用于对资源的局部更新。
HEAD：请求服务器返回 HTTP 头部，而不返回实际内容。与 GET 方法类似，但不需要传输实体主体。
OPTIONS：用于描述目标资源的通信选项，或者检查服务器支持哪些方法。客户端可以使用 OPTIONS 请求来了解服务器支持的方法和资源的性质。
TRACE：用于在目的服务器端测试对特定资源的路径的连通性。一般情况下，这个方法很少使用，因为它会将请求的内容反射回客户端，存在安全风险。
CONNECT：建立与目标资源的隧道连接，通常用于通过代理服务器建立 TLS/SSL 连接。主要用于代理服务器的通信。

响应状态码

1xx(消息): 接收的请求正在处理。
- 100 Continue: 请求的一部分已经被服务器收到，客户端应该继续发送其余的请求。
- 101 Switching Protocols: 服务器正在按照客户端的请求切换协议，如切换到 WebSocket。
- 102 Processing: 服务器已经收到并正在处理请求，但没有响应可用。
- 103 Early Hints: 服务器提示客户端应该开始预加载资源。
2xx(成功): 请求正常处理完毕。
- 200 OK: 请求成功。
- 201 Created: 请求已经被创建，新的资源已经被成功创建。
- 202 Accepted: 请求已经被接受，但还未被处理完成。
- 203 Non-Authoritative Information: 响应中包含的信息不是来自原始服务器，而是来自副本或第三方。
- 204 No Content: 服务器成功处理请求，但没有返回任何内容。
- 205 Reset Content: 请求已经成功处理，但客户端应该重置文档视图。
- 206 Partial Content: 客户端请求的范围部分被成功返回。
- 207 Multi-Status: 多状态，表示请求已经执行，但响应可能包含多个状态。
- 208 Already Reported: 已报告，已经在之前的部分请求中报告了对应的信息。
- 226 IM Used: 服务器已经完成了对资源的实例处理。
3xx(重定向): 需要进行附加操作以完成请求。
- 300 Multiple Choices: 请求的资源有多种表示形式，服务器会根据请求者的首选项选择其中一个。
- 301 Moved Permanently: 请求的资源已永久移动到新位置。
- 302 Found: 请求的资源临时移动到新位置。
- 303 See Other: 请求的资源存在另一个 URI，客户端应该使用 GET 方法获取。
- 304 Not Modified: 资源未被修改，可以使用客户端缓存的版本。
- 307 Temporary Redirect: 请求的资源临时移动到新位置，客户端应该继续使用原始的请求 URI。
- 308 Permanent Redirect: 请求的资源已永久移动到新位置，客户端应该更新其引用。
4xx(客户端错误): 服务器无法处理请求。
- 400 Bad Request: 由于客户端的请求无效，服务器无法处理。
- 401 Unauthorized: 请求未经授权，需要身份验证。
- 402 Payment Required: 保留供将来使用。
- 403 Forbidden: 服务器理解请求，但拒绝执行。
- 404 Not Found: 请求的资源不存在。
- 405 Method Not Allowed: 请求中指定的方法不允许。
- 406 Not Acceptable: 服务器无法根据客户端请求的内容特性完成请求。
- 407 Proxy Authentication Required: 需要代理身份验证。
- 408 Request Timeout: 请求超时，服务器没有收到完整的请求。
- 409 Conflict: 由于冲突，请求无法被完成。
- 410 Gone: 请求的资源已不再可用。
- 411 Length Required: 缺少请求头中的 Content-Length 字段。
- 412 Precondition Failed: 请求头中的条件不满足。
- 413 Payload Too Large: 请求的实体过大，服务器拒绝处理。
- 414 URI Too Long: 请求的 URI 过长，服务器无法处理。
- 415 Unsupported Media Type: 请求的媒体类型不受支持。
- 416 Range Not Satisfiable: 服务器不能满足请求的范围。
- 417 Expectation Failed: 服务器未满足请求 Expect 头字段的期望值。
- 418 I'm a teapot: 服务器拒绝为请求煮咖啡，是个恶作剧。
- 421 Misdirected Request: 请求被发送到服务器不期望的域。
- 422 Unprocessable Content: 请求格式正确，但由于语义错误无法响应。
- 423 Locked: 当前资源被锁定。
- 424 Failed Dependency: 请求的失败，因为请求的先决条件失败。
- 425 Too Early: 服务器不愿意冒险处理包含敏感信息的请求。
- 426 Upgrade Required: 客户端应切换到 TLS/1.0。
- 428 Precondition Required: 要求先决条件。
- 429 Too Many Requests: 请求过多，服务器拒绝响应。
- 431 Request Header Fields Too Large: 请求头字段太大，服务器无法处理。
- 451 Unavailable For Legal Reasons: 由于法律原因，请求无法完成。
5xx(服务器错误): 服务器处理请求出错。
- 500 Internal Server Error: 服务器遇到不可预知的错误。
- 501 Not Implemented: 服务器不支持实现请求所需的功能。
- 502 Bad Gateway: 充当网关或代理的服务器从上游服务器收到无效响应。
- 503 Service Unavailable: 服务器目前无法提供服务。
- 504 Gateway Timeout: 充当网关或代理的服务器未及时从上游服务器收到请求。
- 505 HTTP Version Not Supported: 服务器不支持请求中所使用的 HTTP 协议版本。
- 506 Variant Also Negotiates: 服务器有一个内部配置错误。
- 507 Insufficient Storage: 服务器无法存储完成请求所必须的内容。
- 508 Loop Detected: 服务器在处理请求时检测到无限循环。
- 510 Not Extended: 客户端需要对请求进一步扩展，服务器不支持扩展。
- 511 Network Authentication Required: 要求进行网络身份验证。

跨域请求

CORS

允许特定域的请求

http

Access-Control-Allow-Origin: https://example.com

允许特定的 HTTP 方法

http

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

允许特定的请求头

http

Access-Control-Allow-Headers: Authorization, Content-Type

支持带凭据的请求

http

Access-Control-Allow-Credentials: true

预检请求的有效期

http

Access-Control-Max-Age: 3600  # 有效期为1小时

暴露特定的请求头

http

Access-Control-Expose-Headers: Content-Length, X-My-Custom-Header

JSONP

手动加载JSON接口

javascript

<script src = "http://127.0.0.1/json?callback=handle"></script>

动态加载JSON接口

创建script标签

javascript

const script = docment.creatElement('script')

设置script标签src属性

javascript

script.src = 'http://127.0.0.1/json?callback=handle'

将script标签添加到文档中
javascript
```
document.body.appendChild('script')
```

将script请求发送变成动态请求

javascript

script.onload = () => {
  doucment.body.removeChild(script)
}

Ajax

Ajax是Asynchronous JavaScript And XML（异步javascript和XML）的简写。XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式，目前常用JSON替代XML。

XHR

XMLHttpRequest（XHR）是一个在 JavaScript 中使用的对象，用于与服务器异步交换数据。XHR 是 Ajax 的核心技术之一，它允许在不刷新整个页面的情况下发送 HTTP 请求，并处理服务器的响应。

javascript

// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);

// 注册回调函数，处理响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理成功的响应
    let responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};

// 发送请求
xhr.send();

构造函数

new XMLHttpRequest()：用于创建一个 XMLHttpRequest 对象。

let xhr = new XMLHttpRequest();

属性

readyState：表示 XMLHttpRequest 对象的状态。
- 0（UNSENT）: 请求未初始化。
- 1（OPENED）: 已调用 open 方法，但尚未调用 send。
- 2（HEADERS_RECEIVED）: 已调用 send，且响应头和状态已经可用。
- 3（LOADING）: 下载中，部分响应数据可用。
- 4（DONE）: 请求完成。
response：用于获取响应的主体数据。类型取决于 responseType 属性的设置。
responseText：获取响应的文本数据。
responseType：用于指定响应数据的类型。可以是空字符串（默认）、text、arraybuffer、blob、document、json。
responseURL：获取响应的 URL。
responseXML：获取响应的 XML 数据（如果响应类型为 text/xml 或 application/xml）。
status：获取响应的 HTTP 状态码。
statusText：获取响应的 HTTP 状态文本。
timeout：获取或设置请求的超时时间（以毫秒为单位）。
upload：返回一个 XMLHttpRequestUpload 对象，它表示上传过程。
withCredentials：指示是否应该发送包含凭据的请求（如 cookie 或 HTTP 身份验证）。默认为 false。

方法

abort()：用于取消当前的 XMLHttpRequest 请求。

xhr.abort();

getAllResponseHeaders()：返回所有 HTTP 响应头，以字符串形式。

let allHeaders = xhr.getAllResponseHeaders();

getResponseHeader(headerName)：返回指定响应头的值。

let contentType = xhr.getResponseHeader('Content-Type');

open(method, url[, async, user[, password]])：用于初始化请求，指定 HTTP 方法、URL 和是否异步执行。

xhr.open('GET', 'https://api.example.com/data', true);

overrideMimeType(mimeType)：用于覆盖服务器返回的 MIME 类型。

xhr.overrideMimeType('text/plain');

send([data])：发送请求。对于 POST 请求，可以通过 send 方法发送要传递给服务器的数据。

xhr.send();
// 或
xhr.send('data=example');

setRequestHeader(header, value)：设置 HTTP 请求头的值。在调用 open 之后、调用 send 之前使用。

xhr.setRequestHeader('Content-Type', 'application/json');

事件

abort：在请求被中止时触发。
error：在请求发生错误时触发。
load：在请求成功完成时触发。该事件表示整个请求已经完成，包括成功的和失败的情况。
loadend：在请求完成时触发，不论成功与否。
loadstart：在请求开始时触发。
progress：在接收到新数据时周期性地触发，用于跟踪请求的进度。
readystatechange：每当 readyState 改变时触发。readyState 的改变是 XMLHttpRequest 请求的关键事件。
timeout：在请求超时时触发。

Fetch

fetch(url[, options])
  .then(response => {
    // 处理响应
    return response.json(); // 或者 response.text(), response.blob() 等
  })
  .then(data => {
    // 处理获取到的数据
  })
  .catch(error => {
    // 处理请求失败
    console.error('Fetch Error:', error);
  });

options

method: 指定请求的方法，如 'GET'、'POST'、'PUT'、'DELETE' 等。默认值是 'GET'。
headers: 用于设置请求头信息，可以是一个对象。
body: 用于设置请求的主体内容，通常在 POST 请求中使用。可以是 Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 字符串对象, 迭代器, ReadableStream 。
mode: 用于设置请求的模式，如 'cors'、'no-cors'、'same-origin' 等。
credentials: 用于控制是否携带凭证信息，如 cookies。可以是 'same-origin'、'include'、'omit'。
cache: 用于设置请求的缓存模式，可以是 default, no-store, reload, no-cache, force-cache, only-if-cached。
redirect: 用于设置重定向行为，可以是 'follow'、'error'、'manual'。
referrer: 用于设置引用地址，可以是 'no-referrer'、'client'、URL 字符串等。
referrerPolicy: 用于设置请求的引用策略，可以是 no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, - strict-origin-when-cross-origin, unsafe-url 。
integrity：用于指定资源的完整性校验，通常用于确保资源在下载和使用过程中没有被篡改。它的值是一个包含哈希值的字符串。
keepalive：用于启用或禁用 HTTP Keep-Alive 功能，即在多个请求之间保持持久连接。默认情况下，fetch 请求是不保持连接的。
signal：用于传递一个 AbortSignal 对象，可以用于中止请求。
priority：用于设置请求的优先级，它是一个字符串，可以是 'high'、'normal' 或 'low' 。

Headers

Headers 对象是 JavaScript 中表示 HTTP 头部信息的对象。它允许开发者构建、操作和处理 HTTP 请求或响应的头部信息。Headers 对象通常用于设置和获取头部字段，以及在 fetch 函数中配置请求头或处理响应头。

:::waring Headers() 构造函数的参数与 fetch() 方法中 options 参数的 headers 属性相同。 :::

构造函数

new Headers([init])：用于创建 Headers 对象的构造函数。

// 创建一个空的 Headers 对象
const emptyHeaders = new Headers();

// 创建一个包含初始头部的 Headers 对象
const customHeaders = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123',
  // 其他自定义头部
});

方法

append(name, value)：用于向 Headers 对象添加一个新的头部信息。如果指定的头部已经存在，则将新值追加到已有头部的末尾。

const customHeaders = new Headers();
customHeaders.append('Content-Type', 'application/json');
customHeaders.append('Authorization', 'Bearer token123');

delete(name)：用于删除指定名称的头部信息。

customHeaders.delete('Authorization');

entries()：返回一个包含所有头部键值对的迭代器。

for (const [key, value] of customHeaders.entries()) {
  console.log(`${key}: ${value}`);
}

forEach(callback)：用于遍历 Headers 对象的每个头部，并对它们执行提供的回调函数。

customHeaders.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

get(name)：用于获取指定名称的头部值。

const contentType = customHeaders.get('Content-Type');

has(name)：用于检查是否存在指定名称的头部。

const hasAuthorization = customHeaders.has('Authorization');

keys()：返回一个包含所有头部名称的迭代器。

for (const key of customHeaders.keys()) {
  console.log(key);
}

set(name, value)：用于设置指定名称的头部值。如果指定的头部已经存在，则将其值替换为新值。

customHeaders.set('Content-Type', 'text/plain');

values()：返回一个包含所有头部值的迭代器。

for (const value of customHeaders.values()) {
  console.log(value);
}

Request

Request 对象是在 JavaScript 中用于表示 HTTP 请求的对象。它允许开发者创建和配置请求的各个方面，包括请求的 URL、方法、头部信息、主体内容等。Request 对象通常用于发起网络请求，并在 fetch 函数中作为参数传递，以定制和控制请求的行为。

:::waring Request() 构造函数的参数与 fetch() 方法的参数相同，但返回类型不同：Request() 构造函数的实例对象直接返回一个 Request 对象，而 fetch() 返回的是一个 Promise 对象，然后通过 .then() 处理异步的 Response 对象。 :::

构造函数

new Request(input[, options])：用于创建 Request 对象的构造函数。

// 创建一个简单的 GET 请求
const simpleRequest = new Request('https://api.example.com/data');

// 创建一个带有定制选项的 POST 请求
const customOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
  },
  body: JSON.stringify({ key: 'value' }),
};

const postRequest = new Request('https://api.example.com/post', customOptions);

属性

url：表示请求的 URL。
body：表示请求的主体内容，可以是字符串、FormData 对象等。
bodyUsed：一个布尔值，表示是否已经对请求主体进行过消耗（读取）。
cache：设置请求的缓存模式，可以是 'default'、'no-store'、'reload' 等。
credentials：表示是否在请求中包含凭证信息，可以是 'omit'、'same-origin'、'include'。
destination：表示请求的目标，可以是 'empty'、'audio'、'document' 等。
headers：表示请求头部信息，是一个 Headers 对象。
integrity：用于设置请求资源的完整性校验，通常是一个包含哈希值的字符串。
method：表示请求的方法，如 'GET'、'POST' 等。
mode：设置请求的模式，可以是 'navigate'、'same-origin'、'cors' 等。
redirect：表示跟随请求的重定向模式，可以是 'follow'、'error'、'manual'。
referrer：表示请求的引用地址，可以是 'no-referrer'、'origin'、'unsafe-url'。
referrerPolicy：设置请求的引用策略，可以是 'no-referrer'、'no-referrer-when-downgrade' 等。
signal：用于传递一个 AbortSignal 对象，可以用于中止请求。

方法

arrayBuffer(): 返回一个 Request，解析响应体为 ArrayBuffer。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.arrayBuffer().then(buffer => {
    // 处理解析后的二进制数据
  })

blob(): 返回一个 Request，解析响应体为 Blob 对象。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.blob().then(blob => {
    // 处理解析后的 Blob 数据
    imageElment.src = URL.createObjectURL(blob)
  })

clone(): 创建并返回当前 Request 对象的一个克隆。如果请求体已被使用， clone() 会抛出 TypeError 。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.clone().then(clone => {
    // 处理解析后的 clone 数据
  })

formData(): 返回一个 Request，解析响应体为 FormData 对象。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.formData().then(formData => {
    // 处理解析后的 FormData 数据
  })

json(): 返回一个 Request，解析响应体为 JSON 格式。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.json().then(data => {
    // 处理解析后的 JSON 数据
  })

text(): 返回一个 Request，解析响应体为文本字符串。

const simpleRequest = new Request('https://api.example.com/data');

simpleRequest.text().then(text => {
    // 处理解析后的文本数据
  })

Response

Response 对象是 Fetch API 提供的一种表示 HTTP 响应的对象。它包含了与请求相关的信息，如状态码、头部、以及响应体等。当你使用 Fetch API 发起网络请求时，返回的是一个 Response 对象。

:::waring Response() 构造函数的实例对象与 fetch() 方法返回的 Promise 对象通过 .then() 处理异步的 Response 对象相同。 :::

构造函数

new Response([body[, options]])：用于创建一个新的 Response 对象。

// 创建一个包含 JSON 数据的 Response 对象
const jsonData = { key: 'value' };
const jsonResponse = new Response(JSON.stringify(jsonData), {
  status: 200,
  headers: { 'Content-Type': 'application/json' },
});

// 创建一个包含文本数据的 Response 对象
const textData = 'Hello, World!';
const textResponse = new Response(textData, {
  status: 200,
  statusText: 'OK',
  headers: { 'Content-Type': 'text/plain' },
});

::: body 与 options

body: 可选参数，表示响应体。可以是以下几种类型之一：
- Blob
- ArrayBuffer
- TypedArray
- DataView
- FormData
- ReadableStream
- URLSearchParams
- String
- string literal
options: 可选参数，是一个包含各种配置选项的对象，可以包含以下属性：
- status: 响应的状态码 (例如，200 表示成功)。
- statusText: 与状态码相关的短描述。
- headers: 包含响应头信息的 Headers 对象。 :::

属性

body: 表示响应体，可以通过该属性访问响应的内容。它可以是一个 ReadableStream，Blob 对象，或者其他类型的数据。
bodyUsed: 是一个布尔值，表示响应体是否已被使用。一旦对响应体调用了某个消耗（consume）方法（例如 text()、json() 等），bodyUsed 将变为 true。
headers: 包含响应头信息的 Headers 对象，可以通过该对象访问和操作响应头。
ok: 是一个布尔值，表示响应的成功与否。当响应的状态码在 200-299 范围内时，ok 为 true，否则为 false。
redirected: 是一个布尔值，表示响应是否经过了重定向。
status: 表示响应的状态码，例如 200 表示成功，404 表示未找到资源。
statusText: 包含与状态码相关的短描述，例如 "OK" 表示成功。
type: 表示响应的类型，可能是 "basic"、"cors"、"error"、"opaque" 等。
url: 包含响应的 URL。

方法

arrayBuffer(): 返回一个 Promise，解析响应体为 ArrayBuffer。

fetch('/api/data')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // 处理解析后的二进制数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

blob(): 返回一个 Promise，解析响应体为 Blob 对象。

fetch('/api/data')
  .then(response => response.blob())
  .then(blob => {
    // 处理解析后的 Blob 数据
    imageElment.src = URL.createObjectURL(blob)
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

clone(): 创建并返回当前 Response 对象的一个克隆。如果响应体已被使用， clone() 会抛出 TypeError 。

fetch('/api/data')
  .then(response => response.clone())
  .then(clone => {
    // 处理解析后的 clone 数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

formData(): 返回一个 Promise，解析响应体为 FormData 对象。

fetch('/api/data')
  .then(response => response.formData())
  .then(formData => {
    // 处理解析后的 FormData 数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

json(): 返回一个 Promise，解析响应体为 JSON 格式。

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理解析后的 JSON 数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

text(): 返回一个 Promise，解析响应体为文本字符串。

fetch('/api/data')
  .then(response => response.text())
  .then(text => {
    // 处理解析后的文本数据
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

静态方法

Response.error()：返回与网络错误关联的新 Response 对象。

console.log(Response.error())

Response.json(data[, options])：返回一个 Response ，其中包含提供的 JSON 数据作为正文，以及一个 Content-Type 标头设置为 application/json 。还可以设置响应状态、状态消息和附加标头。

Response.json(
  { some: "data", more: "information" },
  { status: 307, statusText: "Temporary Redirect" },
)

Response.redirect(url[, status])：返回 Response ，从而重定向到指定的 URL。status 只能是 301, 302, 303, 307, 308 。

Response.redirect("https://www.example.com", 302);

Axios(封装)

import axios from 'axios';

// 创建一个自定义的Axios实例
const http = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些处理，比如添加token等
    config.headers.Authorization = `Bearer ${getToken()}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做些处理
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default http;

error 对象

请求拦截器 error 对象常见属性
- config：包含产生请求的配置信息对象。
- request： XMLHttpRequest 实例或者 http.ClientRequest 实例，取决于请求是通过 XMLHttpRequest 还是 http 模块发起的。
- message：错误的文本信息。
- code：与 HTTP 状态码相对应的错误码。例如，如果请求超时，则错误码可能是 "ECONNABORTED"。
- isAxiosError：一个布尔值，指示错误是否由 Axios 自身引发。
响应拦截器 error 对象常见属性
- config：包含产生请求的配置信息对象。
- response：包含响应数据的对象。这在响应拦截器中出错时可能为 undefined。
- request： XMLHttpRequest 实例或者 http.ClientRequest 实例，取决于请求是通过 XMLHttpRequest 还是 http 模块发起的。
- message：错误的文本信息。
- code：与 HTTP 状态码相对应的错误码。例如，如果响应状态码是 404，则错误码可能是 "ECONNABORTED"。
- isAxiosError：一个布尔值，指示错误是否由 Axios 自身引发。
- responseText（仅在浏览器环境中）：包含响应文本的字符串。
- responseXML（仅在浏览器环境中）：包含响应 XML 文档的 DOM 对象。

Web Socket

构造函数

new WebSocket(url[, protocols])：用于创建一个 WebSocket 对象。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket', ['protocol1', 'protocol2']);

// 事件监听器，处理连接建立成功的情况
socket.addEventListener('open', (event) => {
  console.log('WebSocket连接已建立');
  // 在此处可以开始发送或接收数据
});

// 事件监听器，处理接收到的消息
socket.addEventListener('message', (event) => {
  console.log('接收到消息:', event.data);
  // 在此处可以处理接收到的数据
});

// 事件监听器，处理连接关闭的情况
socket.addEventListener('close', (event) => {
  console.log('WebSocket连接已关闭');
  // 在此处可以处理连接关闭后的逻辑
});

// 事件监听器，处理发生错误的情况
socket.addEventListener('error', (event) => {
  console.error('WebSocket连接发生错误:', event);
  // 在此处可以处理连接错误的逻辑
});

属性

binaryType：用于指定在接收二进制数据时的数据类型。它可以设置为 "blob" 或 "arraybuffer"。如果未设置，将默认为 "blob"。
bufferedAmount：表示发送缓冲区中等待发送到服务器的字节数。通过检查这个属性，你可以了解有多少数据仍在等待传输。
extensions：表示服务器选择的协议扩展。这是一个只读属性，用于查看已应用的协议扩展。
protocol：表示服务器选择的通信协议。这是一个只读属性，用于查看已应用的通信协议。
url：表示WebSocket连接的URL。这是一个只读属性。
readyState：表示WebSocket连接的当前状态，它是一个只读属性，包括：
- WebSocket.CONNECTING (0)：连接正在建立中。
- WebSocket.OPEN (1)：连接已经建立并且可以通信。
- WebSocket.CLOSING (2)：连接正在关闭。
- WebSocket.CLOSED (3)：连接已经关闭或无法建立。
- WebSocket.bufferedAmount：表示等待发送到服务器的尚未发送的数据的字节数。

方法

close([code[, reason]])：关闭WebSocket连接。

const socket = new WebSocket('ws://example.com');

socket.close(1000, '用户关闭连接');

send(data)：向服务器发送数据。

const socket = new WebSocket('ws://example.com');

socket.send('Hello, Server!');

事件

open：当WebSocket连接成功建立时触发
message：当从服务器接收到消息时触发
error：在连接过程中发生错误时触发
close：当WebSocket连接关闭时触发

示例

javascript

var socket = new WebSocket('wss://example.com/socket');

socket.addEventListener('open', function(event) {
  console.log('WebSocket连接已建立', event.target.readyState);
});

socket.addEventListener('message', function(event) {
  console.log('收到消息:', event.data);
});

socket.addEventListener('error', function(event) {
  console.error('WebSocket发生错误:', event.error);
});

socket.addEventListener('close', function(event) {
  console.log('WebSocket连接已关闭，状态码:', event.code, '原因:', event.reason);
});

AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal  
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

构造函数

new AbortController()：用于创建一个 AbortController 对象。

javascript

const controller = new AbortController();

属性

signal：返回一个 AbortSignal 实例对象，该对象可以根据需要处理 DOM 请求通信，既可以建立通信，也可以终止通信。

方法

abort([reason])：在 DOM 请求完成之前中止它。它能够中止 fetch 请求、各种响应主体或者流的消耗。

javascript

controller.abort()

FormData

FormData 是一个用于处理表单数据的 JavaScript API。它允许你通过 JavaScript 构建一个表单，并以键值对的形式组织表单中的数据，以便将其发送到服务器。FormData 对象可以与 XMLHttpRequest 一起使用，也可以用于通过 Fetch API 发送数据。

html

<form id="myForm">
  <input type="text" name="username" value="john_doe">
  <input type="file" name="avatar">
  <button type="button" onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
  var formData = new FormData(document.getElementById('myForm'));

  fetch('https://api.example.com/upload', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('发生错误', error));
}
</script>

TIP

发送方式只接收POST请求且表单提交按钮类型为button（不能是submit）。

构造函数

new FormData()：用于创建一个 FormData 对象。

let formData = new FormData();

方法

append(name, value)：向 FormData 对象中添加一个字段及其值。

formData.append('username', 'john_doe');

delete(name)：从 FormData 对象中删除指定名称的字段。

formData.delete('username');

entries()：返回一个包含所有键/值对的迭代器对象。

for (const entry of formData.entries()) {
  console.log(entry);
}

get(name)：获取指定名称的第一个值。

let usernameValue = formData.get('username');

getAll(name)：获取指定名称的所有值，返回一个数组。

let usernameValues = formData.getAll('username');

has(name)：检查是否存在指定名称的字段。

if (formData.has('username')) {
  console.log('存在 username 字段');
}

keys()：返回一个包含所有字段名称的迭代器对象。

for (const key of formData.keys()) {
  console.log(key);
}

set(name, value)：设置指定名称的第一个值，如果字段不存在，则添加一个新的键值对。

formData.set('username', 'new_value');

values()：返回一个包含所有值的迭代器对象。

for (const value of formData.values()) {
  console.log(value);
}

Storage

创建和存储
- 服务器端创建：服务器通过 HTTP 响应头将一个或多个 Set-Cookie 头添加到响应中，告诉客户端要存储的 Cookie 信息。
- 客户端存储：当用户在浏览器中访问网站时，浏览器会自动处理 Cookie 的接收和存储，以及在后续的请求中发送相应的 Cookie。
属性
- name：表示 Cookie 的名称，是用于标识特定 Cookie 的字符串。它是 Cookie 的唯一标识符，用于在客户端和服务器之间传递和识别数据。
- value：与 name 相关联的具体数据。它表示 Cookie 存储的值，可以是字符串、数字、或其他适当的数据类型。
- Secure：如果设置了 Secure 属性，Cookie 只能通过 HTTPS 连接传输。
- HttpOnly：如果设置了 HttpOnly 属性，JavaScript 将无法通过 document.cookie 访问 Cookie，从而防止 XSS 攻击。
- Domain：指定可以访问 Cookie 的域。如果未设置，默认为创建 Cookie 的页面的域。
- Path：指定可以访问 Cookie 的路径。如果未设置，默认为创建 Cookie 的页面的路径。
- Expires 和 Max-Age：用于指定 Cookie 的过期时间。Expires 是一个具体的过期日期，而 Max-Age 是 Cookie 在多少秒后过期。
限制和安全性
- 大小限制：单个 Cookie 的大小通常受到限制，一般为几 KB。
- 数量限制：浏览器对同一域名下的 Cookie 数量也有限制。
- 安全性：需要注意安全性问题，特别是在存储敏感信息时。使用 Secure 和 HttpOnly 属性，以及定期更新敏感信息的 Cookie，有助于提高安全性。
存储位置
- Session Cookie：存储在客户端内存中，仅在会话期间有效。关闭浏览器后会被删除。
- Persistent Cookie：包含过期日期，可以在浏览器关闭后保持有效，直到过期。
操作和访问
- 读取 Cookie： JavaScript 可以通过 document.cookie 访问客户端的 Cookie。
- 修改 Cookie：可以通过修改 document.cookie 的值来修改客户端的 Cookie。
- 删除 Cookie：可以通过设置 Cookie 的过期时间为过去的日期，或者通过 document.cookie 设置为空字符串来删除 Cookie。
DANGER
浏览器默认对 cookie 的名称(name)和值(value)都进行了 URL 编码，在读取或修改时需要使用 encodeURIComponent() 和 decodeURIComponent() 进行编码和解码 Cookie 的值，以确保正确处理包含特殊字符的数据。

Web Storage

Web Storage 是一种在浏览器中存储数据的机制，提供了比传统的 Cookie 更大容量的存储空间，并且可以更方便地使用。Web Storage 包括两种类型：localStorage 和 sessionStorage。

区别

生命周期：
- localStorage：数据持久存在，除非被显式移除或用户清除浏览器缓存。
- sessionStorage：数据只在当前会话期间有效，关闭浏览器标签页或窗口时将被清除。
存储大小：
- localStorage：允许存储更大量级的数据，通常限制在 5MB 或更大。
- sessionStorage：相对较小的存储空间，通常也在 5MB 左右。
共享范围：
- localStorage 和 sessionStorage 都是同源的，即同一协议、主机和端口。
- 同一页面的不同标签页之间可以共享相同的 localStorage 数据，但在 sessionStorage 中不能。
使用场景：
- localStorage 适用于需要在多个页面或标签页之间共享数据的场景，例如用户首选项、登录状态等。
- sessionStorage 适用于仅在当前会话期间需要存储的临时数据，不需要跨页面或标签页共享。
API 操作：localStorage 和 sessionStorage 使用相似的 API 进行操作，包括 setItem、getItem、removeItem 和 clear。

注意

Web Storage 中存储的数据是以字符串形式存储的。如果需要存储其他类型的数据，需要将其转换成JSON字符串再存储。

JSON.stringify( )：将其他类型的数据转换成JSON字符串（存储）
JSON.parse( )：将JSON字符串转换成JSON对象（读取）

属性

length：用于返回存储在 Storage 对象中的键值对的数量（存储的键值对的数量，而不是存储的数据大小）。

方法

clear()：清空存储中所有的键值对。

// 清空 localStorage
localStorage.clear();

// 清空 sessionStorage
sessionStorage.clear();

getItem(key)：根据键名获取存储中的值。

// 从 localStorage 中获取键为 'username' 的值
const username = localStorage.getItem('username');

// 从 sessionStorage 中获取键为 'theme' 的值
const theme = sessionStorage.getItem('theme');

key(index)：获取存储中指定位置的键名。

// 获取 localStorage 中第一个键的名字
const firstKey = localStorage.key(0);

// 获取 sessionStorage 中第二个键的名字
const secondKey = sessionStorage.key(1);

removeItem(key)：根据键名从存储中移除对应的键值对。

// 从 localStorage 中移除键为 'username' 的键值对
localStorage.removeItem('username');

// 从 sessionStorage 中移除键为 'theme' 的键值对
sessionStorage.removeItem('theme');

setItem(key, value)：存储数据，根据键名存储一个值。

// 在 localStorage 中存储键为 'username'，值为 'JohnDoe' 的数据
localStorage.setItem('username', 'JohnDoe');

// 在 sessionStorage 中存储键为 'theme'，值为 'dark' 的数据
sessionStorage.setItem('theme', 'dark');

IndexedDB

用于在客户端存储大量的结构化数据，是一个事务型数据库系统，基于 JavaScript 的面向对象数据库，使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

连接或创建数据库

let db = null;
const request = indexedDB.open("myDatabase", 1);

request.addEventListener('upgradeneeded', event => {
    const dbUpgrade = event.target.result

    // 创建对象存储空间（类似于表）
    dbUpgrade.objectStoreNames.includes("myObjectStore") && dbUpgrade.deleteObjectStore("myObjectStore")
    const objectStore = dbUpgrade.createObjectStore("myObjectStore", { keyPath: "id", autoIncrement: false });

    // 定义存储空间中的索引
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("age", "age", { unique: false });
})

request.addEventListener('success', event => {
    console.log("数据库连接成功，可以在此处理CRUD操作")
})

request.addEventListener('error', event => {
  console.error("数据库连接出错");
})

request.addEventListener('blocked', event => {
  console.log("其他连接仍然打开中，无法进行升级");
})

request.addEventListener('versionchange', event => {
  console.log("数据库版本发生变化，可以在此处理升级逻辑");
})

创建事务

db = event.target.result;

// 在指定的对象存储空间上创建一个事务对象
const transaction = db.transaction(["myObjectStore"], "readwrite");

// 获取事务上指定的对象存储空间
const objectStore = transaction.objectStore("myObjectStore");

// 在对象存储空间上执行CRUD操作
const addRequest = objectStore.add({id: i, name: "John Doe" + i, age: 25 + i });
const putRequest = objectStore.put({id: '1', name: "John Doe", age: 18 });
const getRequest = objectStore.getAll();
const delRequest = objectStore.delete(1);

// 处理CRUD成功的事件
addRequest.addEventListener('success', event => {
    console.log("Data add successfully");
});

// 处理CRUD失败的事件
addRequest.addEventListener('error', event => {
    console.log("Data add failed")
})

// 处理事务完成状态的事件
transaction.addEventListener('completed', event => {
    console.log("Transaction completed");
});

// 处理事务中止状态的事件
transaction.addEventListener('abort', event => {
    console.log("Transaction abort");
})

// 处理事务失败状态的事件
transaction.addEventListener('error', event => {
    console.log("Transaction failed");
})

游标查询

db = event.target.result;

// 在指定的对象存储空间上创建一个事务对象
const transaction = db.transaction(["myObjectStore"], "readwrite");

// 获取事务上指定的对象存储空间
const objectStore = transaction.objectStore("myObjectStore");

// 1. 游标查询：事务上指定的对象存储空间所有数据（类似于 IDBObjectStore.getAll() 方法）
const cursorRequest = objectStore.openCursor();

cursorRequest.addEventListener('success', event => {
    const cursor = event.target.result;
    if (cursor) {
        // 当前游标指向的数据
        console.log("Key:", cursor.key, "Value:", cursor.value);

        // 移动到下一个数据项
        cursor.continue();
    } else {
        // 遍历完成
        console.log("No more data");
    }
});

// 2. 游标范围查询：键在 1 到 5 之间的数据
const cursorRequest = objectStore.openCursor(IDBKeyRange.bound(1, 5));

cursorRequest.addEventListener('success', event => {
    const cursor = event.target.result;
    if (cursor) {
      // 当前游标指向的数据
      console.log("Key:", cursor.key, "Value:", cursor.value);

      // 移动到下一个数据项
      cursor.continue();
    } else {
      // 遍历完成
      console.log("No more data in the specified range");
    }
});

// 3. 游标索引查询：索引 "name" 中值为 "John Doe" 的数据
const cursorRequest = objectStore.index("name").openCursor(IDBKeyRange.only("John Doe"));

cursorRequest.addEventListener('success', event => {
    const cursor = event.target.result;
    if (cursor) {
      // 当前游标指向的数据
      console.log("Key:", cursor.primaryKey, "Value:", cursor.value);

      // 移动到下一个数据项
      cursor.continue();
    } else {
      // 遍历完成
      console.log("No more data for the specified index value");
    }
});

// 4. 游标分页查询：每页显示 10 条数据
let page = 1, pageSize = 10, counter = 0, isAdvance = true;
const cursorRequest = objectStore.openCursor();

cursorRequest.addEventListener('success', event => {
    const cursor = event.target.result;
    if(page > 1 && isAdvance) {
      // 处理第2页后游标指向的数据
      isAdvance = false;
      cursor.advance((page - 1) * pageSize)
      return
    }

    if (cursor) {
        // 处理当前游标指向的数据
        console.log("Key:", cursor.key, "Value:", cursor.value);

        if(++counter < pageSize){
          // 处理每页未满10条数据，并移动到下一个数据项
          cursor.continue() 
        }else{
          // 处理每页已满10条数据
          transaction.abort()
          isAdvance = true;
          coutner = 0;
          page++;
        }
    } else {
        // 遍历完成
        console.log("No more data");
    }
});

// 处理事务完成状态的事件
transaction.addEventListener('completed', event => {
    console.log("Transaction completed");
});

属性

IDBDatabase.name：只读属性，用于获取数据库的名称。
IDBDatabase.objectStoreNames：只读属性，返回一个包含数据库中所有对象存储空间（Object Store）名称的 DOMStringList 对象。通过这个属性，您可以获取数据库中存在的所有对象存储空间的名称列表。
IDBDatabase.version：只读属性，用于获取数据库的版本号。
IDBTransaction.db：只读属性，用于获取与事务相关联的数据库 (IDBDatabase) 对象。
IDBTransaction.durability：只读属性，用于获取事务的持久性级别。持久性级别指定了事务对于并发事务提交的容忍程度。
IDBTransaction.error：只读属性，用于获取事务中发生的错误 (DOMException)。如果事务中没有错误，该属性的值为 null。
IDBTransaction.mode：只读属性，用于获取事务的模式（mode），即读取或读写。
IDBTransaction.objectStoreNames：只读属性，返回一个包含在事务中涉及的对象存储空间名称的 DOMStringList 对象。
IDBRequest.error：只读属性，返回一个 DOMException 对象，表示操作失败时的错误信息。如果操作成功完成，该属性为 null。
IDBRequest.readyState：只读属性，返回一个字符串，表示操作的当前状态。
IDBRequest.result：只读属性，返回一个表示成功完成的操作的结果。如果操作失败，该属性为 null。
IDBRequest.source：只读属性，返回与事件相关的索引或对象，例如 IDBIndex，IDBCursor 或 IDBObjectStore。
IDBRequest.transaction：只读属性，返回与当前请求相关联的事务对象 (IDBTransaction)。
IDBObjectStore.keyPath：只读属性，返回一个表示对象存储空间键路径的字符串或数组。如果对象存储空间没有指定键路径，则返回 null。
IDBObjectStore.autoIncrement：只读属性，返回一个布尔值，表示对象存储空间是否使用自增键。
IDBObjectStore.indexNames：只读属性，返回一个 DOMStringList 对象，包含对象存储空间中所有索引的名称。
IDBObjectStore.keyPath：只读属性，返回一个表示对象存储空间键路径的字符串或数组。如果对象存储空间没有指定键路径，则返回 null。
IDBObjectStore.name：只读属性，返回一个字符串，表示对象存储空间的名称。
IDBObjectStore.transaction：只读属性，返回与对象存储空间相关联的事务对象 (IDBTransaction)。
IDBKeyRange.lower：可读写属性，表示键范围的下限值。
IDBKeyRange.lowerOpen：可读写属性，表示下限是否是开放的。如果为 true，则表示下限不包括在范围内。
IDBKeyRange.upper：可读写属性，表示键范围的上限值。
IDBKeyRange.upperOpen：可读写属性，表示上限是否是开放的。如果为 true，则表示上限不包括在范围内。

方法

IDBFactory.open()：用于打开现有数据库或创建新的数据库。通过调用此方法，您可以指定数据库的名称和版本，并获得对数据库的引用。

let openRequest = indexedDB.open("myDatabase", 1);

IDBFactory.databases()：用于获取当前浏览器中所有数据库的信息。调用这个方法将返回一个包含数据库信息的 Promise 对象。

let databasesPromise = indexedDB.databases();

databasesPromise.then(function(databases) {
    console.log("当前数据库列表：", databases);
}).catch(function(error) {
    console.error("获取数据库信息时出错：", error);
});

IDBFactory.deleteDatabase()：用于删除指定名称的数据库。调用此方法将删除整个数据库，包括其中的所有对象存储和数据。

let deleteRequest = indexedDB.deleteDatabase("myDatabase");

IDBDatabase.close()：用于关闭数据库连接。当您完成对数据库的所有操作后，应该调用这个方法来释放数据库连接。

var request = indexedDB.open("myDatabase", 1);

request.onsuccess = function(event) {
    var db = event.target.result;

    // 执行数据库操作...

    // 关闭数据库连接
    db.close();
};

IDBDatabase.createObjectStore(name[, options])：用于在数据库中创建一个新的对象存储空间（Object Store）。

var request = indexedDB.open("myDatabase", 2);

request.onupgradeneeded = function(event) {
    var db = event.target.result;

    // 创建一个名为 "newObjectStore" 的对象存储空间
    var objectStore = db.createObjectStore("newObjectStore", { keyPath: "id" , autoIncrement: false});
};

IDBDatabase.deleteObjectStore(name)：用于删除数据库中的指定对象存储空间。

var request = indexedDB.open("myDatabase", 3);

request.onupgradeneeded = function(event) {
    var db = event.target.result;

    // 删除名为 "oldObjectStore" 的对象存储空间
    if (db.objectStoreNames.contains("oldObjectStore")) {
        db.deleteObjectStore("oldObjectStore");
    }
};

IDBDatabase.transaction(storeNames[, mode[, options]])：用于创建并返回一个事务对象，允许您在数据库上执行操作。

var request = indexedDB.open("myDatabase", 4);

request.onsuccess = function(event) {
    var db = event.target.result;

    // 创建一个只读事务
    var transaction = db.transaction("myObjectStore", "readonly");

    // 获取对象存储空间
    var objectStore = transaction.objectStore("myObjectStore");

    // 执行读操作...
};

IDBTransaction.objectStore(name)：用于获取事务中指定名称的对象存储空间 (IDBObjectStore)。通过获取对象存储空间，您可以执行对该对象存储空间的读写操作。

var transaction = db.transaction("myObjectStore", "readwrite");

var objectStore = transaction.objectStore("myObjectStore");

IDBTransaction.abort()：用于中止事务。当调用这个方法时，事务会被立即中止，任何未完成的数据库操作都将被回滚。通常用于在事务执行过程中发现错误或条件不满足时，手动中止事务。

var transaction = db.transaction("myObjectStore", "readwrite");

transaction.abort();

IDBTransaction.commit()：用于提交事务。IndexedDB 的事务通常是自动提交的，当事务的所有数据库操作都成功完成时，事务会自动提交。但在某些情况下，您可能希望手动提交事务，例如在异步操作完成后，确认事务的成功状态。

var transaction = db.transaction("myObjectStore", "readwrite");

transaction.commit();

IDBObjectStore.add(value, key)：向对象存储空间中添加新记录，如果已存在相同键，则操作将失败。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.add({ id: 1, name: "John Doe" });

IDBObjectStore.clear()：清空对象存储空间中的所有记录。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.clear();

IDBObjectStore.count(key)：返回对象存储空间中满足给定键范围的记录数量。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var recordCount = objectStore.count();

IDBObjectStore.createIndex(name, keyPath, options)：创建并返回一个新的索引对象。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.createIndex("nameIndex", "name", { unique: false, multiEntry: false });

IDBObjectStore.delete(key)：根据指定的键删除对象存储空间中的记录。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.delete(1);

IDBObjectStore.deleteIndex(indexName)：删除对象存储空间中指定的索引。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.deleteIndex("nameIndex");

IDBObjectStore.get(key)：根据给定的键获取对象存储空间中的记录。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var record = objectStore.get(1);

IDBObjectStore.getAll(query, count)：返回对象存储空间中满足给定查询的所有记录。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var allRecords = objectStore.getAll();

IDBObjectStore.getAllKeys(query, count)：返回对象存储空间中满足给定查询的所有键。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var allKeys = objectStore.getAllKeys();

IDBObjectStore.getKey(query)：根据给定的查询获取对象存储空间中的记录的键。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var recordKey = objectStore.getKey("John Doe");

IDBObjectStore.index(name)：返回对象存储空间中指定名称的索引。
- keyPath：只读属性，返回一个表示索引的键路径的字符串或数组。它定义了索引如何从对象存储空间的记录中提取值以创建索引。
- multiEntry：只读属性，返回一个布尔值，表示索引是否为多条目索引。多条目索引允许一个键对应多个记录。
- name：只读属性，返回一个字符串，表示索引的名称。
- objectStore：只读属性，返回一个指向包含索引的对象存储空间的引用。
- unique：只读属性，返回一个布尔值，表示索引是否是唯一的。唯一索引要求索引的键值在整个对象存储空间中是唯一的。
- count([key])：返回索引中具有给定键值或键范围的记录数量。
- get([key])：返回索引中具有给定键值的第一个记录的值。
- getAll([query[, count]])：返回索引中具有给定查询或键范围的所有记录的值。
- getAllKeys([query[, count]])：返回索引中具有给定查询或键范围的所有记录的键。
- getKey([query])：返回索引中具有给定查询或键范围的第一个记录的键。
- openCursor([range[, direction]])：返回表示索引中记录集的游标对象。
- openKeyCursor([range[, direction]])：返回表示索引中键集的游标对象。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var index = objectStore.index("nameIndex");

IDBObjectStore.openCursor(range, direction)：返回表示对象存储空间中记录集的游标对象。
- direction：只读属性，返回一个字符串，表示游标的遍历方向。可能的值为 "next"、"nextunique"、"prev"、"prevunique"。
- key：只读属性，返回当前游标位置的记录的键值。如果游标没有定位到记录，则返回 undefined。
- primaryKey：只读属性，返回当前游标位置的记录的主键值。如果游标没有定位到记录，则返回 undefined。
- request：只读属性，返回创建游标的请求对象 (IDBRequest)。
- source：只读属性，返回创建游标的源对象，可能是对象存储空间或索引。
- value：只读属性，返回游标当前位置的记录的值。
- advance(count)：将游标向前移动指定的记录数，使游标定位到新的位置。
- continue([key])：将游标向前移动到具有大于给定键值的下一个记录。
- continuePrimaryKey(key, primaryKey)：将游标移动到具有大于给定键值和主键值的下一个记录。通常用于具有复合键的对象存储空间的游标遍历。
- delete()：从对象存储空间中删除游标当前所在位置的记录。
- update(value)：更新游标当前位置的记录的值。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var cursor = objectStore.openCursor();

IDBObjectStore.openKeyCursor(range, direction)：返回表示对象存储空间中键集的游标对象。

var transaction = db.transaction("myObjectStore", "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var keyCursor = objectStore.openKeyCursor();

IDBObjectStore.put(value, key)：向对象存储空间中添加新记录，如果已存在相同键，则覆盖该记录。

var transaction = db.transaction("myObjectStore", "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

objectStore.put({ id: 1, name: "Jane Doe" });

IDBKeyRange.includes(key)：返回一个布尔值，指示指定的键是否在键范围内。

const keyRangeValue = IDBKeyRange.bound("A", "K", false, false);

keyRangeValue.includes("F");

静态方法

IDBKeyRange.bound(lower, upper, lowerOpen?, upperOpen?)：创建一个包含上下限的键范围。

let range = IDBKeyRange.bound(3, 7, false, true);

IDBKeyRange.lowerBound(lower, open?)：创建一个包含下限的键范围。

let range = IDBKeyRange.lowerBound(3, true);

IDBKeyRange.upperBound(upper, open?)：创建一个包含上限的键范围。

let range = IDBKeyRange.upperBound(7, true);

IDBKeyRange.only(value)：创建一个只包含指定值的键范围。

let range = IDBKeyRange.only(5);

事件

IDBRequest.upgradeneeded：当调用 indexedDB.open() 方法，如果数据库的版本号比之前版本号不匹配，或者数据库不存在时触发。通常是用于进行数据库结构的升级或初始化。
IDBRequest.blocked：当数据库的连接仍然保持打开状态时，如果尝试再打开该数据库的新连接，并且在此同时之前连接的数据库正在执行 upgradeneeded 或 versionchange 事务时触发。
IDBRequest.versionchange：当调用 indexedDB.open() 方法，数据库版本发生变化时触发。通常情况下，upgradeneeded 事件先于 versionchange 事件执行。
IDBRequest.success：当 IndexedDB 操作成功完成时触发。
IDBRequest.error：当 IndexedDB 操作遇到错误时触发。
IDBTransaction.abort：当事务被中止时（通过调用 abort() 方法）触发。
IDBTransaction.complete：当事务成功完成（所有数据库操作成功执行）时触发。
IDBTransaction.error：当事务中发生错误时触发。

Web Workers

在JavaScript中，Web Workers（工作者线程）是一种并行计算的机制，它允许在主线程之外运行脚本，以提高多核处理器上的性能和改善用户体验。工作者线程使得可以在后台执行一些耗时的任务，而不会阻塞主线程，从而保持页面的响应性。

DANGER

在 worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性。但是你可以使用大量 window 对象之下的东西，包括 WebSockets，以及 IndexedDB 等数据存储机制。
workers 和主线程间的数据传递通过这样的消息机制进行——双方都使用 postMessage() 方法发送各自的消息，使用 onmessage 事件处理函数来响应消息（消息被包含在 message 事件的 data 属性中）。

专用 Workers

与创建它们的脚本一一对应，只能被创建它们的脚本使用。

// main.js
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');

const result = document.querySelector('.result');

if (window.Worker) {
  const myWorker = new Worker("worker.js");

  [first, second].forEach(input => {
    input.onchange = function() {
      myWorker.postMessage([first.value, second.value]);
    }
  })

  myWorker.onmessage = function(e) {
    result.textContent = e.data;
  }
} else {
  console.log('Your browser doesn\'t support web workers.');
}

// worker.js
onmessage = function(e) {
  const result = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    const workerResult = 'Result: ' + result;
    postMessage(workerResult);
  }
}

构造函数

new Worker(aURL, options?)：用于创建一个新的工作者线程（Worker）的 JavaScript 构造函数。

const worker = new Worker('worker.js');

方法

Worker.postMessage(data, transferList?)：用于在主线程与工作者线程之间传递消息。

const worker = new Worker('worker.js');

// 向工作者线程发送消息
worker.postMessage({ message: 'Hello from main thread!' });

Worker.terminate()：用于终止工作者线程的执行。一旦调用了这个方法，工作者线程将会立即停止执行，并且无法重新启动。

const worker = new Worker('worker.js');

// 终止工作者线程
worker.terminate();

事件

message：用于接收从主线程发送过来的消息。通过在工作者线程中监听 onmessage 事件，可以处理从主线程发送的数据。
error：在主线程或工作者线程中发生未捕获的异常时触发。
messageerror：用于处理在工作者线程中接收消息时发生的错误。它会在无法序列化消息时触发。

共享 Workers

可以被多个脚本共享，允许不同页面之间的通信。

// multiply.js
const first = document.querySelector("#number1");
const second = document.querySelector("#number2");

const result1 = document.querySelector(".result1");

if (!!window.SharedWorker) {
  const myWorker = new SharedWorker("worker.js");

  [first, second].forEach(input => {
    input.onchange = function() {
      myWorker.port.postMessage([first.value, second.value]);
    }
  })

  myWorker.port.onmessage = function (e) {
    result1.textContent = e.data;
  };
}

// square.js
const squareNumber = document.querySelector("#number3");

const result2 = document.querySelector(".result2");

if (!!window.SharedWorker) {
  const myWorker = new SharedWorker("worker.js");

  squareNumber.onchange = function () {
    myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
  };

  myWorker.port.onmessage = function (event) {
    result2.textContent = event.data;
  };
}

// shared-worker.js
onconnect = function (event) {
  const port = event.ports[0];

  port.onmessage = function (e) {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  };
};

构造函数

new SharedWorker(aURL, options?)：用于创建共享工作者线程（Shared Worker）的构造函数。

const sharedWorker = new SharedWorker('shared-worker.js');

属性

port：用于与主线程或其他窗口建立连接的通信通道。当在共享工作者线程中监听 connect 事件时，event 对象的 ports 属性包含与主线程或其他窗口建立的连接的 MessagePort 对象。
- MessagePort.close()：用于关闭一个 MessagePort，这意味着它不再接受或发送消息。
- MessagePort.postMessage(data, transferList?)：用于向与 MessagePort 相关联的另一个线程发送消息。
- MessagePort.start()：用于开始在两个 MessagePort 之间的消息传递。

事件

message：用于接收从主线程发送过来的消息。通过在工作者线程中监听 onmessage 事件，可以处理从主线程发送的数据。
error：在主线程或工作者线程中发生未捕获的异常时触发。
messageerror：用于处理在工作者线程中接收消息时发生的错误。它会在无法序列化消息时触发。

Web Components

Web Components 是一组由浏览器原生支持的技术，用于创建可重用的定制元素（custom elements）和封装功能的组件。它由以下四个主要技术规范组成：

Custom Elements: 允许开发者创建自定义 HTML 元素和定义其行为。
Shadow DOM: 允许封装元素内部的样式和结构，以防止它们与外部文档的样式和结构发生冲突。
HTML Templates: 提供了在页面中定义片段的机制，而不渲染它们。

const template = document.createElement('template');
template.innerHTML = '<p>Hello, <span id="name"></span>!</p>';

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
    shadow.getElementById('name').innerText = 'World';
  }
}

customElements.define('my-component', MyComponent);

Custom Elements

类型
- 自定义内置元素：继承自标准的 HTML 元素，例如 HTMLImageElement 或 HTMLParagraphElement。
- 独立自定义元素：继承自 HTML 元素基类 HTMLElement。
实现
- Class 类：可以扩展 HTMLElement（在独立元素的情况下）或者你想要定制的接口（在自定义内置元素的情况下）。
js
```
class WordCount extends HTMLElement {
  constructor() {
    super();
  }
  // 此处编写元素功能
}
```
注册
js
```
// 类型：独立自定义元素
customElements.define("popup-info", PopupInfo);

// 类型：自定义内置元素
customElements.define("word-count", WordCount, { extends: "p" });
```
Window.customElements.define(name, constructor, options?)
- name：元素的名称。必须以小写字母开头，包含一个连字符，并符合规范中有效名称的定义中列出的一些其他规则。
- constructor：自定义元素的构造函数。
- options：仅对于自定义内置元素，这是一个包含单个属性 extends 的对象，该属性是一个字符串，命名了要扩展的内置元素。

使用

html

<script src="main.js"></script>

<!-- 类型：独立自定义元素 -->
<p is="word-count"></p>

<!-- 类型：自定义内置元素 -->
<popup-info></popup-info>

监听 HTML 标签属性
- observedAttributes：静态属性，必须是一个包含元素需要变更通知的所有属性名称的数组。

生命周期回调

class MyCustomElement extends HTMLElement {
  static observedAttributes = ["color", "size"];

  constructor() {
    super();
  }

  connectedCallback() {
    console.log("自定义元素添加至页面。");
  }

  disconnectedCallback() {
    console.log("自定义元素从页面中移除。");
  }

  adoptedCallback() {
    console.log("自定义元素移动至新页面。");
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}。`);
  }
}

customElements.define("my-custom-element", MyCustomElement);

connectedCallback()：每当元素添加到文档中时调用。规范建议开发人员尽可能在此回调中实现自定义元素的设定，而不是在构造函数中实现。
disconnectedCallback()：每当元素从文档中移除时调用。
adoptedCallback()：每当元素被移动到新文档中时调用。
attributeChangedCallback()：在属性更改、添加、移除或替换时调用。

Shadow DOM

创建 shadow root

const shadow = this.attachShadow({ mode: "open" });

创建 shadow DOM 结构或样式

let wrapper = document.createElement("span");
wrapper.setAttribute("class", "wrapper");

let style = document.createElement("style");

style.textContent = `
.wrapper {
  position: relative;
}`

将 Shadow DOM 添加到 Shadow root 上

shadow.appendChild(style);
shadow.appendChild(wrapper);

DANGER

内置元素（不使用 Shadow DOM）：组件直接继承外部样式和结构的场景，或者不需要样式和结构隔离。
独立元素（使用 Shadow DOM）：创建独立、可重用的组件，防止组件内部样式和结构与外部文档发生冲突。

HTML Templates & Slot

// 定义自定义元素
class MyComponent extends HTMLElement {
  constructor() {
    super();

    // 创建 Shadow DOM
    const shadowRoot = this.attachShadow({ mode: 'open' });

    // 创建模板元素
    const template = document.createElement('template');

    // 设置模板内容
    template.innerHTML = `
      <style>
        .container {
          border: 1px solid #ccc;
          padding: 10px;
          margin: 10px;
        }
      </style>
      <div class="container">
        <h2>My Custom Component</h2>
        <slot name="content"></slot>
        <p>Default Content if no slot content provided.</p>
      </div>
    `;

    // 将模板内容克隆到 Shadow DOM 中
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

// 注册自定义元素
customElements.define('my-component', MyComponent);

html

<script src="./my-component.js"></script>

<my-component>
  <div slot="content">
    <p>This content goes into the slot named "content" on the other page.</p>
    <p>Additional content here.</p>
  </div>
</my-component>

ReadableStream

构造函数

new ReadableStream(underlyingSource?, queuingStrategy?)：用于创建一个 ReadableStream 对象。
js
```
const readableStream = new ReadableStream()
```

属性

locked：布尔值。true 时，表示已经存在一个读取器，并且当前无法获取新的读取器；false 时，表示可以通过 getReader() 方法获取一个新的读取器。

方法

cancel(reason)：用于取消可读流，表示不再需要从数据源读取更多数据。

const readableStream = new ReadableStream({
  cancel(reason) {
    // 处理取消操作
    console.log(`Stream canceled: ${reason}`);
  }
});

readableStream.cancel("User canceled").then(() => {
  console.log("Stream canceled successfully.");
});

getReader(): 用于获取一个读取器对象，该对象用于从可读流中读取数据块。

const reader = readableStream.getReader();

reader.read().then(({ value, done }) => {
  if (!done) {
    // 处理数据块
    console.log(value);
  } else {
    // 数据已读取完毕
    console.log("Stream finished reading.");
  }
});

pipeThrough(transformStream, options?): 用于将可读流通过转换流传输到可写流。

const writableStream = /* 可写流 */;
const transformStream = /* 转换流 */;

const { readable } = readableStream.pipeThrough({
  writable: transformStream.writable,
  readable: transformStream.readable
});

pipeTo(destination, options?)：用于将可读流的内容传输到另一个可写流。

const writableStream = /* 可写流 */;

readableStream.pipeTo(writableStream).then(() => {
  console.log("Stream successfully piped to the destination.");
});

tee()：用于创建可读流的副本，使得数据可以同时被两个可读流读取。返回值是一个包含两个可读流的数组。
js
```
const [readable1, readable2] = readableStream.tee();
```

WritableStream

构造函数

new WritableStream(underlyingSink?, queuingStrategy?)：用于创建一个 WriteableStream 对象。

const writeableStream = new WritableStream()

属性

locked：布尔值。true 时，表示已经存在一个写入器，并且当前无法获取新的写入器；false 时，表示可以通过 getWriter() 方法获取一个新的写入器。

方法

abort(reason)：用于中止可写流，表示不再需要向数据目的地写入更多数据。

const writableStream = new WritableStream({
  async abort(reason) {
    // 处理中止操作
    console.log(`Stream aborted: ${reason}`);
  }
});

writableStream.abort("Aborted by user").then(() => {
  console.log("Stream aborted successfully.");
});

close()：用于关闭可写流，表示不再向数据目的地写入更多数据。返回一个 Promise 对象，该 Promise 在关闭操作完成后解析。

const writableStream = new WritableStream({
  async close() {
    // 处理关闭操作
    console.log("Stream closed.");
  }
});

writableStream.close().then(() => {
  console.log("Stream closed successfully.");
});

getWriter()：用于获取一个写入器对象，该对象用于向可写流写入数据块。

const writer = writableStream.getWriter();

writer.write(someData).then(() => {
  console.log("Data written successfully.");
});

TransformStream

构造函数

new TransformStream(transformer, writableStrategy, readableStrategy)：用于创建一个 TransformStream（可读写）对象。
js
```
const transformStream = new TransformSteam()
```

属性

readable：代表了 TransformStream 的可读部分。
writable：代表了 TransformStream 的可写部分。

Notifications

构造函数

new Notification(title, options)：用于创建一个 Notifications 对象。

const notification = new Notification("通知标题")

静态属性

permission：用于获取当前通知权限的状态。这个属性是一个只读属性，表示用户对通知的授权状态。
- 'default': 用户尚未做出决定，此时可以通过调用 Notification.requestPermission() 来请求权限。
- 'granted': 用户已经授予通知权限，允许发送通知。
- 'denied': 用户已经拒绝通知权限，不允许发送通知。

属性

badge: 通知小图标，通常显示在通知图标的角落。可以是一个 URL，指向用于表示通知的小图标。
body: 通知的正文内容，显示在标题下方。这是通知的主要文本信息。
data: 用于关联任何数据对象，可以在通知的事件处理程序中访问。可以包含与通知相关的额外信息。
dir: 文本方向，用于设置通知文本的方向。可能的值为 'auto'、'ltr'（从左到右）和 'rtl'（从右到左）。
icon: 通知的图标 URL，显示在通知窗口左侧。可以是一个指向图标资源的 URL。
lang: 通知中使用的语言，用于指定通知文本的语言。可以是标准的 BCP 47 语言标签。
requireInteraction: 一个布尔值，表示通知是否需要用户交互。如果设置为 true，通知将保持打开直到用户关闭它。
silent: 一个布尔值，表示通知是否以静默模式显示，即不发出声音或震动。
tag: 通知的标签，用于标识和替换现有通知。如果多个通知具有相同的标签，它们将被视为同一组，新通知将替代旧通知。
title: 通知的标题。这是通知的主要文本，显示在用户的通知窗口中。

静态方法

Notification.requestPermission()：用于请求用户授予通知权限。返回一个 Promise，它在用户做出选择后解决为一个字符串，表示用户的权限状态。可能的值有：

'granted': 用户已经授予通知权限，允许发送通知。
'denied': 用户已经拒绝通知权限，不允许发送通知。
'default': 用户尚未做出决定，需要进一步的交互。

Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        console.log('用户已授予通知权限');
        // 在这里可以开始使用 Notification API 发送通知
    } else if (permission === 'denied') {
        console.log('用户已拒绝通知权限');
        // 可以提醒用户在设置中启用通知权限
    } else {
        console.log('用户尚未做出决定');
        // 进一步的用户交互可能是必要的
    }
});

方法

close()：用于手动关闭当前已经创建的通知。

let notification = new Notification('通知标题', { body: '通知正文内容' });

// 在一段时间后或在用户点击通知后关闭通知
setTimeout(function() {
    notification.close();
}, 5000); // 5秒后关闭通知

事件

click：当用户点击通知时触发。
close：当通知关闭时触发，可以是用户手动关闭，也可以是调用 close() 方法关闭。
error：当通知发生错误时触发，例如由于权限问题或其他原因无法显示通知。
show：当通知显示时触发，即通知已经成功显示在用户屏幕上。

SVG

SVG，全称为可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维矢量图形的 XML（可扩展标记语言）文件格式。它是一种开放标准，用于在 Web 上创建图形和图像，以及在各种应用程序中以矢量形式呈现图形。

矢量图形： SVG 使用数学公式来描述图形，而不是像位图图像（如 JPEG 或 PNG）那样使用像素格。这意味着 SVG 图形可以被放大或缩小而不会失去质量，因为它们是基于数学公式的，而不是像素。
可缩放性：由于 SVG 是矢量图形，它们可以在不失真的情况下以任何大小进行缩放，这使其特别适合用于不同分辨率的设备和屏幕上，包括高分辨率屏幕。
文本支持： SVG 支持在图形中嵌入文本，这意味着您可以创建包含文本和图形的复杂图像，而无需将它们分开。
互操作性： SVG 是一个开放标准，受到许多不同应用程序和平台的支持。它可以在 Web 浏览器中直接呈现，也可以在图像编辑软件中编辑和创建。
动画支持： SVG 还支持动画，您可以使用 CSS 或 SMIL（Synchronized Multimedia Integration Language）来创建交互式和动态的图形效果。
小文件尺寸： SVG 文件通常相对较小，因为它们是基于文本的，而不是像素，这使它们适用于 Web 上的图形。
可编辑性： SVG 文件可以使用文本编辑器进行编辑，这使得修改和维护图形变得相对容易。

与 Canvas 区别

图形类型：
- SVG： SVG 是基于矢量的，它使用数学公式来描述图形，因此它主要适用于静态矢量图形，例如图标、图表和矢量图像。SVG 图形是分层的，元素可以直接访问和操纵。
- Canvas： HTML5 Canvas 是一个绘图区域，它允许您使用 JavaScript 绘制位图图形。Canvas 是像素基的，您需要在 Canvas 上绘制所有内容，包括线条、形状和文本。Canvas 通常用于动态图形、游戏和需要复杂绘图的应用程序。
缩放性：
- SVG： SVG 图形可以轻松缩放，而不会失去质量，因为它们是基于数学公式的。这使得 SVG 非常适合用于各种不同分辨率的设备。
- Canvas： Canvas 上的内容是像素化的，因此在放大时可能会失真，除非您手动重新绘制图形。
互交性：
- SVG： SVG 支持事件处理和互动性，您可以将事件处理程序附加到 SVG 元素，使其具有交互性。
- Canvas： Canvas 通常需要更多的 JavaScript 编程来实现交互性，因为它本身不支持事件处理。
绘图方法：
- SVG：在 SVG 中，图形是由一系列的矢量图形元素（如线、圆、矩形、路径等）组成，您可以直接操作这些元素。
- Canvas：在 Canvas 上，您需要使用绘图上下文的 API 来绘制图形，这通常涉及绘制路径、填充颜色和设置样式。
可编辑性：
- SVG： SVG 图形可以直接编辑，因为它们是基于文本的 XML 格式。您可以使用文本编辑器或 SVG 编辑器来修改它们。
- Canvas： Canvas 上的图形通常不可编辑，因为它们是位图，您无法直接编辑像素。

容器元素

svg 元素

这是 SVG 图形的根元素，您可以在其中定义和放置 SVG 图形元素。

html

<svg width="100" height="100">
  <!-- 在这里放置SVG图形元素 -->
</svg>

常见属性：

width 和 height：用于指定 SVG 图形的宽度和高度，以像素为单位。
viewBox：定义 SVG 坐标系统中可见区域的位置和大小。它是一个包含四个值的字符串，分别表示 x、y、宽度和高度。
xmlns：命名空间属性，用于指定 SVG 命名空间，通常为 "http://www.w3.org/2000/svg" 。
preserveAspectRatio：定义了如何处理 SVG 图形在不同宽高比的容器中的显示。它通常与 viewBox 一起使用。
xmlns:xlink：命名空间属性，用于在 SVG 中使用超链接（例如，在 <a> 元素中），通常为 "http://www.w3.org/1999/xlink" 。
xmlns:xml：命名空间属性，用于指定 XML 命名空间，通常为 "http://www.w3.org/XML/1998/namespace" 。
id：用于给 SVG 元素指定一个唯一的标识符。
class：用于为 SVG 元素指定一个或多个 CSS 类。

关于 xmlns 注意事项

xmlns 属性只在 SVG 文档的最外层 <svg> 元素上是必需的，或者在采用 XML 序列化的 HTML 文档中使用 SVG 时才需要。
- SVG 文档的最外层 <svg> 元素：在独立的 SVG 文档中，通常会包含一个 <svg> 元素，它是 SVG 图形的根元素。在这种情况下，您需要为最外层的 <svg> 元素指定 xmlns 属性，以指定 SVG 的命名空间。这有助于解析器正确识别文档类型和元素。
html
```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  
</svg>
```
- 在 HTML 文档中使用 SVG：如果您将 SVG 嵌入到 HTML 文档中，并且该 HTML 文档采用 XML 序列化（例如，使用 XHTML），则在 <svg> 元素中也需要指定 xmlns 属性。这是因为 XML 文档要求明确指定命名空间。
html
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
      
    </svg>
  </body>
</html>
```
对于内部的 SVG 元素或在采用 HTML 序列化的 HTML 文档中使用的情况，不需要指定 xmlns 属性。
- 内部的 SVG 元素：如果在一个 SVG 文档中包含了多个嵌套的 <svg> 元素，那么对于这些内部的 <svg> 元素，通常不需要指定 xmlns 属性，因为外部的根级 <svg> 元素已经定义了命名空间。内部的 <svg> 元素将继承外部根级 <svg> 元素的命名空间。
html
```
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <svg x="50" y="50" width="100" height="100">
    
    <circle cx="50" cy="50" r="30" fill="blue" />
  </svg>
</svg>
```
- HTML 文档中的 HTML 序列化：如果您在 HTML 文档中嵌入 SVG 并使用 HTML 序列化（例如，不使用 XHTML），则通常不需要在 <svg> 元素内部指定 xmlns 属性。这是因为 HTML 文档采用不同的命名空间机制，不需要像 XML 文档那样显式指定命名空间。
html
```
<!DOCTYPE html>
<html>
  <body>
    
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="30" fill="blue" />
    </svg>
  </body>
</html>
```

g 元素

用于创建分组，可以将多个 SVG 元素放入一个分组中，以便一起处理。

html

<g>
  <circle cx="30" cy="30" r="20" fill="blue" />
  <rect x="40" y="10" width="40" height="40" fill="green" />
</g>

常见属性：

id：用于给 <g> 元素分配一个唯一的标识符，以便在 JavaScript 或 CSS 中引用它。
class：用于为 <g> 元素指定一个或多个 CSS 类，以便对其应用样式。
transform：用于应用变换（平移、旋转、缩放等）到包含在 <g> 元素中的所有子元素。变换可以是一个包含多个变换操作的字符串，例如平移、旋转和缩放。
opacity：用于设置 <g> 元素及其子元素的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
style：通过内联样式为 <g> 元素设置 CSS 样式，包括颜色、填充、边框等。这是一个字符串值，类似于 HTML 中的 style 属性。

a 元素

用于创建超链接，通常与 <text> 元素结合使用。

html

<a xlink:href="https://www.example.com">
  <text x="20" y="40">Click me</text>
</a>

常见属性：

xlink:href：这是 SVG 中 <a> 元素最重要的属性，用于指定链接的目标。您可以将链接目标指定为其他 SVG 文件、外部网址、资源文件等。
target：用于指定链接的打开方式。常见的值包括 _blank（在新标签页中打开链接）和 _self（在当前标签页中打开链接）等。

defs 元素

用于定义可重用的图形元素、滤镜、渐变、模式或其他图形属性，这些定义可以在 SVG 文档中的其他地方引用和重复使用。<defs> 元素通常与其他 SVG 元素一起使用，以提高 SVG 文档的可维护性和性能。

定义可重用元素：最常见的用法是在 <defs> 元素内部定义可重用的图形元素，例如 <path>、<circle>、<rect> 等，以便在文档中多次引用。

html

<svg>
  <defs>
    <circle id="myCircle" cx="30" cy="30" r="20" />
  </defs>
  <use xlink:href="#myCircle" fill="blue" />
  <use xlink:href="#myCircle" fill="red" x="60" />
</svg>

定义滤镜、渐变和模式： <defs> 元素也用于定义可重用的滤镜、渐变和图案，以便在多个元素上应用。

html

<svg>
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="100" height="50" fill="url(#myGradient)" />
</svg>

形状元素

rect 元素

用于创建矩形，可以在 SVG 中定义矩形的位置、大小和样式。

html

<rect x="10" y="10" width="80" height="50" fill="blue" />

常见属性：

x 和 y：用于指定矩形左上角的 x 和 y 坐标。它们定义了矩形相对于 SVG 坐标系统的位置。
width 和 height：用于定义矩形的宽度和高度。这些值通常是以像素为单位的。
rx 和 ry：可选属性，用于定义矩形的圆角半径。如果未指定，矩形将是直角的。如果指定了 rx，但没有指定 ry，则 ry 默认等于 rx，从而创建圆角矩形。
fill：用于指定矩形的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义矩形边框的颜色和宽度。
opacity：用于设置矩形的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到矩形。变换可以是一个包含多个变换操作的字符串。

circle 元素

用于创建圆，可以在 SVG 中定义圆的半径、位置和样式。

html

<circle cx="50" cy="50" r="30" fill="red" />

常见属性：

cx 和 cy：用于指定圆心的 x 和 y 坐标。它们定义了圆的中心点相对于 SVG 坐标系统的位置。
r：用于定义圆的半径，即从圆心到边缘的距离。
fill：用于指定圆的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义圆的边框的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置圆的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到圆。变换可以是一个包含多个变换操作的字符串。

ellipse 元素

用于创建椭圆，可以在 SVG 中定义椭圆的半径、位置和样式。

html

<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />

常见属性：

cx 和 cy：用于指定椭圆中心点的 x 和 y 坐标。它们定义了椭圆相对于 SVG 坐标系统的位置。
rx 和 ry：用于定义椭圆的水平和垂直半轴的半径。rx 表示水平半轴的长度，而 ry 表示垂直半轴的长度。
fill：用于指定椭圆的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义椭圆的边框的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置椭圆的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到椭圆。变换可以是一个包含多个变换操作的字符串。

line 元素

用于创建直线，可以在 SVG 中定义线的起点和终点、颜色和样式。

html

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

常见属性：

x1 和 y1：用于指定直线的起点坐标的 x 和 y 值。
x2 和 y2：用于指定直线的终点坐标的 x 和 y 值。
stroke 和 stroke-width：用于定义直线的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置直线的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到直线。变换可以是一个包含多个变换操作的字符串。

polyline 元素

用于创建多段线，可以在 SVG 中定义多个点，这些点将连接成线条。

html

<polyline
  points="10,10 50,90 90,10"
  fill="none"
  stroke="purple"
  stroke-width="3"
/>

常见属性：

points：此属性定义了多段线的点坐标。它是一个包含一系列 x 和 y 坐标值的字符串，用空格或逗号分隔。每对坐标表示一个点。
fill：用于指定多段线的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义多段线的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置多段线的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到多段线。变换可以是一个包含多个变换操作的字符串。

polygon 元素

用于创建多边形，可以在 SVG 中定义多个点，这些点将连接成封闭的形状。

html

<polygon points="50,10 10,90 90,90" fill="orange" />

常见属性：

points：此属性定义了多边形的点坐标。它是一个包含一系列 x 和 y 坐标值的字符串，用空格或逗号分隔。每对坐标表示一个点。
fill：用于指定多边形的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义多边形的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置多边形的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到多边形。变换可以是一个包含多个变换操作的字符串。

path 元素

用于创建自定义路径，可以在 SVG 中使用各种命令来定义路径的形状。

html

<path
  d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
  fill="none"
  stroke="brown"
/>

常见属性：

d：此属性是 <path> 元素最重要的属性，用于定义路径的命令和参数。它是一个包含路径数据的字符串，每个命令以字母表示，后面跟着命令的参数。
fill：用于指定路径的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义路径的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置路径的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到路径。变换可以是一个包含多个变换操作的字符串。

关于 d 命令参数

路径命令可以使用绝对定位和相对定位。一般来说，在 SVG 路径数据中，大写字母通常表示绝对定位，而小写字母表示相对定位。这是一种通用的约定，用于表示路径命令中的坐标是绝对的还是相对于当前点的。绝对定位命令将指定绝对的坐标值，相对于 SVG 坐标系统来描述路径；相对定位命令使用相对于当前点的坐标值来描述路径，相对于上一个点的坐标值来绘制路径。

M (Move To)：M 命令用于将路径的起始点移动到指定的坐标位置，而不绘制任何线条。它后面跟随一个或多个坐标对，每个坐标对表示一个点。
- M x y：将起始点移动到坐标 (x, y)。
html
```
<path d="M 10 10" />
```
L (Line To)：L 命令用于从当前点绘制一条直线到指定的坐标位置。它后面跟随一个或多个坐标对，每个坐标对表示一个终点。
- L x y：绘制一条直线到坐标 (x, y)。
html
```
<path d="M 10 10 L 50 50" />
```
H (Horizontal Line To)：H 命令用于从当前点绘制一条水平线到指定的 x 坐标位置。它只接受一个 x 坐标值作为参数。
- H x：绘制一条水平线到 x 坐标 (x, 当前 y)。
html
```
<path d="M 10 10 H 50" />
```
V (Vertical Line To)：V 命令用于从当前点绘制一条垂直线到指定的 y 坐标位置。它只接受一个 y 坐标值作为参数。
- V y：绘制一条垂直线到 y 坐标 (当前 x, y)。
html
```
<path d="M 10 10 V 50" />
```
C (Cubic Bezier Curve To)：C 命令用于绘制三次贝塞尔曲线。它后面跟随六个参数，分别是两个控制点和终点的坐标。
- C x1 y1, x2 y2, x y：绘制从当前点到 (x, y) 的三次贝塞尔曲线，其中 (x1, y1) 和 (x2, y2) 是两个控制点。
html
```
<path d="M 10 10 C 20 20, 40 20, 50 10" />
```
S (Smooth Curve To)：S 命令用于绘制光滑的三次贝塞尔曲线，其中第一个控制点是前一个曲线的终点的对称点。它后面跟随四个参数，分别是一个控制点和终点的坐标。
- S x2 y2, x y：绘制从当前点到 (x, y) 的光滑三次贝塞尔曲线，其中 (x2, y2) 是一个控制点。
html
```
<path d="M 10 10 S 40 20, 50 10" />
```
Q (Quadratic Bezier Curve To)：Q 命令用于绘制二次贝塞尔曲线。它后面跟随四个参数，分别是一个控制点和终点的坐标。
- Q x1 y1, x y：绘制从当前点到 (x, y) 的二次贝塞尔曲线，其中 (x1, y1) 是一个控制点。
html
```
<path d="M 10 10 Q 30 20, 50 10" />
```
T (Smooth Quadratic Bezier Curve To)：T 命令用于绘制光滑的二次贝塞尔曲线，其中控制点是前一个曲线的终点的对称点。它后面跟随两个参数，分别是终点的坐标。
- T x y：绘制从当前点到 (x, y) 的光滑二次贝塞尔曲线。
html
```
<path d="M 10 80 A 45 45, 0, 0, 0, 100 80" />
```
A (Arc)：A 命令用于绘制椭圆弧。它后面跟随七个参数，分别是椭圆弧的半径、旋转角度、弧的大/小角度、弧的方向和终点坐标。
- A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绘制椭圆弧。
html
```
<path d="M 10 80 A 45 45, 0, 0, 0, 100 80" />
```
Z (Close Path)：Z 命令用于将当前路径连接回起始点，形成封闭路径。它不需要参数。
- Z：连接当前点到路径的起始点。
html
```
<path d="M 10 10 L 50 50 H 100 V 10 Z" />
```

文本内容元素

text 元素

用于在 SVG 图形中添加文本，可以指定文本内容、位置、字体等。

html

<text x="20" y="40" fill="black" font-size="20">SVG Text</text>

常见属性：

x 和 y：用于指定文本的起始位置的 x 和 y 坐标。它们定义了文本的基线（通常是文本的底部）相对于 SVG 坐标系统的位置。
font-family：用于指定文本的字体系列（例如，Arial、Helvetica、Times New Roman 等）。
font-size：用于定义文本的字体大小，以像素为单位。
fill：用于指定文本的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
opacity：用于设置文本的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到文本。变换可以是一个包含多个变换操作的字符串。
text-anchor：用于定义文本的对齐方式，可以是 start（默认，左对齐）、middle（居中对齐）、或 end（右对齐）。
alignment-baseline：用于定义文本的垂直对齐方式，可以是 baseline（默认，基线对齐）、middle（居中对齐）、或 hanging（悬挂对齐）等。

tspan 元素

用于在文本中创建子文本块的元素。它通常用于在文本内部应用不同的样式或进行定位，使文本具有更多的灵活性。

html

<text x="20" y="40">
  <tspan x="20" y="40">Hello</tspan>
  <tspan x="60" y="40">SVG!</tspan>
</text>

常见属性：

x 和 y：用于指定 <tspan> 元素的起始位置的 x 和 y 坐标。这些坐标定义了子文本块相对于父文本的位置。
font-family：用于指定 <tspan> 元素的字体系列（例如，Arial、Helvetica、Times New Roman 等）。
font-size：用于定义 <tspan> 元素的字体大小，以像素为单位。
fill：用于指定 <tspan> 元素的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义 <tspan> 元素的边框颜色和宽度。
opacity：用于设置 <tspan> 元素的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。

滤镜元素

filter 元素

用于创建图形效果和滤镜效果的元素之一。

html

<filter x="0" y="0" width="100%" height="100%" id="blur">
  <!-- 滤镜效果的内容 -->
</filter>

常见属性：

x 和 y：用于指定滤镜效果的坐标，表示滤镜效果的位置。通常与 <filter> 元素的 width 和 height 属性一起使用，用于定义滤镜效果的范围。
id：用于为滤镜效果定义唯一的标识符，以便在其他元素中引用该滤镜。
filterUnits 和 primitiveUnits：这些属性定义了滤镜效果的坐标系统和尺寸单位。通常使用默认值即可。
filterRes：用于指定滤镜效果的分辨率，即滤镜效果的像素大小。它是一个包含两个整数的字符串，例如 filterRes="300 300"。
filterUnits：用于指定滤镜效果的坐标系统。可以是 userSpaceOnUse（默认，以用户坐标系统为基础）或 objectBoundingBox（以被过滤对象的边界框为基础）。
滤镜效果的内容：在 <filter> 元素内部，您可以包含多个滤镜效果操作。

filter 属性

在 SVG 元素中，可以通过设置 filter 属性来应用定义 circle 元素的滤镜效果。

html

<circle cx="50" cy="50" r="40" fill="red" filter="url(#blur)" />

滤镜效果的内容

<feGaussianBlur>：高斯模糊滤镜，用于模糊图像或元素。

html

<filter x="0" y="0" width="100%" height="100%" id="blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>

<feColorMatrix>：颜色矩阵滤镜，用于改变图像或元素的颜色。

html

<filter x="0" y="0" width="100%" height="100%" id="Matrix">
  <feColorMatrix
    in="SourceGraphic"
    type="matrix"
    values="0.5 0 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 0 0 0.5 0"
  />
</filter>

<feDropShadow>：阴影滤镜，用于在图像或元素周围创建阴影效果。

html

<filter x="0" y="0" width="100%" height="100%" id="Shadow">
  <feDropShadow dx="2" dy="2" stdDeviation="3" />
</filter>

<feComposite>：合成滤镜，用于在图像或元素之间执行复合操作。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feComposite operator="in" in2="SourceGraphic" />
</filter>

<feTurbulence>：涡流滤镜，用于创建噪点或纹理效果。

html

<filter x="0" y="0" width="100%" height="100%" id="Turbulence">
  <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5" />
</filter>

<feDisplacementMap>：位移映射滤镜，用于根据另一幅图像的亮度值扭曲图像。

html

<filter x="0" y="0" width="100%" height="100%" id="Map">
  <feDisplacementMap in2="SourceGraphic" scale="20" />
</filter>

<feMorphology>：形态学滤镜，用于膨胀或腐蚀图像。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feMorphology operator="erode" radius="2" />
</filter>

<feOffset>：偏移滤镜，用于将图像或元素偏移一定的距离。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feOffset dx="5" dy="5" />
</filter>

渐变元素

linearGradient 元素

用于创建线性渐变的元素。

html

<defs>
  <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<rect x="10" y="10" width="100" height="50" fill="url(#myGradient)" />

常见属性：

id：必须的属性，用于给渐变定义一个唯一的标识符。
x1 和 y1：渐变的起始点的坐标，可以使用百分比或具体的坐标值。默认值是 "0%"。
x2 和 y2：渐变的结束点的坐标，可以使用百分比或具体的坐标值。默认值是 "100%"。
gradientUnits：指定坐标系统，可以是 userSpaceOnUse（默认，使用用户坐标系统）或 objectBoundingBox（相对于被填充元素的边界框）。
spreadMethod：定义渐变超出起始点和结束点之外的行为。可以是 pad（默认，超出部分填充与最近的颜色相同）、reflect（超出部分镜像反射）或 repeat（超出部分重复渐变）。
gradientTransform：允许应用变换矩阵来改变渐变的方向、位置和形状。
颜色停止点：在 <linearGradient> 元素内部使用 <stop> 元素来定义颜色和颜色停止点。

radialGradient 元素

用于创建径向渐变的元素。

html

<defs>
    <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#myGradient)" />

常见属性：

id：必须的属性，用于给渐变定义一个唯一的标识符。
cx 和 cy：渐变的中心点的坐标，可以使用百分比或具体的坐标值。默认值是 "50%"。
r：渐变的半径，可以使用百分比或具体的坐标值。默认值是 "50%"。
fx 和 fy：焦点的坐标（可选），用于创建焦点渐变。默认值是与中心点相同。
gradientUnits：指定坐标系统，可以是 userSpaceOnUse（默认，使用用户坐标系统）或 objectBoundingBox（相对于被填充元素的边界框）。
spreadMethod：定义渐变超出半径之外的行为。可以是 pad（默认，超出部分填充与最近的颜色相同）、reflect（超出部分镜像反射）或 repeat（超出部分重复渐变）。
gradientTransform：允许应用变换矩阵来改变渐变的方向、位置和形状。
颜色停止点：在 <radialGradient> 元素内部使用 <stop> 元素来定义颜色和颜色停止点。

渲染元素

use 元素

用于在 SVG 文档中引用其他元素（通常是 <defs> 内定义的元素）。通过设置 x 和 y 属性，可以指定要放置图形元素的位置。

html

<use xlink:href="#myShape" x="50" y="50" />

常见属性：

xlink:href 或 href（在 HTML5 中使用）：必须的属性，用于指定要引用的图形元素的 ID。您可以在当前文档中引用或在外部文档中引用。
x 和 y：可选属性，用于指定要插入的图形元素的位置。这些属性定义了元素的左上角坐标。默认值是 0。
width 和 height：可选属性，用于指定要插入的图形元素的大小。默认值是根据原始图形元素的大小来确定。

TIP

在 SVG 文档中复用已定义的图形元素。这有助于提高 SVG 文档的可维护性和性能，并允许您在文档中多次使用相同的图形元素。

Web API（仅浏览器环境） ​

BOM ​

窗口（Window）对象 ​

属性 ​

方法 ​

位置（Location）对象 ​

属性 ​

方法 ​

导航器（Navigator）对象 ​

属性 ​

方法 ​

屏幕（Screen）对象 ​

属性 ​

历史（History）对象 ​

属性 ​

方法 ​

Core DOM ​

节点属性 ​

节点方法 ​

文档 Document ​

属性 ​

方法 ​

元素 Element ​

属性 ​

方法 ​

CharacterData ​

属性 ​

方法 ​

文本 Text ​

属性 ​

方法 ​

注释 Commnet ​

属性 Attr ​

属性 ​

文档片段 DocumentFragment ​

属性 ​

方法 ​

URL ​

构造函数 ​

属性 ​

静态方法 ​

方法 ​

URLSearchParams ​

构造函数 ​

属性 ​

方法 ​

HTML DOM ​

HTMLElement ​

属性 ​

方法 ​

HTMLMediaElement(<audio> / <video>) ​

HTMLAnchorElement (<a>) ​

HTMLInputElement (<input>) ​

HTMLFormElement (<form>) ​

HTMLImageElement (<img>) ​

HTMLButtonElement (<button>) ​

HTMLTableElement (<table>) ​

HTMLTableRowElement(<tr>) ​

HTMLTextAreaElement(<textarea>) ​

HTMLLabelElement(<label>) ​

HTMLDialogElement(<dialog>) ​

HTMLVideoElement(<video>) ​

HTMLSelectElement(<select>) ​

HTMLSlotElement(<slot>) ​

HTMLTemplateElement(<template>) ​

MutationObserver ​

构造函数 ​

方法 ​

DOMStringList ​

属性 ​

方法 ​

ShadowRoot ​

属性 ​

方法 ​

Blob ​

构造函数 ​

属性 ​

方法 ​

File ​

构造函数 ​

Web API（仅浏览器环境）

BOM

窗口（Window）对象

属性

方法

位置（Location）对象

属性

方法

导航器（Navigator）对象

属性

方法

屏幕（Screen）对象

属性

历史（History）对象

属性

方法

Core DOM

节点属性

节点方法

文档 Document

属性

方法

元素 Element

属性

方法

CharacterData

属性

方法

文本 Text

属性

方法

注释 Commnet

属性 Attr

属性

文档片段 DocumentFragment

属性

方法

URL

构造函数

属性

静态方法

方法

URLSearchParams

构造函数

属性

方法

HTML DOM

HTMLElement

属性

方法

HTMLMediaElement(`<audio> / <video>`)

HTMLAnchorElement (`<a>`)

HTMLInputElement (`<input>`)

HTMLFormElement (`<form>`)

HTMLImageElement (`<img>`)

HTMLButtonElement (`<button>`)

HTMLTableElement (`<table>`)

HTMLTableRowElement(`<tr>`)

HTMLTextAreaElement(`<textarea>`)

HTMLLabelElement(`<label>`)

HTMLDialogElement(`<dialog>`)

HTMLVideoElement(`<video>`)

HTMLSelectElement(`<select>`)

HTMLSlotElement(`<slot>`)

HTMLTemplateElement(`<template>`)

MutationObserver

构造函数

方法

DOMStringList

属性

方法

ShadowRoot

属性

方法

Blob

构造函数

属性

方法

File

构造函数