JavaScript之BOM

最新推荐文章于 2024-07-12 16:27:40 发布

橘猫吃不胖～

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量763

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46612221/article/details/121579481

版权

JavaScript 专栏收录该内容

68 篇文章 11 订阅

订阅专栏

1 BOM简介

1.1 什么是BOM

BOM：浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

1.2 DOM与BOM的区别

1、DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
2、BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。

1.3 BOM的构成

在这里插入图片描述

2 window对象的常见事件

2.1 窗口加载事件

window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

语法为：

//方式1
window.onload = function () { };
//方式2
window.addEventListener("load", function () { });

document.DOMContentLoaded： document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

示例：窗口加载完成后输出 “窗口加载完成” 这段文字

    <script>
        window.addEventListener("load", function () {
            alert("窗口加载完成");
        })
    </script>

在这里插入图片描述

2.2 调整窗口大小事件

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

语法为：

//方式1
window.onresize = function () { };
//方式2
window.addEventListener("resize", function () { });

示例：当窗口大小改变时，窗口的颜色变为粉色

<body>
    <script>
        //获取body元素
        var body = document.querySelector("body");
        //添加窗口大小改变事件
        window.addEventListener("resize", function () {
            body.style.backgroundColor = "pink";
        })
    </script>
</body>

窗口改变前：
在这里插入图片描述
窗口改变后：

3 定时器

定时器方法如下：

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

示例：使用setTimeout()实现3秒后自动在终端输出“3秒过去了”的效果

var timer = setTimeout(function () {
    console.log("3秒过去了");
}, 3000);//定时器以毫秒计时

3秒后，控制台输出了 “3秒过去了” 这段文字。

示例：加载页面时，终端每隔1秒输出一个1，点击取消定时器的按钮，终端停止输出1（通过clearTimeout()方法实现）

    <button>取消定时器</button>
    <script>
        //获取按钮元素
        var btn = document.querySelector("button");
        //设定定时器，使每秒在终端输出1
        function show() {
            console.log(1);
            timer = setTimeout(show, 1000);//全局变量
        }
        //启动页面时调用定时器
        window.onload = show();
        //给按钮绑定取消定时器的事件，点击按钮后取消输出1
        btn.addEventListener("click", function () {
            clearTimeout(timer);//清除定时器
        })
    </script>

在这里插入图片描述
点击按钮之后，终端停止输出1.

使用clearInterval()实现相同的效果，代码如下：

    <button>取消定时器</button>
    <script>
        //获取按钮元素
        var btn = document.querySelector("button");
        //设定定时器，使每秒在终端输出1
        function show() {
            console.log(1);
        }
        let timer = setInterval(show, 1000);
        //给按钮绑定取消定时器的事件，点击按钮后取消输出1
        btn.addEventListener("click", function () {
            clearInterval(timer);//清除定时器
        })
    </script>

注意：setTimeout()要放在循环中，每段时间调用一次，setInterval()放在循环外，只执行一次。

4 JavaScript执行机制

4.1 单线程

单线程：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

例如下面这一段代码，先输出1和2，等待5秒后，才会输出3，因此程序异步执行：

console.log(1);
setTimeout(function () {
    console.log(3);
}, 5000);
console.log(2);

4.2 异步和同步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：在做一件事件的同时，可以去处理其他的事情。

比如今天某人准备点外卖吃饭和扫地，同步的意思就是这个人先点外卖，然后等待外卖到来，外卖到达之后才开始扫地；异步的意思是这个人先点外卖，在等待外卖的过程中扫地。

4.3 执行机制

执行栈和任务队列如下图：
在这里插入图片描述
原理：

1、fn1和fn2是setTimeout()的处理函数，会放到任务队列中。
2、执行代码时，程序会在执行栈中一句一句执行。
3、首先执行第一句输出1。
4、然后执行第二句，但是fn1在任务队列中执行，可能需要执行一段时间，但是程序不会等fn1执行，而是继续执行第三句输出2。
5、然后执行第四句，fn1和fn2执行完成后只是返回一个结果给执行栈。

通过代码演示：

console.log(1);
setTimeout(function () {
    console.log(2);
}, 0)
for (var i = 0, str = ''; i < 900000; i++) {
    str += i;//利用字符串拼接拖慢时间
}
console.log(str)
console.log(3);

输出结果为：
1
拼接的字符串（由于过多不予展示）
3
2

解析：在执行上面的代码中，定时器函数是要放到任务队列中去执行的，其他的console.log(1)、for循环以及console.log(3)是在执行栈执行，因此输出时先输出执行栈中的结果，然后输出任务队列中的结果，任务队列中函数即使是0秒立刻执行也会被放在执行栈结果后面。

5 location（地址）对象

5.1 URL的组成

URL(Uniform Resource Locator)：统一资源定位符

各部分	说明
protocol	网络协议，常用的如http，https，ftp，mailto等
host	服务器的主机名，如www.baidu.com，本地机的名称：localhost—>127.0.0.1
port	端口号，共有65535个端口号，每个端口号对应一个服务，省略使用协议时的默认端口，如http默认端口为100 0_{1023：都被系统使用，有特定的服务<br>1024}65535：用户可以使用
path	路径，如“/web/index.html”，如“http://www.souhu.com”
query	查询参数，是传给服务器的参数，键值对的形式，参数和服务器地址之间通过“?”分割，参数和参数之间用“&”符号分隔，如访问本地机的服务器地址下的getData文件：http://localhost:8080/getData?id=“1001”&name=“张三”，“?”前面是服务器文件的地址，后面传入两个参数，id是参数名，1001是参数值，name是参数名，张三是参数值，意思是查询id为1001，name为张三的信息

5.2 location常用属性

属性	说明
location.search	返回（或设置）当前URL的查询部分（“?”之后的部分）
location.hash	返回一个URL的锚部分（从“#”开始的部分）
location.host	返回一个URL的主机名和端口
location.hostname	返回URL的主机名
location.href	返回完整的URL
location.pathname	返回URL的路径名
location.port	返回一个URL服务器使用的端口号
location.protocol	返回一个URL(网络)协议

示例：点击按钮跳转到百度的主页

    <button>去百度</button>
    <script>
        //获取button元素
        let btn = document.querySelector("button");
        //绑定click事件，点击之后跳转页面
        btn.addEventListener("click", function () {
            //方法1
            location.href = "https://www.baidu.com";
            //方法2
            // document.location = "https://www.baidu.com";
        })
    </script>

在这里插入图片描述
点击之后就会跳转到百度的主页。

示例：创建login.html登录页面，输入用户名之后，点击登录，会跳转到index.html页面中，并且页面中显示：“XX，欢迎您！”。

    <form action="index.html">
        用户名：
        <input type="text" name="uname">
        <button type="submit">登录</button>
    </form>

index.html页面中代码如下：

    <!-- 用来显示XX，欢迎您 -->
    <div></div>
    <script>
        //输出URL中'?'之后的部分（查询部分）
        console.log(location.search);
        //去掉查询参数前的'?'，输出要查询的参数
        let params = location.search.substr(1);//substr(start,length)获取从start到length长度的字符串
        console.log("查询参数：", params);
        //对参数进行分割，得到参数值
        let arr = params.split('=');
        console.log("数组：", arr);//输出分割参数后的数组
        //获取div元素
        var div = document.querySelector("div");
        //将参数值放入div中,decodeURIComponent()是JavaScript中的解码函数
        div.innerHTML = decodeURIComponent(arr[1]) + "，欢迎您!"
    </script>

在login.html中进行用户名输入：
在这里插入图片描述
点击登录之后，跳转到index.html页面中：

该页面控制台输出如下：

uname之后的乱码是因为中文输入用户名，因此需要用到JavaScript中的解码函数decodeURIComponent()，将该乱码转化成中文汉字。

5.3 location的常用方法

方法	说明
location.assign(url)	载入一个新的文档，会触发窗口加载并显示指定的URL的内容。
location.reload(true/false)	重新加载当前文档，刷新当前页面，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
location.replace(url)	用新的文档替换当前文档，覆盖浏览器当前记录。与assign()方法不同的是，调用replace()方法后，当前页面不会保存到会话历史中（session History），这样，用户点击回退按钮时，将不会再跳转到该页面。

示例：assign()

// 跳转到JavaScript定时器案例这篇文章
document.location.assign("https://blog.csdn.net/m0_46612221/article/details/121755501");

示例：reload()

// 无缓存刷新页面（但页面引用的资源还是可能使用缓存
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求）
window.location.reload(true);

示例：replace()

// 使用JavaScript定时器案例这篇文章覆盖当前文章
document.location.replace("https://blog.csdn.net/m0_46612221/article/details/121755501");

6 navigator对象

6.1 常用属性

属性	说明
appCodeName	返回浏览器的内部名称
appName	返回浏览器的完整名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用Cookie的布尔值
platform	返回运行浏览器的操作系统平台

6.2 常用方法

常用方法javaEnabled()：指定是否在浏览器中启用Java。

7 history对象

7.1 常用属性

history.length属性：返回历史列表中的网址数。

7.2 常用方法

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面

橘猫吃不胖～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之BOM

JavaScript之BOM1 BOM简介1.1 什么是BOM1.2 DOM与BOM的区别1.3 BOM的构成2 window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件3 定时器4 JavaScript执行机制4.1 单线程4.2 异步和同步4.3 执行机制5 location（地址）对象5.1 URL的组成5.2 location常用属性5.3 location的常用方法6 navigator对象6.1 常用属性6.2 常用方法7 history对象7.1 常用属性7.2 常用方法1 B
复制链接

扫一扫