🪴qql1's digital garden

BOM API

1分钟阅读

目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领 基础

1. 适用范围:

  1. 浏览器提供的API

2. 梗概:

Browser Object Model api 即操作浏览器窗口的API BOM与DOM都是是独立于平台与编程语言的

概念

child::BOM与ts与js的关系

3. BOM与DOM的关系:

DOM包含于BOM DOM的和核心对象Document是BOM核心对象window的子类

4. BOM API 提供的对象:

  1. child::

    window

    浏览器提供的window对象的常用API

    • child::innerHeight与innerWidth
    • window.open()：[beused::在新标签中打开网页]
    • child::

      弹窗API

      • window.alert()：弹出警告框。
      • window.prompt()：弹出输入框。
      • window.confirm()：弹出确认框。
      指向原始笔记的链接
    • child::

      滚动条 API

      JS

      基础API

      获取滚动位置

      • 对于整个标签页：windows.scrollX和windows.scrollY
      • 对于某个元素：使用element.scrollTop和element.scrollLeft属性来获取垂直和水平方向上滚动条的位置

      控制滚动行为

      • scrollTo() - 滚动到指定位置
      • scrollBy() - 相对当前位置滚动一定距离

      滑动条对齐原理

      滑动条比例关系

      滑动条比例 = 容器宽度 / 总内容宽度

      滑动条两端分别对齐滑动窗口的边界，滑动条的位置反映了当前可视区域在总内容中的位置。

      scrollBy的实现

      scrollBy就是移动一段距离，结合getBoundingClientRect可以实现自动滑动：

      • 计算目标元素离视口的距离
      • 滚动相应的距离
      • 这样就能将目标元素滚动进视图中
      // 示例：将元素滚动到可视区域
function scrollIntoView(element) {
  const rect = element.getBoundingClientRect();
  const scrollDistance = rect.top;
  window.scrollBy(0, scrollDistance);
}
      指向原始笔记的链接
    指向原始笔记的链接
  2. child::DOM
  3. event
  4. screen

浏览器相关

  • child::

    navigator对象

    适配-兼容

    适用范围：

    1. 作用：

    1. 移动端浏览器适配

    梗概：

    该对象保存了当前浏览器的相关信息

    常用API

    1. userAgent

    • 描述了浏览器的用户代理字符串
    • 可以用来判断当前浏览器的类型和版本

    2. platform

    • 描述了运行浏览器的操作系统平台
    • 可以用来判断用户所使用的设备类型

    3. language

    • 描述了当前浏览器的首选语言
    • 可以用来提供多语言支持

    4. cookieEnabled

    • 布尔值，描述了浏览器是否支持cookie

    5. geolocation

    • 对象，提供了获取用户地理位置信息的API
    指向原始笔记的链接
  • child::

    浏览历史 api

    梗概:

    window.location.pathname//获取/路径字段 
history.back() 
history.go() 
history.forward()//完成后退前进等操作 
history.pushState();// 添加新的状态到历史状态栈 
history.replaceState() // 用新的状态代替当前状态 
history.state // 返回当前状态对象

    语法:

    1. pushState()和replaceState():

    history.pushState() 和 history.replaceState() 均接收三个参数（state, title, url）

    1. state：合法的 Javascript 对象，可以用在 popstate 事件中
      1. 一般为null
    2. title：现在大多浏览器忽略这个参数，可以直接用 null 代替
    3. url：任意有效的 URL，用于更新浏览器的地址栏

    2. popstate事件

    当活动历史记录条目更改时，将触发popstate事件。

    2.1. 注意:

    1. 调用history.pushState()或history.replaceState()不会触发popstate事件。
      1. 只有在做出浏览器动作时，才会触发该事件，
        1. 如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）。
    指向原始笔记的链接
  • child::

    URL相关的API

    1. child::访问浏览器的hash值
    2. child::hashchange事件
    指向原始笔记的链接

操作系统相关

  • child::

    location对象

    适用范围：

    1. 获取和操作URL

    示例

    // 获取当前页面的URL
console.log(location.href);
 
// 获取当前页面的主机名
console.log(location.hostname);
 
// 获取当前页面的路径部分
console.log(location.pathname);
 
// 改变当前页面的URL，将页面重定向到指定URL
location.href = 'https://www.example.com';
    指向原始笔记的链接
  • child::Geolocation
  • child::

    读取_写入剪贴板

    1. 梗概:

    navigator.clipboard对象中有一些读取与写入剪贴板的方法 具体可以看官方文档

    2. 实例:

    // 读取剪贴板内容
navigator.clipboard.readText()
  .then(text => {
    console.log('剪贴板内容为:', text);
  })
  .catch(err => {
    console.error('读取剪贴板内容失败:', err);
  });
 
// 写入剪贴板内容
const textToCopy = '这是要复制到剪贴板的内容';
navigator.clipboard.writeText(textToCopy)
  .then(() => {
    console.log('成功复制到剪贴板:', textToCopy);
  })
  .catch(err => {
    console.error('复制到剪贴板失败:', err);
  });
    指向原始笔记的链接

5. 详细介绍:

https://zhuanlan.zhihu.com/p/372357616

关系图谱

反向链接