做前端开发，还是需要通读MDN（二）接上回《做前端开发，还是需要通读MDN（一）》这篇文章我们来总结下Window,

这篇文章我们来总结下Window, Document, Element接口。

Window

代表浏览器中的全局窗口。它是浏览器的JavaScript对象模型（DOM）中的顶级对象。提供有关浏览器窗口的信息，同时也作为js在浏览器中运行时的全局上下文。任何不能合理地与标签有关的东西都与窗口有关。

属性

`closed`

只读属性表示所引用的窗口是否关闭。开发时一般用于window.open打开页面判断主页面是否关闭。

window.opener.closed

`cookieStore`

方便操作cookie，具体介绍看这里《还在用document.cookie操作cookie吗？试试这个》

`crossOriginIsolated`

用于检测当前页面是否处于 跨源隔离（Cross-Origin Isolation） 状态。这一机制的核心目的是增强网页的安全性，防止跨站攻击（如 Spectre 攻击），同时允许开发者使用一些高风险的 API。

安全隔离
跨源隔离通过限制不同源（Origin）之间的资源访问，防止恶意网站通过跨站攻击窃取敏感数据。例如，阻止通过 SharedArrayBuffer 或高精度计时器（如 performance.now()）发起的侧信道攻击。
启用高风险 API
某些敏感的 JavaScript API 仅在跨源隔离的上下文中可用，例如：
- SharedArrayBuffer：允许不同线程共享内存（常用于多线程高性能计算）。
- performance.measureUserAgentSpecificMemory()：测量内存使用情况。
- 部分高性能 WebAssembly 特性。
资源访问限制
处于跨源隔离状态的页面，所有跨源资源（如脚本、图片）必须明确支持 CORS（通过 Cross-Origin-Resource-Policy 头或 crossorigin 属性），否则会被浏览器拦截。

如何启用跨源隔离？

需在服务器设置以下 HTTP 响应头，设置成功后，window.crossOriginIsolated 将返回 true。

Cross-Origin-Embedder-Policy: require-corp
要求所有加载的子资源（iframe、脚本、图片等）明确支持跨源资源共享（CORS）。
Cross-Origin-Opener-Policy: same-origin
确保顶层窗口仅与同源页面共享浏览上下文组。

`customElements`

可用于定义元素，web component 相关api，有关webcomponents看这里《了解Web Components，在现代框架中使用它》

`devicePixelRatio`

返回当前显示设备的物理像素分辨率与设备独立像素（CSS 像素） 分辨率之比。它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。 即值越大越清晰。

`documentPictureInPicture`

获取当前窗口通过window.documentPictureInPicture.requestWindow打开的画中画窗口对象

`fence`

fence（或 Fenced Frame）是 Web 技术中一种用于增强隐私和安全的新机制，尤其在处理跨站数据时，旨在限制不同来源的页面之间的信息泄露。阻止父页面与子框架之间的双向通信（如 postMessage、DOM 访问等）

`frameElement`

返回嵌入窗口的元素（即在iframe或object中获取frameElement,表示获取当前iframe或者object元素）。如果窗口未嵌入到其他文档中，或者嵌入的文档与窗口具有不同的源（origin），则该值为 null。

`frames`

返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口对象(<frame>或<iframe>)，而不是document对象。

`fullScreen`（Firefox 下生效）

检测窗口是否处于全屏模式下。

`history`

提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）。提供的api可以看这里

`indexedDB`

集成了为应用程序提供异步访问索引数据库的功能的机制。具体使用可以看这里

`length`

返回窗口中框架(<frame>和 <iframe> )的数量。

`location`

Location对象，内部提供有关文档当前位置的信息。location和location.href都可以修改当前tab的连接

`locationbar`

用于检测浏览器地址栏是否可见。只能通过脚本控制的浏览器栏才可以返回对应真实的值，例如全屏状态下locationbar依旧是true，目前就发现window.open(targetUrl, '_blank', 'location=no');会返回false。

`menubar`

用于检测浏览器菜单栏（Menu Bar）是否可见。只能通过脚本控制的浏览器栏才可以返回对应真实的值，例如全屏状态下locationbar依旧是true，目前就发现window.open(targetUrl, '_blank', 'location=no');会返回false。

`personalbar`

用于检测浏览器的“个人工具栏”（如书签工具栏）的可见性。一直都为true

`scrollbars, statusbar, toolbar`

scrollbars 用于检测浏览器窗口的滚动条是否可见。一直都为true
statusbar 用于检测浏览器状态栏（Status Bar）的可见性。一直都为true
toolbar 用于检测浏览器工具栏（如导航栏、书签栏）的可见性。一直都为true

`name`

获取/设置窗口的名称。

持久性：在页面跳转（包括跨域跳转）或刷新后，window.name 的值仍然保留。
存储容量：支持存储较大的字符串数据（约 2MB）。
作用域：全局有效，同一窗口或标签页内的所有页面共享。由于上面的特性，我们就可以间接用于共享数据了。
页面共享数据

// 页面 A：设置数据并跳转
const formData = { username: 'zh'};
window.name = JSON.stringify(formData);
window.location.href = 'page-b.html';

![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6c78fc42207f4c21b201a22873a6511d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgemhhbmdfZ2xpdGNo:q75.awebp?rk3s=f64ab15b&x-expires=1771245193&x-signature=IwiJY3seEtSyvGqhJQPI6Rx7rW0%3D)
// 页面 B：读取数据
const savedData = JSON.parse(window.name || '{}');
console.log(savedData.username); // 输出 "zh"

结合window.open多窗口共享数据

// 父窗口：打开子窗口并设置数据
const childWindow = window.open('child.html');
childWindow.name = 'zh';

![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/85ebb23d65fd4c79bdcc1187a7d8a931~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgemhhbmdfZ2xpdGNo:q75.awebp?rk3s=f64ab15b&x-expires=1771245193&x-signature=TIn9iVv2X2VDF6NQj9JJr5t5Mmk%3D)
// 子窗口（child.html）：读取父窗口设置的数据
console.log(window.name); // 输出 "zh"

其他有关页面跳转缓存数据的功能

`opener`

返回打开当前窗口的那个窗口的引用。一般下方这两种情况会有值，其他无值

window.open()打开窗口时不能设置noopener
a标签target="_blank", 并将rel设置为opener

`origin`

返回全局作用域的来源（序列化为字符串）。

`parent`

返回当前窗口(<iframe>, <object>, <frame>)的父窗口对象。如果一个窗口没有父窗口，则它的 parent 属性为自身的引用。跨域窗口也是可以访问到window.parent，但是不能获取父窗口的属性。

`screenLeft, screenTop, screenX, screenY`

screenLeft 非标准，返回浏览器左边框到左边屏幕边缘的 CSS 像素数。
screenTop 非标准，返回浏览器上边界到屏幕最顶端的 CSS 像素数。
screenX 同screenLeft
screenY 同screenTop

`scrollX, scrollY`

返回文档/页面水平,垂直方向滚动的像素值。

`top`

返回对窗口层次结构中最顶层窗口的引用。

`self`

返回一个指向当前 window 对象的引用。一般开发中用于比较window.top === window.self来确定是否处于顶层窗口中。对于chrome插件，注入iframe时在顶层窗口处理特殊逻辑。

`visualViewport`

返回当前窗口的可视视口信息。个人感觉和移动端操作更相关。

VisualViewport.offsetLeft返回视觉视口的左边框到布局视口的左边框的 CSS 像素距离。受屏幕缩放影响
VisualViewport.offsetTop返回视觉视口的上边框到布局视口的上边框的 CSS 像素距离。受屏幕缩放影响
VisualViewport.pageLeft返回相对于初始的 viewport 属性的 X 轴坐标所对应的 CSS 像素数。受水平滚动条滚动影响
VisualViewport.pageTop返回相对于初始的 viewport 属性的 Y 轴坐标所对应的 CSS 像素数。受垂直滚动条滚动影响
VisualViewport.width返回视觉视口的宽度所对应的 CSS 像素数。
VisualViewport.height返回视觉视口的高度所对应的 CSS 像素数。
VisualViewport.scale返回当前视觉视口所应用的缩放比例。
resize当视觉视口被改变时触发。 (缩放，调整窗口大小等) 在pc端等同于window.onresize？
scroll当视觉视口滑动时触发。(测试缩放不会触发，PC端这个未找到触发条件)
scrollend当视觉视口滑动结束时触发。(PC端暂时也未找到触发条件)

`screen`

返回设备屏幕有关的属性。所有尺寸单位为物理像素，非 CSS 像素。需结合 devicePixelRatio 转换为逻辑像素（css像素）。

screen.width 屏幕的总宽度（物理像素），包含系统任务栏/菜单栏等不可用区域。
screen.height 屏幕的总高度（物理像素），包含系统任务栏/菜单栏等不可用区域。
screen.availWidth 屏幕的可用宽度（物理像素），不包含操作系统固定的任务栏/菜单栏。
screen.availHeight 屏幕的可用高度（物理像素），不包含操作系统固定的任务栏/菜单栏。 - screen.colorDepth 屏幕的颜色深度（单位：位），表示每个颜色通道的位数（如 24 位真彩色）。 - screen.pixelDepth 屏幕的像素深度（单位：位），通常与 colorDepth 相同。
screen.orientation 屏幕方向信息（如横屏、竖屏），包含 angle（旋转角度）和 type（方向类型portrait-primary, portrait-secondary, landscape-primary, landscape-secondary）。
screen.isExtended 检测系统是否处于多显示器扩展模式。
screen.onchange 可以监听width, height, availWidth, availHeight, colorDepth, orientation值的变化。

使用案例

新打开窗口可以屏幕中心展示

// 窗口宽高
const width = 800;
const height = 600;
const left = (screen.availWidth - width) / 2;
const top = (screen.availHeight - height) / 2;

window.open('/popup', '_blank', `width=${width},height=${height},left=${left},top=${top}`);

其他使用场景感觉更适用于移动端。

`mozInnerScreenX, mozInnerScreenY`

在屏幕坐标中获取窗口视口左上角的 X, Y 坐标，受屏幕缩放影响。

`scrollMaxX, scrollMaxY`

返回文档可以水平,垂直滚动的最大像素数。

// 滚动到页面右边缘
let maxX = window.scrollMaxX;
window.scrollTo(maxX, 0);

`localStorage, sessionStorage`

`innerHeight`, `innerWidth, outerHeight, outerWidth`

和浏览器窗口有关的信息。

属性	包含内容	用途
`window.innerWidth`	视口宽度（含垂直滚动条宽度）	响应式布局、动态内容适配
`window.innerHeight`	视口高度（含水平滚动条高度）	计算可视区域高度
`window.outerWidth`	浏览器窗口总宽度（含工具栏）	控制窗口尺寸、调试窗口位置
`window.outerHeight`	浏览器窗口总高度（含工具栏）	窗口最大化/最小化操作

`navigator` 后续单独学习

可以用于请求运行当前代码的应用程序和设备的相关信息。例如调用本地摄像头及录音设备等等。

例如录制tab页面：《前端可以知道的录制浏览器标签页，没有黑魔法》

`performance` 后续单独学习

用于收集有关在窗口的作用域内运行的代码的性能信息。

`navigation`

旨在取代传统的 history API，提供更精细的浏览器导航控制能力。

具体看这里《什么你还不会用navigation来管理导航？》

方法

`atob(), btoa()`

atob() 用于 解码 Base64 字符串，而 btoa() 则用于 编码字符串(仅支持 ASCII 字符,直接编码 Unicode 字符（如中文）会报错)为 Base64。它们的命名来源于 ASCII 到 Binary（atob）和 Binary 到 ASCII（btoa）的简写。

const chineseText = "你好";
const safeEncoded = btoa(encodeURIComponent(chineseText)); // base64
console.log(safeEncoded); // "JUU0JUJEJUEwJUU1JUE1JUJE"

const decodedChinese = decodeURIComponent(atob(safeEncoded)); // 字符串
console.log(decodedChinese); // "你好"

`cancelAnimationFrame()`

取消一个先前通过调用 window.requestAnimationFrame()]方法添加到计划中的动画帧请求。

`cancelIdleCallback()`

用于取消之前调用window.requestIdleCallback()的回调。

`close()`

关闭当前窗口或某个指定的窗口。该方法只能由 Window.open()方法打开的窗口的 window 对象来调用。

`confirm()`

浏览器显示一个带有可选的信息的对话框，并等待用户确认或取消该对话框。确认返回true, 取消返回false。

`dump()`

将消息输出到浏览器的标准输出（stdout）。如果浏览器是从终端启动的，通过 dump() 发送的输出将出现在该终端中。输出的内容不会被发送到浏览器的开发者工具控制台。

`fetchLater` 实验性

延迟发送请求。参数一和fetch一样，参数二请求配置（包括延时配置activateAfter，毫秒）。如果不指定延迟配置那么将延迟到页面被销毁或进入 bfcache时发送请求。

fetchLater("/send_beacon", {
  method: "POST",
  body: getBeaconData(),
  activateAfter: 60000, // 1 minute
});

`find()` 实验性

在窗口中按顺序查找字符串。如果找到指定的字符串，则返回 true，否则返回 false。

find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog)

aString 将要搜索的文本字符串。
aCaseSensitive布尔值，如果为 true，表示区分大小写搜索。
aBackwards布尔值。如果为 true，表示从后往前搜索。
aWrapAround布尔值。如果为 true，表示循环搜索。
aWholeWord布尔值。如果为 true，表示全词搜索。
aSearchInFrames布尔值。如果为 true，表示在框架（frame）中搜索。
aShowDialog布尔值。如果为 true，则会弹出一个搜索对话框。

`focus()`

发出将窗口置顶的请求。用户设置可能导致此操作失败，并且在方法返回之前并不能保证窗口已处于最前端。

`getComputedStyle()`

返回当前指定元素计算后所有css属性的值。可以指定第二个参数（一个要匹配的伪元素的字符串）用于获取伪元素信息（例如伪元素内容）。

<style>
  h3::after {
    content: "rocks!";
  }
</style>

<h3>generated content</h3>

<script>
  let h3 = document.querySelector("h3"),
    result = getComputedStyle(h3, "::after").content;
  alert(`the generated content is: ${result}`);
  console.log(`the generated content is: ${result}`);
  // the generated content is: "rocks!"
</script>

`getDefaultComputedStyle()`

给出元素的所有 CSS 属性的默认计算值。使用方式和getComputedStyle()一样。

`getScreenDetails（）`

返回一个 Promise，表示用户设备可用的所有屏幕的详细信息。

`getSelection()`

返回一个 Selection 对象，表示用户选择(当前点击)的文本范围或光标的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

文本选区有啥魔力

`matchMedia(mediaQueryString)`

返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。返回的 MediaQueryList 可被用于判定 Document 是否匹配媒体查询，或者监控一个 document 来判定它匹配了或者停止匹配了此媒体查询。

`moveBy(deltaX, deltaY), moveTo(x, y), resizeBy(xDelta, yDelta), resizeTo(aWidth, aHeight), scroll([xCoord, yCoord], [options]), scrollBy([xCoord, yCoord], [options]), scrollTo([xCoord, yCoord], [options])`

moveBy(deltaX, deltaY)
- deltaX 表示窗口在水平方向移动的像素值。
- deltaY 表示窗口在垂直方向移动的像素值。
moveTo(x, y)
- x 是要移动到的位置横坐标
- y 是要移动到的位置纵坐标
resizeBy(xDelta, yDelta), resizeTo(aWidth, aHeight) 调整窗口的大小。
- aWidth 是一个整数，表示新的 outerWidth（单位：像素）（包括滚动条、窗口边框等）。
- aHeight 是一个整数，表示新的 outerHeight（单位：像素）（包括滚动条、标题栏、窗口边框等）。
scroll([xCoord, yCoord], [options]), scrollBy([xCoord, yCoord], [options]), scrollTo([xCoord, yCoord], [options]) 滚动窗口至文档中的特定位置。(当前文档出现全局滚动条时) 可以有两种传参方式xCoord, yCoord, options
- xCoord 你想要在左上角显示的文档水平轴像素。
- yCoord你想要在左上角显示的文档垂直轴像素。
- options包含以下属性的对象：
  - top指定沿 Y 轴滚动窗口或元素的像素数。
  - left指定沿 X 轴滚动窗口或元素的像素数。
  - behavior 确定滚动是即时完成还是以平滑动画进行。该选项是一个字符串，必须取以下值之一：
    - smooth：滚动应该平滑地进行动画展示
    - instant：滚动应在一次跳转中即时完成
    - auto：滚动行为由 scroll-behavior 的计算值来决定

`open(url, target, feature)`

用指定的名称将指定的资源加载到新的或已存在的浏览上下文（标签、窗口或 iframe中)。

`otherWindow.postMessage(message, targetOrigin, [transfer])`

可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议，以及主机时，这两个脚本才能相互通信。postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

在当前页面中拿到其他页面的窗口对象进行调用通信。然后在其他页面中监听message消息。就类似于自己监听自己。

message 消息体(无需自己序列化)
targetOrigin 接收消息匹配的URI，如果窗口匹配到URI的origin，那么将接收到该消息。可以设置*让所有窗口接收。可是我觉得这个没啥用，因为指定的是otherWindow，而不是自己window来调用postMessage

监听消息比较重要的属性

data从其他 window 中传递过来的对象。
origin调用 postMessage 时消息发送方窗口的origin。请注意，这个 origin 不能保证是该窗口的当前或未来 origin，因为 postMessage 被调用后可能被导航到不同的位置。
source对发送消息的窗口对象的引用; 你可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

`print()`

打开打印对话框，以打印当前文档。如果调用此函数时文档仍在加载中，那么文档将在打开打印对话框之前完成加载。当打印对话框打开时，此方法将阻塞js主线程。

`prompt(message, defaultValue)`

指示浏览器显示一个对话框，其中有一个可选的信息，提示用户输入一些文本，并等待用户提交文本或取消对话框。

message 可选，向用户显示的一串文本。如果在提示窗口中没有什么可显示的，可以省略。
defaultValue 可选，一个字符串，包含文本输入字段中显示的默认值。

只有点击确认后，该方法才会返回用户输入的值。

`queueMicrotask(callback)`

将微任务加入队列以在控制返回浏览器的事件循环之前的安全时间执行。微任务（microtask）的执行顺序在所有进行中的任务（pending task）完成之后，在对浏览器的事件循环产生控制之前。

`reportError(throwable)`

模拟未捕获的 JavaScript 异常，向控制台或全局事件处理器报告错误。

`requestAnimationFrame(callback)`

告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。对回调函数的调用频率通常与显示器的刷新率相匹配。

`requestIdleCallback(callback, options)`

在浏览器空闲时期执行传入的函数。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。

options可以指定timeout属性表示延时时间。

`stop()`

相当于点击了浏览器的停止按钮。由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

`structuredClone(value, options)`

使用结构化克隆算法将给定的值进行深拷贝。并且可以克隆循环引用。

value 被克隆的对象。可以是任何结构化克隆支持的类型。
options 可选, 一个具有以下属性的对象：
- transfer 一个可转移对象的数组，里面的对象将被移动而不是克隆到返回的对象上。原始对象无法继续使用。

`showOpenFilePicker()`, `showDirectoryPicker()`, `showSaveFilePicker()`

浏览器文件系统相关操作。

什么，浏览器端也可以轻松操作文件了？

事件

`blur`

在浏览器窗口失去焦点(所以需要先聚焦)时触发，例如用户切换到其他标签页、应用，或点击了浏览器外部区域(例如点击devtools)。

所以做一些用户行为保存功能。

页面失去焦点时暂停视频
提示用户离开页面
配合focus计算用户离开页面多久，以及次数。

window.addEventListener("blur", () => {
  alert("请勿离开页面！");
});

`focus`

在浏览器窗口获得焦点(所以需要先失焦)时触发。

`copy`

当用户通过浏览器的用户界面发起一个复制动作时，将触发 copy 事件。例如用户触发ctrl + c即会触发。我们可以获取ClipboardEvent事件对象，获取赋值目标继续操作。

如何像掘金编辑器一样粘贴图片即可上传服务器

`paste`

将剪贴板内容粘贴到可编辑区域(<input>、<textarea>、contenteditable 元素、document.designMode = "on") 时触发。

`cut`

事件仅在可编辑元素（如 <input>、<textarea>、contenteditable 元素、document.designMode = "on"）中触发。

`storage`

当存储区域（localStorage 或 sessionStorage）被修改时，将触发 storage 事件。

页面之间的通信

`hashchange`

当 URL 的片段标识符（以 # 符号开头和之后的 URL 部分）更改时，将触发 hashchange 事件。

重学vue(2, 3)及其生态+TypeScript 之 vue-router4.x

`message`

监听postMessage通信发送的消息。[详见这里](otherWindow.postMessage(message, targetOrigin, [transfer]))

`messageerror`

当接收到(postMessage发送)的消息无法被反序列化或无法构造为预期对象时触发。

`offline`

在浏览器失去网络连接时触发

`online`

当浏览器能够访问网络时触发。

`pagereveal`

在首次呈现文档时触发，无论是从网络加载新文档还是激活文档。优先pageshow触发

`load`

在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

`pageshow`

当一条会话历史记录被执行的时候将会触发。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)

`pageswap`

在跨文档导航时触发，当前一个文档即将卸载时。

其中事件对象中 event.activation 保存了当前导航的源和目标的导航信息及导航类型。

`pagehide`

当浏览器从展示会话历史中的另一个页面过程中隐藏当前页面时触发。例如，当用户点击浏览器的后退按钮时，在显示前一个页面之前，当前页面会接收到一个 pagehide 事件。

可用于检测页面卸载。

其中事件对象中 event.persisted 可以判断页面是否被存入 BFCache。

true：页面被缓存，稍后可能恢复（如用户点击返回按钮）。
false：页面将完全卸载，不会被缓存。

`beforeunload`

当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。阻止事件默认行为event.preventDefault()后，当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

window.onbeforeunload = (event) => {
    event.preventDefault()
}

`unload`

当文档或一个子资源正在被卸载时触发。在beforeunload, pagehide之后触发。

父 iframe 会在子 iframe 卸载前卸载。

`popstate`

在浏览器历史记录条目发生变化时触发。直接调用 pushState 或 replaceState 不会触发 popstate, 只是增加触发popstate的必要性 。需要用户点击浏览器的前进/后退按钮或者通过调用history.go()、history.back()、history.forward() 触发的导航行为

重学vue(2, 3)及其生态+TypeScript 之 vue-router4.x

`resize`

在文档可视窗口(innerHeight, innerWidth区域)调整大小时触发。

`error`

用于全局捕获 JavaScript 运行时错误或资源加载失败（如图片、脚本加载失败）

下篇文章将介绍Document, Element接口中的属性和方法。

往期年度总结

往期文章

专栏文章

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论， 支持一下博主~

公众号：全栈追逐者，不定期的更新内容，关注不错过哦！

做前端开发，还是需要通读MDN（二）

Window

属性

closed

cookieStore

crossOriginIsolated

customElements

devicePixelRatio

documentPictureInPicture

fence

frameElement

frames

fullScreen（Firefox 下生效）

history

indexedDB

length

location

locationbar

menubar

personalbar

scrollbars, statusbar, toolbar

name

opener

origin

parent

screenLeft, screenTop, screenX, screenY

scrollX, scrollY

top

self

visualViewport

screen

mozInnerScreenX, mozInnerScreenY

scrollMaxX, scrollMaxY

localStorage, sessionStorage

innerHeight, innerWidth, outerHeight, outerWidth

navigator 后续单独学习

performance 后续单独学习

navigation

方法

atob(), btoa()

cancelAnimationFrame()

cancelIdleCallback()

close()

confirm()

dump()

fetchLater 实验性

find() 实验性

focus()

getComputedStyle()

getDefaultComputedStyle()

getScreenDetails（）

getSelection()

matchMedia(mediaQueryString)

moveBy(deltaX, deltaY), moveTo(x, y), resizeBy(xDelta, yDelta), resizeTo(aWidth, aHeight), scroll([xCoord, yCoord], [options]), scrollBy([xCoord, yCoord], [options]), scrollTo([xCoord, yCoord], [options])

open(url, target, feature)

otherWindow.postMessage(message, targetOrigin, [transfer])

print()

prompt(message, defaultValue)

queueMicrotask(callback)

reportError(throwable)

requestAnimationFrame(callback)

requestIdleCallback(callback, options)

stop()

structuredClone(value, options)

showOpenFilePicker(), showDirectoryPicker(), showSaveFilePicker()

事件

blur

focus

copy

paste

cut

storage

hashchange

message

messageerror

offline

online

pagereveal

load

pageshow