js BOM详解

Browser object model 浏览器对象模型

BOM 比 DOM 更大，它包含 DOM

它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window

alert()、prompt() 等函数都是window全局对象下的方法，window可以省略不写

本篇介绍一些DOM中常用的接口（方法）

定时器

定时器又叫间歇函数，可以理解为延迟执行函数

setTimeout

当指定时间到达，代码执行一次并结束

// 开启定时器
// 参数1：执行的函数；参数2：延迟的时间（毫秒）
// 返回值：定时器开启次数
setTimeout(function(){
	console.log('1s后执行')
},1000)

// 清除定时器(需要给定时器命名)
let timer = setTimeout(function(){
    console.log('1s后执行')
},1000)
// clearTimeout方法清除
clearTimeout(timer);

SetInterval

每隔一段时间，执行一次函数

// 开启定时器
// 参数1：执行的函数；参数2：延迟的时间（毫秒）
// 返回值：定时器开启次数
setInterval(function(){
	console.log('每隔1s执行一次');
},1000)

// 清除定时器(需要给定时器命名)
let timer = setInterval(function(){
	console.log('1');
},1000)
// clearInterval方法清除
clearInterval(timer);

location

location对象存储与地址相关的信息

属性/方法	说明
location.href	返回完整地址
location.search	返回参数 （地址?后的参数）
location.hash	返回哈希值（地址#后的参数）
location.reload()	刷新页面（传参true为强制刷新）
location.hostname	返回主机的域名
location.pathname	返回当前页面的路径和文件名
location.port	返回主机的端口
location.protocol	返回所使用的 web 协议（http: 或 https:）

// 举例：https://www.baidu.com/?age=10#aaa

location.href        'https://www.baidu.com/?age=10#aaa'
location.search      '?age=10'
location.hash        '#aaa'
location.hostname    'www.baidu.com'
location.pathname    '/'
location.port        ''
location.protocol    'https:'

navigator

navigator对象存储与浏览器相关的信息

navigator.userAgent	返回一个字符串，包含浏览器版本与平台信息
navigator.language	返回一个字符串，表示用户当前偏好语言
navigator.cookieEnabled	返回一个布尔值，表示当前浏览器是否启用cookie
navigator.clipboard	返回一个对象，包含剪切板内容
navigator.geolocation	返回一个对象，包含设备的位置信息

navigator.userAgent        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0'
navigator.language         'zh-CN'
navigator.cookieEnabled    true

获取用户剪切板内容

// <div>复制我</div>
const box = document.querySelector('div');
// data就是用户复制的内容
box.oncopy = function () {
    const obj = navigator.clipboard;
    obj.readText().then(
        function(data){
            console.log(data)    
        },
        function(err){
            console.log('用户拒绝访问剪切板')
        })

    // 可以使用writeText方法来修改剪切板内容
    obj.writeText(123)
}

获取地理位置 

PC的定位是由IP地址决定，位置会偏差

// <div>点击我获取坐标</div>
var box = document.querySelector('div');
box.onclick = function () {
    navigator.geolocation.getCurrentPosition(fun, error);
}
function fun(position) {
    console.log("Latitude(纬度): " + position.coords.latitude)
    console.log("Longitude(经度): " + position.coords.longitude)
}
function error(err) {
    switch (err.code) {
        case err.PERMISSION_DENIED:
            console.log("用户不允许地理定位");
            break;
        case err.POSITION_UNAVAILABLE:
            console.log("无法获取当前位置");
            break;
        case err.TIMEOUT:
            console.log("获取位置超时");
            break;
        case err.UNKNOWN_ERROR:
            console.log("未知的错误");
            break;
    }
}

history

用于浏览器页面的前进和后退

history.forwrad()	前进
history.back()	后退
history.go(1)	1等于前进1次，-2等于后退2次

后退一次 

// <div>后退</div>
const box = document.querySelector('div');
box.onclick = function(){
    history.back();
}

本地存储

将数据存储在浏览器中，一般用来存储验证密钥、账号等等

Edge浏览器的本地存储界面

以键值对的形式存储

localStorage

本地存储：永久存储，存储5M-10M以内的数据（字符串）

// 参数1:密钥名(键)
localStorage.setItem('user','张三'); // 存储数据('张三'为密钥的值)
localStorage.getItem('user');		// 查询数据
localStorage.removeItem('user');	// 删除数据

sessionStorage

会话存储：关闭浏览器时删除

sessionStorage.setItem('user', '张三'); // 存储数据
sessionStorage.getItem('user');		   // 查询数据
sessionStorage.removeItem('user');	   // 删除数据

MDN文档：Web API 接口参考 | MDN (mozilla.org)