【JS】BOM

140 阅读3分钟

BOM 全称 Browser Object Model,译为浏览器对象模型。

BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API

一、window

  1. window 是 JS 中的全局对象, 表示浏览器窗口, 在打开浏览器窗口的时候,window 对象会自动创建

  2. 所有的全局变量都是 window 的属性,Array、Number、String、isNaN 等都是 window 的属性

    var a = 10;
    console.log(window.a == a); //true
    
  3. 使用 window 的属性可以省略 window

1. 弹框

方法含义返回值
alert()警告框
prompt()输入框输入的内容(string)
confirm()确认框true/false

2. 打开新窗口

方法含义
open()打开窗口
close()关闭窗口,只有open打开的才能使用close关闭
print()调用预览
window.open()	//打开空白窗口
window.open('地址')	//设置窗口中网页文件地址
window.open('地址','窗口的名字')	//覆盖旧窗口,打开新的窗口
window.open('地址','','width=400,height=400')	//打开窗口并设置大小

3. 页面滚动

滚动到指定位置:

window.scrollTo(0, 0);

window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})

滚动多少距离:

window.scrollBy(0, 0);

window.scrollBy({
    left: 0,
    top: 600,
    behavior: 'smooth'
})

4. 定时器

  • 多次定时器:

    可以重复调用一个函数,每次调用之间具有固定的时间间隔

    第一个参数是函数,第二个参数是间隔时间,从第三个参数开始表示传入函数内的实参

    // 创建一个定时器
    function func(a, b) {
        console.log(a, b);
    }
    setInterval(func, 2000, 1, 2);
    
    // 清除多次定时器
    clearInterval()			
    
  • 单次定时器:

    当指定时间到了,执行函数一次,不再重复执行

    // 创建一个单次定时器
    function func(a, b) {
        console.log(a, b);
    }
    func(1, 2)
    setTimeout(func, 2000, 33333, 2323)	
    // 清除单次定时器
    clearTimeout()			
    

5. window 对象属性和方法总结

developer.mozilla.org/zh-CN/docs/…

属性含义
name设置或读取窗口的名字
length获取子窗口的数量
innerWidth获取视口的宽度
innerHeight获取视口的高度
history获取浏览器的会话历史
location获取当前位置的信息
navigator包含有关访问者浏览器的信息
screen获取和屏幕有关属性
document文档类型,是DOM对象不是BOM对象
方法含义
alert()显示一个带有可选的信息的对话框
confirm()显示确认或取消对话框
prompt()提示输入一些文本
open()打开新窗口
close()关闭窗口
print()打印当前文档
scrollTo()滚动到文档中的某个坐标
setTimeout()
clearTimeout()
延时器
setInterval()
clearInterval()
定时器

二、history

history 用于表示本窗口的历史记录,相关属性方法如下:

属性/方法含义
length获取历史纪录的个数
back()后退一步
forward()前进一步
go(n)前进或后退n步,n是正数前进,n是负数后退

三、location

location 用于表示本窗口的地址信息,相关属性方法如下:

属性/方法含义
href设置或读取完整的url
protocol设置或读取协议
host设置或读取主机名+端口号
port设置或读取端口号
pathname设置或读取路径名
hash设置或读取锚点部分
search设置或读取查询字符串
reload()重新加载本页面
assign()跳转到指定的页面
replace()跳转到指定的页面,当前页面在历史纪录中会被覆盖

四、navigator

navigator 用于表示浏览器的版本信息以及操作系统的相关信息,属性如下:

属性含义
userAgent获取浏览器信息

五、screen

screen 用于表示屏幕信息,相关属性如下:

属性含义
width获取屏幕宽度
height获取屏幕高度