BOM（浏览器对象模型）

最新推荐文章于 2022-11-28 00:21:08 发布

小召小召

最新推荐文章于 2022-11-28 00:21:08 发布

阅读量202

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/originalApril/article/details/115276172

版权

前言

BOM: Browser Object Model 浏览器对象模型
       浏览器给我们提供的一套操作浏览器窗口的属性和方法。
       BOM的最顶层对象是window，本质也是一个对象，当我们打开了一个页面，这个页面中就有window对象
        对象是属性的无序集合。所有和BOM相关的api都是window.xxx。当我们在使用BOM中的属性时，window可以不写。
       我们定义的全局变量，或全局函数，默认情况下，也是挂载到window上面的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、BOM中的window对象

示例：

	<script>
        // 弹出框  理论上：window.alert();  window可以不写。
        // window.alert("hello BOM!")

        // a全局变量也会挂载到window上面
        var a=10;
        console.log(window.a);

        // 全局函数也会挂载到window上面
        function gn(){
            console.log("我是gn函数");
        }
        window.gn()
    </script>

二、浏览器窗口大小

浏览器窗口的尺寸：
        指的是浏览器容器的尺寸和 body的尺寸是不一样的。
        浏览器滚动条区域也是浏览器窗口的一部分，但是在MAC电脑上，是不算的。
        两个属性：
                 innerWidth
                  innerHeight

	<script>
        console.log(window.innerWidth);
        console.log(window.innerHeight);

        console.log("-------------");

        console.log(innerWidth);
        console.log(innerHeight);
    </script>

如下：
在这里插入图片描述

三、浏览器的弹出层

浏览器的弹出层：
在BOM中，浏览器提供了三个弹出层：

alert() 警告框弹出一段文本，只有一个确定按钮。返回值是und。
confirm() 选择框弹出一段文本，有一个确定按钮，也有一个取消按钮。当用户点击了确定，返回true，当用户点击了取消，返回false。
prompt() 输入框弹出一段文本，有一个input输入框，有一个确定按钮，也有一个取消按钮。如果用户点击了确定，返回值就是输入框中输入的内容，如果用户点击了取消，返回值就是null

特点：
阻止JS代码向下执行，因为JS的主线程是单线程。只有用户点击了取消或确定后，才会继续执行后续的代码。

1.alert（）

	<script>
        let res=window.alert("我是alert弹出层")
        console.log(res);
    </script>

如下：
在这里插入图片描述
控制台在弹出层结束后输出：

alert的返回值是undefined

2.confirm（）

	<script>
        let res=window.confirm("我是confirm弹出层")
        console.log(res);
    </script>

如下：
在这里插入图片描述
点击确定按钮，返回值为true：

点击取消按钮，返回值是false：
在这里插入图片描述

3.prompt（）

	<script>
        let res=window.prompt("请输入一个数字：")
        console.log(res);
    </script>

如下：
在这里插入图片描述
点击取消，返回值为null：

未输入内容，点击确定，返回值为空：

输入内容，点击确定，返回值为输入的内容：

四、浏览器的地址栏

浏览器的地址栏：
        在浏览器的地址栏中，可以输入一个URL地址。如：https://www.jd.com/
        https/http: 协议电脑与电脑之间通信的规则前后端交互的一个规则
        例：www.jd.com 域名 IP地址（每一个服务器都有一个IP地址）域名是和IP地址进行绑定通过域名就可以找到对应的IP地址

例：一个复杂的地址：
        https://list.jd.com/list.htmlcat=737,794,878&ev=266_2340&page=1&trans=1&JL=4_1_0#J_main
        /list.html ------是访问list.js.com这台服务器下面的list.html 路径
        ?cat=34134 & ev=23434 & page=1 & trans=1 ------是查询字符串（querystring），用来把数据传递给后端
        #abc 哈希值

        在window下面的有一个属性，叫location，也是一个对象，它里面存储着和地址相关的信息。
        hash: 获取当前url中的hash值
        href： 获取当前浏览器地址栏中的地址
                  如果地址中有中文，浏览器会对中文进行编码
                  也可以设置这个href，如果设置了，可以进行页面的跳转。
        search: 获取地址栏中的查询字符串（querystring）
                  解析查询字符串：就是把字符串中的数据提取出来。
        reload: 重新加载页面说白了，就是刷新和点击刷新按钮效果是一样的

1.href（）进行页面跳转

	<button id="btn">去百度</button>
    <script>
        let btn=document.getElementById("btn");
        btn.onclick=function(){
            window.location.href="http://www.baidu.com"
        }
    </script>

如下：
在这里插入图片描述

2.reload（）重新加载页面

	    <button id="btn2">重新加载页面</button>

		<script>
            btn2.onclick=function(){
                window.location.reload()
            }
     	</script>

如下：
在这里插入图片描述

3.解决查询字符串

目的： 将地址栏中携带的查询字符串（例：“?a=1&b=2&c=3”）转换成对象格式（例：{a:1,b:2,c:3}）。

	<script>
        let str="?a=1&b=2&c=3";
        // 解决查询字符串
        function parseQueryString(str){
            let obj={};
            if(str){
                // slice(1) 去掉第一位，保留后面所有数据
                // split("&") 把字符串转化为数组格式，并去掉连接符&
                let tem=str.slice(1).split("&");
                console.log(str.slice(1).split("&"));//["a=1", "b=2", "c=3"]

                // 遍历
                tem.forEach(item => {
                    // 转换为数组模式，去掉连接符=
                    var t=item.split("=")
                    console.log(t);//["a", "1"] ["b", "2"] ["c", "3"]
                    obj[t[0]]=t[1];//{a: "1", b: "2", c: "3"}
                });
            }
            return obj;
        }
        let res=parseQueryString(str);
        console.log(res);
    </script>

结果如下：
在这里插入图片描述

五、浏览器的历史记录

浏览器的历史记录：
操作浏览器的前进和后退。在window下有一个叫history的东西。
也是一个对象，它里面也包含了很多的属性和方法。

back()
window.history.back() 回到上一条历史记录

forword()
window.history.forward() 前进到下一条历史记录

go()
window.history.go(整数)

        go(1) 等价于 forword()
        go(-1)  等价于 back()

	<button id="back">上一个页面</button>
    <button id="forward">下一个页面</button>
    <script>
        back.onclick=function(){
            window.history.back()
        }
        forward.onclick=function(){
            window.history.forward()
        }
    </script>

结果：
在这里插入图片描述

六、浏览器的版本信息

浏览器的版本信息：
        是用来区分浏览器的
        在window上，有一个navigator对象，存储了浏览器的版本信息
        userAgent:表示浏览器的版本和型号信息
        platform:表示浏览器所在的操作系统

	<script>
        console.log(window.navigator);
    </script>

结果如下：
在这里插入图片描述

七、浏览器常见的事件

load事件 load本意是加载的意思 load表示等待body中的所有的资源全部加载完毕就行触发load事件。
scroll事件当浏览器的滚动条滚动时，触发用的非常多。
resize事件表示浏览器的窗口大小发生改变时触发。

1.load事件

问：能不能获取下面的button。
答：不能因为button按钮还没有加载完毕。在这里插入图片描述
解决方法：
（1）把JS代码放在最后面。
（2）使用load事件。
事件绑定：是异步代码
on表示前缀 load表示事件当body中所有的资源全部加载完毕后，就会触发load事件

	<script>
        window.onload=function(){
            let load = document.getElementById("load")
            console.log(load);
        }
    </script>
    <button id="load">load</button>

结果如下：
在这里插入图片描述

2.scroll事件

当浏览器窗口的滚动条滚动时触发。

	<style>
        html{
            height: 100%;
        }
        body{
            height: 300%;
        }
    </style>
    
    <script>
        window.onscroll=function(){
            console.log("滚动条滚动");
        }
    </script>

结果如下：
在这里插入图片描述

2.resize事件

当浏览器窗口大小发生改变时触发。

	<script>
        window.onresize=function(){
            console.log("浏览器窗口的大小发生了改变");
        }
    </script>

结果如下：

在这里插入图片描述

八、浏览器卷去的高度和宽度

浏览器卷去的高度和宽度：
        当页面比窗口宽或高时，就会产生滚动条
        向下滑动垂直滚动条，页面就向下钻，它钻上去的高度，叫卷去的高度
        向右滑动水平滚动条，页面就向左钻，它钻过去的宽度，叫卷去的宽度
卷去的高度：
        两个方式可以获取：
        1）document.documentElemnt.scrollTop 如果有< !DOCTYPE html>标签，使用document.documentElemnt.scrollTop
        2）document.body.scrollTop 如果没有< !DOCTYPE html>标签，使用document.body.scrollTop
卷去的高度:
        两个方式可以获取：
        1）document.documentElemnt.scrollHeight
        2）document.body.scrollHeight
卷去的宽度:
        两个方式可以获取：
        1）document.documentElemnt.scrollLeft
        2）document.body.scrollLeft

	<style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 300%;
            height: 300%;
        }
    </style>
    
    <script>
        window.onscroll=function(){
            //兼容式写法  卷去的的高度
            let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            console.log(scrollTop);

            //兼容式写法  卷去的的宽度
            let scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
            console.log(scrollLeft);
        }
    </script>

结果如下：
在这里插入图片描述

九、短路表达式

短路表达式：|| &&
就是深入学习一下逻辑运算符

1.逻辑或 ||

（1）false是假，决定不了整体的值，整体的值就依赖右侧的值，右侧的代码就会执行。只有前面的表达式是false时，才会执行后面的代码。
例：console.log( false || alert(“hello dom”));
结果：
在这里插入图片描述

（2）true是真，能决定整体的值，整体的值是真如果前面的表达式结果为true，后面的代码就不再执行了
例：console.log( true|| alert(“hello dom”));
结果：
在这里插入图片描述
（3）如果放在if语句中，整体会隐式转成布尔类型，转是值化后的值。

2.逻辑与 &&

（1）false已经决定了整体的值整体的值是false
例：console.log(false && alert(“hello dom”));
结果：
在这里插入图片描述

（2）逻辑与不会进行隐式类型转换，值是转化前的值，不是转化后的值。
例：console.log(1-1 && alert(“hello dom”));
结果：
在这里插入图片描述
（3）1+1不能决定整体的值，整体的值取决于后面的值，是转化前的值。
例：console.log(1+1 && 1-1);
结果：

（4）例：console.log(1+1 && “” && 0 && false);
结果： “ ”

3.赋值运算符 =

（1）+ || +的优先级高，先算1+1 = 2，2是true ，最终的结果不是转化后的值，是转化前的值。10+10不再运算了，|| 要求两侧都为boolea类型。
例：var n = 1 + 1 || 10 + 10; console.log(n);
结果：
在这里插入图片描述
（2）1-1=0 0隐式转成false false不能决定整体的值整体的值就是后面的值整体的值是转化前的值
例：var n = 1-1 || “”; console.log(n);
结果：

（3）例：var n = 1-1 || 10+10;console.log(n);
结果：