前端javascript的BOM对象知识精讲-阿里云开发者社区

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

BOM对象

BOM：Browser Object Model，浏览器对象模型，提供一系列与浏览器相关的信息。

浏览器对象模型（Browser Object Model (BOM)）

不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

BOM对象：分为window对象和window子对象（screen对象，location对象，navigator对象，history对象）。

1.window对象

window对象是BOM顶层对象。

window对象是JS访问浏览器窗口的一个接口

window对象是一个全局对象,声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法。

其他window方法：

window.open() ：打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）。

window.close() ：关闭新打开的窗口（仅限open（）打开的窗口）。

window.moveTo()：移动当前窗口。

window.resizeTo()：调整当前窗口的尺寸。

1 //bom称为浏览器对象模型(bowser object model)，可以获取浏览器上所有的内容及相关操作
 2 //window对象
 3 console.log(window);//对象和window的构造函数
 4 //常用的弹窗方法及打印方法
 5 window.console.log('hello')//window 可以省略
 6 console.log('日志');//控制台 log日志 以日志的形式打印
 7 //以错误的形式打印
 8 console.error('错误');
 9 console.warn('警告');

10 //弹窗
11 window.alert('hello')
12 var isTrue=confirm('你确定要删除吗？')//交互框 true确认 false取消 返回
13 console.log(isTrue);
14 var str=prompt('请输入你的手机号')//输入框 返回的是string类型
15 //打开 关闭
16 //第一个参数是url地址，第二个是参数为title标题 target是设置打开方式，第三个参数为设置参数的（窗口的高度 宽度等）
17 window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')    
18 // 移动窗口位置
19 window.moveBy(100,100) //X+100 Y+100 移动位置
20 window.moveTo(200,200)  //从当前位置移动
21 //改变对应窗口大小
22 window.resizeBy(200,200)//改变大小
23 window.resizeTo(200,200) //从当前修改大小
24 //print打印方法
25 window.print()
26 window.focus()//聚焦
27 window.blur()//失去焦点
28 //滚动条栏位置改变
29         window.scrollBy(100,100)//在原本位置上面移动
30         window.scrollTo(0,550)//到达位置 回到顶部

/*
         ### BOM
         js BOM对象  : 针对于浏览器的控制   browser object model 
         js 中最大的对象 window 整个浏览器窗口出现的所有内容行为都是window对象中的成员;
 */

查看window里面的成员        
console.log(window)

// 1.弹出警告框
    // window.alert('你好')   //window 可以省略，没有返回值

alert没有返回值

// 2.确认弹窗，这个弹窗样式取决于浏览器
    // var res = window.confirm("确认弹窗")
    // console.log(res); // true / false

点确认返回true，取消返回false

// 3.等待输入弹窗

// var res = window.prompt(“请输入您的银行密码:”)

// console.log(res);

输入数据点确认后，结果返回，返回的是string类型

        // 4.关闭浏览器窗口，直接关闭当前页面的浏览器
        // window.close();
window对象的方法都可以不加window，因为window是最顶级的


        // innerHeight innerWidth 获取浏览器窗口内部的宽和高
        console.log(`浏览器窗口内部的宽度${window.innerWidth}`)
        console.log(`浏览器窗口内部的高度${window.innerHeight}`)

获取的是如下框柱，显示出来的窗口大小

    window.open() 第一个参数是url地址，第二个是参数为title标题 target是设置打开方式，第三个参数为设置参数的（窗口的高度 宽度等）   
默认是在当前页面打开新窗口
 // window.open("http://www.baidu.com","_self"); // 在当前页面跳转
  // window.open("http://www.baidu.com","_blank","width=500,height=500");   // 在新窗口页面跳转，参数之间加逗号


// var声明的变量在全局直接声明出来的. 自动进window
        // 不在函数中, 用var声明的变量自动进window
        // var alex = "alexis not a ssb is dsb"; // 全局变量 -> 进入window中
        // (function(){
        //     // // 局部变量和python是一样的
        //     // let hahahahaha = "alex";
        //     // // 全局?
        //     // window.hahahahaha = hahahahaha;
        //     // 省略了window
        //     // hahahahaha = "呵呵"; // 向window中存放数据
        //     // var hehe = "alex";   //函数内部使用var声明的变量，在函数外也不能使用
        //     console.log(window.alex); // A ok  B 報錯
        // })();
        // var 呵呵呵 = "我的天哪"; // 全局, 进window
        //
        // console.log(window.呵呵呵);
        //

        // window中的内容进行使用的时候， 可以省略window
        // console.log(hehe); //能A  不能B

        // window -> 窗口
        // 跳转连接
        // setTimeout(function(){
        //     // 自动跳转到某一个url地址
        //     // 在js里可以调整当前url的地址
        //     window.location.href="http://www.baidu.com?t="+new Date().getTime();
        // }, 10);

2.定时器

定时器种类(两种):基于单线程的异步并发程序; 返回id号

window.setInterval(函数名,间隔时间(毫秒)) // 定时执行多次任务

window.setTimeout(函数名,间隔时间(毫秒)) // 定时执行一次任务

终止任务
window.clearInterval(id号)  // 清除定时器 setInterval
window.clearTimeout(id号)   // 清除定时器 setTimeout



var num = 1
function func(){
    console.log(`我执行了${num}`);
    num++;
}

var id1 = window.setInterval(func,1000);
var id2 = window.setTimeout(func,2000);
console.log(id1,"id1")
console.log(id2,"id2")
console.log("我执行完了....")
window.clearInterval(id1)

定时执行多次任务，设置每秒执行一次

由下执行完了，却还在执行可知是异步执行

setTimeOut 只执行一次，第二个参数意思是等待多久执行，单位是毫秒

时钟—年月日时分秒

关于浏览器上看到的url的时间戳，是由于浏览器对于本次访问会生成缓存到浏览器本地

而有些url，本身开发者不希望下次请求时看到的是浏览器缓存，比如实时查看订单的url，用户需要每次拿到最新数据

前端工程师，就在每次请求的url时加个时间戳。这样每次请求的url都是新的。不会由于url一致看到原来的缓存。而是新的请求，能拿到最新数据

web页面时钟展示源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        #clock
        {
            width:500px;
            height:50px;
            border:solid 1px red;
            border-radius: 25px;
            text-align: center;
            line-height: 50px;
            background-color:bisque;
            color:red;
            position:absolute;
            left: 30%;
            top: 30%;
        }
    </style>
</head>
<body>
    <div id = "clock"></div>
    <script>

       // 获取文档节点对象,通过class获取的是设为相同class的元素的数组，id获取的是单个元素，因为id不能重复
       var obj = document.getElementById("clock");
        // console.log(obj)  //打印的是上面id为 clock的 div
        function myclock(){
            var d = new Date()
            // console.log(d)
            // 获取年份
            var year = d.getFullYear()
            // 获取月份，月份范围 0 ~ 11   0代表1月份
            var month = d.getMonth()
            // 获取天数
            var day = d.getDate()
            // 获取小时
            var hour = d.getHours()
            // 获取分钟
            var minute = d.getMinutes()
            // 获取秒数
            var sec = d.getSeconds()
            strvar = `现在时间是:${year}-${month+1}-${day} ${hour}:${minute}:${sec}`
            // 将字符串插入obj节点对象
            obj.innerHTML=strvar

            // 清除定时器的效果
        //     if(minute == 51){
        //         clearInterval(id);
        //     }

        }


        var id = window.setInterval(myclock,1000)

    </script>
</body>
</html>

// 重点.时间戳

       //http://www.baidu.com/s?t=1651231231
       // 在编程的世界里. 可以用一个数字来描述时间点
       // 从1970-01-01 00:00:00开始. 每过1秒.计数1000
       let d1 = new Date();
       console.log(d1.getTime()); // getTime是获取时间戳
       // 前端时间戳的单位是毫秒
       // 在python中时间戳单位是秒

       //
       // let d2 = new Date; // 这里也是创建时间对象
       // console.log(d2.getTime());
       //
       // let arr = new Array;
       // console.log(arr);

# # python: 1654001118778.3303
# # 前端   : 1654000975731
# print(time.time())
#
# # 需要你模拟出前端的 时间戳
# # 这里拿时间戳 -> 对应前端的getTime()
# t = int(time.time() * 1000)

3.screen对象

包含显示设备的信息

screen.height、screen.width：返回设备的分辨率。

screen.availWidth、screen.availHeight：返回屏幕可用宽高，值为屏幕的实际大小减去操作系统某些功能占据的空间，如系统任务栏。

4.location对象

保存当前文档信息，将URL解析为独立片段

location.href 返回当前页面完整的URL ,修改这个属性，即跳转新页面

location.hash 返回URL中的hash（#号后跟零或多个字符）

location.host 返回服务器名称和端口号

location.port 返回服务器端口号

location.pathname 返回URL中的目录和文件名

location.hostname 返回不带端口号的服务器名称

location.protocol 返回页面使用的协议（http://或https://)

location.search 返回URL的查询字符串，字符串以问号开头

//location
        console.log(location.hash); //哈希 #后面带的值和search不能同时使用
        console.log(location.host); //主机 域名 ip地址+端口号
        console.log(location.hostname);//主机名 ip地址
        console.log(location.protocol);//协议 用于通信 （基于tcp/ip）http（明文传输）https（安全，加密）
        console.log(location.port);//端口号 1--65525 (1-100的端口号被电脑占用)http默认的端口号80 https默认端口443
        console.log(location.href);//链接的地址，也可以设置
        console.log(location.search);//？后面带的值 一般是get请求传输数据的时候
        console.log(location.origin);//跨域
        console.log(location.pathname);//路径名 获取的除了协议和ip地址
        //使用href来跳转页面  通过更改路径地址来实现跳转
        //location.href='http://www.baidu.com'
        //相关方法
        location.assign('http://www.4399.com')//跳转页面 保存历史记录
        //替换
        location.replace('http://www.weibo.com')//直接替换
        //重新加载页面
        function fn(){
            location.reload(true)//参数是boolean类型的值 true（从服务器加载） false（从缓存中加载）
        }

        // window -> 窗口
        // 跳转连接
        // setTimeout(function(){
        //     // 自动跳转到某一个url地址
        //     // 在js里可以调整当前url的地址
        //     window.location.href="http://www.baidu.com?t="+new Date().getTime();
        // }, 10);

5.navigator对象

提供一系列属性用于检测浏览器

window.navigator.userAgent ：通过userAgent可以判断用户浏览器的类型

window.navigator.platform：通过platform可以判断浏览器所在的系统平台类型

window.navigator.online：判断是否联网

appCodeName 获取浏览器的内部代码名。

appMinorVersion 获取浏览器的辅版本号，常用于浏览器的补丁货服务包。

appName 获取浏览器的名称。

appVersion 获取浏览器的平台和版本信息。

language 获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”。

cookieEnabled 获取浏览器中是否启用 cookie 的布尔值。

cpuClass 获取计算机系统的 CPU 型号，例如，Inter通常得到的结果是x86。

onLine 获取浏览器是否处于在线模式，结果是布尔值。

platform 获取运行浏览器的操作系统平台。

systemLanguage 获取 OS 使用的默认语言。

userAgent 获取由客户机发送服务器的 user-agent 头部的值。

userLanguage 获取 OS 的自然语言设置。

mimeTypes 获取浏览器支持的所有的MIME类型的数组。

plugins 获取安装在浏览器上的所有插件的数组。

product 获取浏览器的产品名，例如，可能的结果是Gecko。

productSub 获取浏览器产品的更多信息，例如，可能的结果是20030107。

vendor 获取浏览器的厂商名称，例如，可能的结果是Google Inc.。

vendorSub 获取浏览器的厂商更多信息。

查看navigator有哪些属性

 console.log(navigator);
console.log(navigator.platform)  // 判断是pc端还是移动端
console.log(navigator.userAgent) // 通过userAgent可以判断用户浏览器的类型，在爬虫程序中,可以伪造成浏览器进行数据爬取,绕开服务端的反爬机制;

6.history 对象

history.back()：与在浏览器点击后退按钮相同

history.forward()：与在浏览器中点击按钮向前相同

history.go(参数)：前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面

history.length(): 保存历史记录的数量

//length 历史页面个数，只能记录本页面中跳转的次数，其他页面只有在跳转到本页面后才记录
        console.log(history.length);//要记
        //scrollRestoration 滚动恢复属性 auto:自动 manual:手动操作 (keep-alive 缓存)
        console.log(history.scrollRestoration);
        //state 状态值 null
        console.log(history.state); //要记
        function fn(){
            history.forward()//前进
        }
        function fn1(){
            history.back()//后退
        }
        function fn2(){
            history.go(1)//去任意页面，0就是自己，小于0，后退，大于0前进
        }
        function fn3(){
            //添加state的值 数据 "" 地址 
            history.pushState('hello','','./index.html')
            //会改变地址，但是不会刷新，会推一个页面到历史区，价值更高
        }
        function fn4(){
            history.replaceState('world','','dizhi')//会改变地址，但是不会刷新，在历史区直接修改当前这个页面
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="func1()">查看历史对象</button>
    <button onclick="func2()">跳转到上一页</button>
    <button onclick="func3()">跳转到下一页</button>
    <button onclick="func4()">当前页面刷新</button>
    <script>
        function func1(){
            console.log(history);
        }

history.length记录当前页面跳转的页面个数

function func2(){
    history.go(-1);
}

执行这个函数相当于点击了浏览器的上一页

function func3(){
    // history.go(1);
    history.go(2);
}

function func4(){
    history.go(0);   //刷新当前页
}

onload, 当页面加载完html的时候.自动执行   防止页面还没加载完，就执行js代码，获取不到数据
        // // xxxx.onxxx = function(){} 这种逻辑也能绑定事件
        // window.onload = function(){
        //     // 页面中的内容还没有被加载好. 你就去选择页面上的东西. 此时拿到不到结果
        //     let btn = window.document.querySelector("#btn");
        //     // // console.log(btn);
        //     // // 有的时候. 爬虫的时候. script会放在上面或者放在下面
        //     // btn.onclick = function(){
        //     //     console.log("你点我干嘛!!!!!!");
        //     // }
        //
        //     // 最正宗的添加事件绑定的方案
        //     btn.addEventListener('click', function(){
        //         console.log("哈哈哈哈啊哈哈哈");
        //     })
        // }
        
window.onload = function(){
            let btn = document.querySelector("#btn")
            btn.onclick = function(){
                // 先拿到那个input. 输出东西
                let input = document.querySelector("#uname");
                input.value = "胡辣汤";
                // html -> 触发 js事件  ->  修改和处理html结构
                // 以后见到的页面异步加载数据
            }
        }

前端javascript的BOM对象知识精讲

BOM对象

1.window对象

2.定时器

3.screen对象

4.location对象

5.navigator对象

6.history 对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端javascript的BOM对象知识精讲

BOM对象

1.window对象

2.定时器

3.screen对象

4.location对象

5.navigator对象

6.history 对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景