JavaScript BOM浏览器对象模型

最新推荐文章于 2024-04-23 09:10:13 发布

grt要一直一直努力呀

最新推荐文章于 2024-04-23 09:10:13 发布

阅读量99

点赞数 1

分类专栏： JS基础文章标签： javascript js 前端

本文链接：https://blog.csdn.net/qq_44870115/article/details/119670752

版权

JS基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

BOM(Browser Object Model)是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM有一系列对象构成。没有标准，兼容性比较差。

DOM的核心对象是document。

BOM比DOM更大，包含了DOM。

在这里插入图片描述

window对象的常见事件

页面加载事件

window.onload()是窗口页面加载事件，当文档内容完全加载完成后会触发该事件。有了该事件，就可以把JavaScript代码放到页面的任何地方。

DOMContentLoaded事件，仅当DOM加载完成就触发，不包括样式表，图片等。可以看出该事件比上述onload事件加载更快。

<!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>Document</title>
</head>

<body>
    <script>
        window.addEventListener('load', function() {
            alert(123)
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(12345)
        })
    </script>
</body>

</html>

执行代码可以发现，先弹出12345，再弹出123。

调整窗口大小事件

当浏览器窗口大小变化时，会触发该事件。
window.onresize

<!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>Document</title>
</head>

<body>
    <script>
        window.addEventListener('resize', function() {
            console.log('窗口大小发生变化')
        })
    </script>
</body>

</html>

定时器

setTimeout()

语法：window.setTimeout(调用函数，延迟的毫秒数)
在定时器到期后执行调用函数。window调用的时候可以省略。

这里面的调用函数称为回调函数callback，需要等待时间到了，才调用。

<!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>Document</title>
</head>

<body>
    <script>
        setTimeout(function() {
            console.log('2s时间到了');
        }, 2000)

        function fn() {
            console.log('三秒时间到了');
        }
        //注意这两种调用方法均可以
        setTimeout(fn, 3000)
        setTimeout('fn()', 3000)
    </script>
</body>

</html>

停止定时器
window.clearTimeout(timeoutID)

经常给定时器起一个名字，clearTimeout里面放的就是定时器的名字。

<!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>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button')
        var timer = setTimeout(function() {
            console.log('5s时间到了');
        }, 5000)
        btn.addEventListener('click', function() {
            window.clearTimeout(timer)
        })
    </script>
</body>

</html>

setInterval()

语法：window.setInterval(调用函数，间隔的毫秒数)
每隔一个时间，就去调用一次回调函数。

<!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>Document</title>
</head>

<body>
    <script>
        var timer = setInterval(function() {
            console.log('2s时间到了');
        }, 2000)
    </script>
</body>

</html>

同样，这个定时器也可以停止。
语法：window.clearInterval(intervalID)

this指向问题

<!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>Document</title>
</head>

<body>
    <script>
        //一般情况下，this的最终指向的是那个调用它的对象

        //全局作用域或普通函数中this指向全局对象window，定时器里面的this指向window
        console.log(this);

        function fn() {
            console.log(this);
        }
        fn()

        //方法调用中，谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this);//指向o这个对象
            }
        }
        o.sayHi()


    </script>
</body>

</html>

JavaScript执行机制

JavaScript语言的一大特点是单线程，就是同一个时间只能做一件事。这样的话就会有一个问题，就是前面有一段代码执行时间过长，使得下面代码无法执行。

Javascript最新的标准，允许JavaScript脚本创建多个线程。为了解决这个问题，就提出了同步和异步。

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

异步：在做这件事的同时，还可以处理其他事情，例如烧水的同时还可以切菜。

Javascript的执行机制是将所有的同步任务放到主线程的执行栈中。JavaScript的异步是通过回调函数实现的。常见的异步任务有以下三种类型

普通事件 click、load 不点击是不会添加到任务队列中。
资源加载 load、error
定时器 setInterval、setTimeout
异步任务相关回调函数添加到任务队列中。

JavaScript的执行机制是：

先执行执行栈中的同步任务。
异步任务放入任务队列中。
一旦执行栈中的所有同步任务执行完毕后，系统会依次读取任务队列中的异步任务。

location对象

location属性用于获取或设置窗体的URL，或者用于解析URL。返回的是一个对象。

在url中？后面的是query。表示参数，以键值对的形式，通过&符号分隔开来。
#后面内容是片段，常见于链接、锚点。

location对象的属性

对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机域名
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

<!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>Document</title>
</head>

<body>
    <!-- //点击按钮实现跳转页面 -->
    <button>按钮</button>
    <div></div>
    <script>
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        var timer1 = 5
        btn.addEventListener('click', function() {
                location.href = 'https://hao.360.com/?a1004'
            })
            //5s后实现自动跳转页面
        var timer = setInterval(function() {

            if (timer1 == 0) {
                location.href = 'https://hao.360.com/?a1004'
            } else {
                div.innerHTML = '将在' + timer1 + '秒后跳转页面'
                timer1--
            }
        }, 1000)
    </script>
</body>

</html>

获取url参数实现两个页面传值，可以看284视频。

navigator对象

navigation对象包含有关浏览器的相关信息，可以判断用户是使用手机端还是浏览器端打开了页面。也可以获得系统或浏览器的版本号。

grt要一直一直努力呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript BOM浏览器对象模型

BOM(Browser Object Model)是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM有一系列对象构成。没有标准，兼容性比较差。DOM的核心对象是document。BOM比DOM更大，包含了DOM。window对象的常见事件...
复制链接

扫一扫

专栏目录