JavaScript 的BOM对象

JavaScript 的BOM对象

1、BOM对象的概念

• 1、BOM对象——Browser Object Model，浏览器对象模型
• 2、BOM提供了一个核心对象——window
• 3、window核心属性

属性	说明
history	历史记录
navigator	浏览器相关信息
location	地址栏
screen	屏幕分辨率
document	DOM，文档

• 4、window方法 alert（）、prompt（）等
• 5、注意：在调用window的属性或方法是，window可以省略不写

2、window中的对话框

• 1、警告框alert（）
• 2、输入框prompt（）
• 3、确认框confirm（），按确定按钮则返回true，其他操作均返回false

	if(confirm("是否确定")){
     	alert("确定");
    }else {
        alert("取消");    
    }

3、window中的定时器

• 1、周期性定时器
  • 作用：每隔一段时间后，执行一遍指定的程序
  • 声明：var ret = setInterval（fun，time）

属性	说明
fun	要周期性执行的操作
time	时间间隔周期，单位ms

  返回值：已创建好的定时器对象
  clearInterval（timer）：清除周期性定时器，timer 为已创建好的定时器

	var ret;   // 全局变量
    function start() {
        ret = setInterval(function () {
            var now = new Date();
            console.log(now.toLocaleString())
        },2000)
    }
    function stop() {
        clearInterval(ret);
    }
    <button onclick="start()">开始定时器</button>
    <button onclick="stop()">结束定时器</button>

• 2、一次性定时器
  • 作用：在指定的时间间隔后，执行一次指定的程序
  • 声明：var ret = setTimeout（fun，time）

属性	说明
fun	指定时间间隔后要执行的操作
time	时间间隔单位ms

  返回值：已启动的定时器对象
  clearTimeout（timer）：清除一次性定时器，timer 为已启动的定时器

 	var timer;
    function timeoutStart() {
         if(confirm("确认打印输出吗？")){
             alert("请等待5秒");
             timer = setTimeout(function () {
                 document.write("hello world")
             },5000)
         }else{
             alert("取消")
         }
     }
     function timeoutStop() {
         clearTimeout(timer)
     }
    <button onclick="timeoutStart()">开始定时器</button>
    <button onclick="timeoutStop()">结束定时器</button>

4、window中的属性

• 1、screen：获取客户端显示器相关信息

属性	说明
width	宽
height	高
availWidth	可用宽
availHeight	可用高

	function screenInfo() {
        var w = screen.width;
        var h = screen.height;
        console.log("宽度：" + w + "，高度：" + h);   // 宽度：1366，高度：768
        var aw = screen.availWidth;
        var ah = screen.availHeight;
        console.log("可用宽度：" + aw + "，可用高度：" + ah);  // 可用宽度：1304，可用高度：768
    }
    <button onclick="screenInfo()">屏幕信息</button>

• 2、history：包含当前串口所访问的url地址

属性	说明
length	访问过的url数量

方法	说明
back（）	后退
forward（）	前进
go（num）	访问历史记录中的第 num 个url

• 3、location：浏览器地址栏上的信息

属性	说明
href	当前浏览器中地址栏上的url，如果设置值，相当于浏览器的调整功能

方法	说明
reload（）	刷新网页

    function SCDN() {
        location.href = "https://www.csdn.net/"
    }
    <button onclick="SCDN()">去往CSDN</button>

• 4、navigator：浏览器的相关信息

属性	说明
userAgent	浏览器相关信息

	function UA() {
        console.log(navigator.userAgent);
        // Mozilla/5.0 (Windows NT 6.1; Win64; x64) ....
    }
    <button onclick="UA()">浏览器UA</button>

• 5、document ：Document Object Model，文档对象模型