你用过js中BOM对象的哪些API?

全局对象

• window：表示当前窗口或者全局环境。

// 获取当前窗口的标题
const title = window.document.title;

• document：表示当前文档对象。

// 获取当前文档的URL地址
const url = document.URL;

屏幕信息

• screen.availWidth和screen.availHeight：表示屏幕可用宽度和高度，即不包括任务栏、工具栏等非内容区域。

// 获取屏幕可用宽度和高度
const availWidth = screen.availWidth;
const availHeight = screen.availHeight;

• screen.width和screen.height：表示整个屏幕的实际宽度和高度。

// 获取屏幕实际宽度和高度
const actualWidth = screen.width;
const actualHeight = screen.height;

窗口信息

• innerWidth和 innerHeight：表示浏览器当前窗口的可视区域大小，即不包括浏览器的菜单栏、工具栏等非内容区域。

// 获取浏览器窗口的可视区域大小
const viewWidth = window.innerWidth;
const viewHeight = window.innerHeight;

• outerWidth和outerHeight：表示浏览器当前窗口的外部大小，即包括浏览器的菜单栏、工具栏等非内容区域。

// 获取浏览器窗口的外部大小
const outerWidth = window.outerWidth;
const outerHeight = window.outerHeight;

滚动条

• scrollTo()和scrollBy()：用于滚动浏览器窗口中的内容，分别可以滚动到指定位置或者根据当前位置滚动一定距离。

// 将页面滚动到(0, 500)位置
window.scrollTo(0, 500);
​
// 将页面向下滚动50像素
window.scrollBy(0, 50);

窗口操作

• resizeTo()和resizeBy()：用于调整浏览器窗口的大小，分别可以把窗口调整到指定大小或者根据当前大小调整一定量。

let w = window.open('','', 'width=100,height=100');
w.focus();
// 将浏览器窗口大小调整为宽度500px，高度600px
w.resizeTo(500, 600);
​
// 将浏览器窗口大小增加100px
// w.resizeBy(100, 100);
​
w.focus();

弹窗操作

• alert()：弹出一个包含指定消息和 OK 按钮的警告框。

alert('Hello, world!'); // 显示消息 "Hello, world!" 并等待用户点击 OK 按钮

• confirm()：弹出一个包含指定消息、OK 和 Cancel 按钮的确认对话框，并返回用户选择的布尔值。如果用户点击 OK，返回 true；如果用户点击 Cancel，返回 false。

let confirmed = confirm('Are you sure?'); // 显示询问消息并等待用户点击 OK 或 Cancel 按钮
if (confirmed) {
  console.log('User clicked OK.');
} else {
  console.log('User clicked Cancel.');
}

• prompt()：弹出一个包含指定消息、文本输入字段和 OK 和 Cancel 按钮的提示框，并返回用户输入的字符串。如果用户点击 OK，则返回用户输入的字符串，如果用户点击 Cancel，则返回 null。

let inputVal = prompt('Please enter your name:', ''); // 显示提示消息和文本输入框，并等待用户输入和点击 OK 或 Cancel 按钮
if (inputVal !== null) { // 如果用户点击了 OK
  console.log('User entered:', inputVal); // 输出用户输入的内容
} else { // 如果用户点击了 Cancel
  console.log('User clicked Cancel.');
}

URL信息

• location：表示当前页面的URL信息，提供了许多操作URL的方法和属性。

console.log(window.location)

历史记录

• history：表示浏览器的历史记录，提供了许多操作历史记录的方法和属性。

// 后退一步
window.history.back();
​
// 前进一步
window.history.forward();
​
// 刷新当前页面
window.history.go(0);
​
// 后退两步
window.history.go(-2);
​
// 前进三步
window.history.go(3);
console.log(window.history.length); // 获取当前历史记录长度

浏览器信息

• navigator：表示浏览器本身的信息，包括浏览器厂商、版本、语言等，提供了一些判断浏览器类型和特性的方法和属性。

console.log(window.navigator)

定时任务

• setInterval()和setTimeout()：可以周期性或者延时执行指定的函数。
• clearTimeout()和clearInterval()：用于取消之前通过setTimeout()和setInterval()创建的延迟任务。

function myFunction() {
  console.log('定时器触发！');
}
// setInterval
let timerId = window.setTimeout(myFunction, 3000);
​
// 取消定时器
window.clearTimeout(timerId);

针绘制

• requestAnimationFrame和cancelAnimationFrame:方法告诉浏览器您希望执行动画并请求浏览器调用指定函数在下一次重绘之前更新动画。相当于延迟了一帧执行脚本，避免了会导致抖动和闪烁的操作（例如 DOM 操作）与浏览器渲染造成冲突的情况。

<div id="circle"></div>
<script>
    const circle = document.getElementById('circle');
    let angle = 0; // 初始角度为 0
    function animate() {
        angle++; // 每次更新角度值
        circle.style.transform = `rotate(${angle}deg)`; // 应用新的 CSS 变换
        requestAnimationFrame(animate); // 递归调用自身，实现动画效果
    }
    // 开始播放动画
    requestAnimationFrame(animate);
</script>
<style>
    #circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: blue;
    }    
</style>

跨域消息

• postMessage(message, targetOrigin) 向其他窗口发送跨域消息

// 发送消息
window.postMessage('Hello from the parent window!', 'http://example.com');
​
// 接收消息（需要在子窗口中添加事件监听器）
window.addEventListener('message', function(event) {
  if (event.origin === 'http://example.com') {
    console.log('Received message:', event.data);
  }
});

还有其他一些不常用的API，不过这些API已经足够满足大部分Web开发需求了。需要注意的是，BOM并不是W3C标准定义的一部分，不同浏览器厂商实现的BOM可能存在一些差异。