【Web APIS】08-BOM浏览器对象模型

最新推荐文章于 2024-06-15 11:46:27 发布
最新推荐文章于 2024-06-15 11:46:27 发布
阅读量239 收藏
点赞数
分类专栏： JavaScript初级 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SevgiliD/article/details/126073643
版权

BOM浏览器对象模型

BOM概述

什么是BOM

在这里插入图片描述

BOM的构成

BOM比DOM更大，它包含DOM
在这里插入图片描述
在这里插入图片描述

window对象的常见事件

window.onload窗口加载事件

1.window.onload：等页面全部加载完毕触发，包含dom元素 图片 flash css等
在这里插入图片描述
2.DomContentLoaded： 是DOM加载完毕事件被触发，不包含样式表，图片，flash，css和子框架的完全加载。
在这里插入图片描述
用法示例：

<script>
        // 窗口加载事件：当文档内容完全完成才触发该事件；这样写script可以写在任意位置；
            // 1.使用window.load传统注册方法只能写一次，多次则会以最后一次为准
        // window.onload = function(){
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function(){
        //         alert('11515');
        //     })
        // }
        // 2.使用addEventListener则没有
        window.addEventListener('load', function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click', function(){
                alert('11515');
            })
        })
        window.addEventListener('load', function(){
        
                alert('444');
          
        })

        // 
        document.addEventListener('DomContentLoaded', function(){
            alert(33);
        })//33 444 11515    
        // load等页面全部加载完毕，包含dom元素 图片 flash css等
        // DOMContentLoaded 是DOM加载完毕事件被触发，不包含样式表，图片，flash，css和子框架的完全加载。
    </script>
</head>
<body>
    <button>按钮</button>
    
</body>

调整窗口大小事件

在这里插入图片描述

  • 用法示例：当窗口小于900时，则隐藏盒子
 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <script>
        // 调整窗口大小事件：只要窗口像素大小发生变化，就会触发该事件
            // -    没有css3时，常用来完成响应式布局
        window.addEventListener('resize', function(){
            console.log('变化了');
        })
        // 示例：当窗口小于900时，则隐藏盒子
        window.addEventListener('load', function(){
            var div = document.querySelector('div');
            window.addEventListener('resize', function(){
            console.log(window.innerWidth);
            if(innerWidth<900){
                div.style.display = 'none';
            }else{
                div.style.display = 'block';
            }
        })
        })

    </script>
    <div></div>
</body>

两种定时器

setTimeout

    (1)语法规范：window.setTimeout(调用函数，延时时间)
    (2)这个window在调用的时候可以省略
    (3)这个延时时间是毫秒ms，但是可以省略，省略时默认是0
    (4)这个调用函数可以直接写函数，也可以写函数名
    (5)页面中可能有很多定时器，所以通常给定时器加标识符（名字）

在这里插入图片描述

  • clearTimeout(Timeout ID);清除定时器
    用法示例：
<body>
    <button>点击停止爆炸</button>
    <script>
        // setTimeout(function(){
        //     console.log('2s过了');
        // }, 2000)
        var btn = document.querySelector('button');
        function boom(){
            console.log('爆炸了');
        }
        var timer1 =setTimeout(boom, 2000); 
        var timer2 =setTimeout(boom, 2000); 
        
        //clearTimeout(Timeout ID);清除定时器
        //      -window也可省略；里面的ID就是定时器的标识符（名字）
        btn.addEventListener('click', function(){
        })//若点击，则停止了timer1的打印爆炸    
    </script>
</body>

回调函数

在这里插入图片描述

案例：5s后自动关闭的广告

案例代码：

 <script>
        window.addEventListener('load',function(){
        var img = document.querySelector('img');
        function callback(){
            img.style.display = 'none';
        }
        setTimeout(callback, 5000)
        })
    </script>
</head>
<body>
    <img src="../../images/adv.png" alt="">

</body>

setInterval

  • 与setTimeout用法一致，不同于setInterval()方法是反复调用，而非一次则停止调用

在这里插入图片描述

  • clearInterval(ID)清除定时器 ( 值得注意的是清除定时器时，定时器的标识符应该是全局变量，且为null)
  • 代码示例：
    在这里插入图片描述

案例：仿京东倒计时

在这里插入图片描述
案例代码：

 <style>
        .box {
            overflow: auto;
            margin: 150px;
            text-align: center;
        }

        .box div {
            float: left;
            width: 60px;
            height: 60px;
            line-height: 60px;
            background-color: rgb(49, 50, 49);
            color: white;
            margin: 2px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
    </div>
    <script>
        // 获取元素
        var hour = document.querySelector('.hour');
        var min = document.querySelector('.min');
        var sec = document.querySelector('.sec');
        var inputTime = +new Date('2022-7-30 19:00:00');//用户输入目标时间（截止时间点）
        // 先调用一次这个函数，防止刷新会有空白（因为第一次执行也需要间隔）
        countDown();
        // 封装函数返回用户输入时间距离当前时分秒并开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            times = (inputTime - nowTime) / 1000;//用户输入的时间到现在的总毫秒数
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? h = '0' + h : h;
            var m = parseInt(times / 60 % 60); //分
            m = m < 10 ? m = '0' + m : m;
            var s = parseInt(times % 60); //当前的秒   
            s = s < 10 ? s = '0' + s : s;
            hour.innerText = h;
            min.innerText = m
            sec.innerText = s;

        }





    </script>
</body>

案例：发送短信

  • 案例需求：点击发送后，发送按钮在一段时间内禁止点击

在这里插入图片描述

在这里插入图片描述

  • 案例代码：
<body>
    手机号码：<input type="number"><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var x = 5;//此处修改从几开始倒数
        btn.addEventListener('click', function () {
            this.disabled = true;//this指向button   
            ban();
            var timer = setInterval(ban, 1000);
            //封装函数，点击按钮变成禁言且开始倒数
            function ban() {
                //判断等于0时，则回到可点击初始状态并清除定时器
                if (x !== 0) {
                    x -= 1;
                    btn.innerText = '还剩' + x + '秒可继续发送';
                } else {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerText = '发送';
                    x = 5;//这个5需要重新开始
                }
            }
        })
    </script>
</body>

this指向问题

  • this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

现阶段，我们先了解一下几个this指向:

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window )
  2. 方法调用中：谁调用this指向谁
  3. 构造函数中this指向构造函数的实例
<body>
    <button>按钮</button>
    <script>
    // this指向问题：一般情况下this的最终指向的是调用它的对象
        // 1.全局作用域或者普通函数中的this指向全局对象window （注意定时器里的this指向window）
        console.log(this);//window

        function fn(){
            console.log(this);
        }
        fn();//window;等价于window.fn()，省略部分

        window.setTimeout(function(){
            console.log(this);
        },1000)//window

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

        var btn =document.querySelector('button');
        btn.onclick = function(){
            console.log(this);//指向button
        }

        // 3.构造函数中this指向构造函数的实例
        function Fun(){
            console.log(this);
        } 
        var fun = new Fun();  //指向创建的空对象，实例化赋值给fun，所以指向fun

    </script>
</body>

JS执行机制

JS单线程

在这里插入图片描述

同步和异步

什么是同步和异步

在这里插入图片描述

同步和异步任务执行过程

通过几个问题来理解同步和异步任务的执行过程

  • 第一个问题：当给定时器设置1s延时：打印结果为1,2，3

在这里插入图片描述

  • 第二个问题：如下把定时器延时改为0，打印结果仍为：1,2，3

在这里插入图片描述

  • 同步任务和异步任务执行过程：

在这里插入图片描述

在这里插入图片描述

JS执行机制

  • 文字理解JS执行机制：

JS原本是单线程，任务逐个执行，但某些任务如定时器等回调函数执行事件太长；为了解决页面渲染不连贯，H5允许JS创建多线程把任务分成同步任务和异步任务；

  1. JS获得任务时，把同步任务放入执行栈中逐个执行，把异步任务提交给对应的异步处理进程处理；
  2. 当任务触发（如点击了按钮，定时器时间到达），异步处理进程则会把异步任务依次放入任务队列中
  3. 当执行栈中的同步任务执行完毕，则按顺序执行异步任务

事件循环：
在这里插入图片描述

location对象

前置知识储备：URL

在这里插入图片描述

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

location对象的属性

在这里插入图片描述

案例：5s之后自动跳转首页

  • 案例需求：通过location的href属性实现点击按钮直接跳转或5s后自动跳转首页

在这里插入图片描述

  • 案例代码：
<body>
    <button>按钮</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var time = 5;
        btn.addEventListener('click', function () {
            location.href = 'https://blog.csdn.net/SevgiliD?type=blog';
        })
        fn();//提前调用一次函数，避免刷新出现空白
        var timer = setInterval(fn, 1000);
        function fn(){
            if (time !== 0) {
                div.innerHTML = '您将在' + time + '秒钟之后跳转到首页';
                time--;
            } else {
                clearInterval(timer);
                location.href = 'https://blog.csdn.net/SevgiliD?type=blog';   
            }
        }
    </script>
</body>

案例：获取url的属性

  • 案例需求：第一个页面提交的名字，会在另一个网页中获取

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 案例代码：
  <!-- 注册页代码 -->
<body>
    <form action="index.html">
        用户名：<input type="text" name="uname">
    <input type="submit" value="登录">
    </form>
</body>
  <!-- 登录页代码 -->
<body>
    <div></div>
    <script>
        console.log(location.search);//?uname=andy
        //1.先去掉？ substr('起始位置'，截取几个字符):被认作是遗留的函数并且可以的话应该避免使用
            // var params =location.search.substr(1);//uname=andy
         var params =location.search.substring(1);//uname=andy
        console.log(params);
        // 2.利用=把字符串分割为数组：split('=')
        var arr = params.split('=');
        console.log(arr);//0: "uname"1: "andy
        var div =document.querySelector('div');
        // 3.把数据 写入div中
        div.innerHTML = arr[1] + '欢迎你';
    </script>
</body>

location常见方法

在这里插入图片描述

  • 用法示例：
<body>
    <button>点击</button>
    <script>
        var btn =document.querySelector('button');
        btn.addEventListener('click', function(){
            // 1.location.assign：记录浏览历史，可以实现后退功能
            // location.assign('https://blog.csdn.net/SevgiliD?type=blog');

            //2.ocation.replace：不记录浏览历史，所以不能实现后退功能
            location.replace('https://blog.csdn.net/SevgiliD?type=blog'); 
            
            // 3.location.reload：重新加载页面
            
        })
    </script>
    
</body>

navigator对象

在这里插入图片描述

// 下面代码可判断用户用哪个终端打开页面，实现跳转（了解即可）
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
	window.location.href = "移动端页面的地址"; // 手机
} else {
    window.location.href = "PC 端页面的地址"; // 电脑
}

history对象

在这里插入图片描述
注：history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到
在这里插入图片描述

SevgiliD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Designing Web APIs--2018
09-15
Scale your web API to support a growing number of API calls and use cases Regularly adapt the API to reflect changes to your product or business Provide developer resources that include API ...
APIS IQ-FMEA使用简介.zip
04-09
APIS IQ-FMEA简介 5步法使用方法
Web APIs 学习归纳6--- BOM浏览器对象
SPIRITE_SYF的博客
05-01 1093
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其顶级对象是 window。window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL。因为 这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。
Web APIs：BOM浏览器对象模型--BOM概述
薛定谔的猫
10-23 87
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏 览器标准的一部分。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 学习的是浏览器窗口交互的一些对象。window 对象是浏览器的顶级对象。
Web APIs：BOM浏览器对象模型--window对象的常见事件
薛定谔的猫
10-23 113
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用 户的体验，此时用 DOMContentLoaded 事件比较合适。window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。2. 我们经常利用这个事件完成响应式布局。
Web APIs-BOM- 操作浏览器
GTC的博客
03-13 450
Web APIs-BOM- 操作浏览器1、Window对象1.1、BOM(浏览器对象模型)1.2、定时器-延时函数1.3、JS执行机制1.4、location对象1.5、navigator对象1.6、histroy对象2、swiper 插件3、本地存储3.1、本地存储特性3.2、localStorage3.3、sessionStorage（了解）4、资料来源：黑马程序员 1、Window对象 1.1、BOM(浏览器对象模型) 1.2、定时器-延时函数 1.3、JS执行机制 1.4、l
Web APIs BOM- 操作浏览器-Window对象
黑马程序员官方博客
08-02 248
BOM(Browser Object Model ) 是浏览器对象模型window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）document 是实现 DOM 的基础，它其实是依附于 window 的属性。.........
前端学习笔记 - Web APIs(BOM) 浏览器对象模型
fengxm0309的博客
10-11 265
BOM概述 BOM = Browser Object Model 浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分 DOM BOM 文档对象模型 浏览器对象模型 DOM 就是把 文档 当作一个对象来
jsの再体验 - - BOM（Web APIs 浏览器对象模型）
是草莓味的啊
01-05 182
window，onload，onresize，setTimeOut，clearTimeout，setInterval，clearInterval
4. Web APIs - DAY4 BOM 浏览器对象模型
m0_51394252的博客
07-16 46
<button>点击</button><script>})} else {div.innerHTML = '您将在' + time + '秒钟之后跳转'time --},1000)</script>
Web APIs 学习笔记（五）--- BOM
weixin_45092437的博客
05-16 163
一、BOM的概念 ​ BOM（Browser Object Model）是浏览器对象模型的简称，它提供了与浏览器窗口进行交互的一系列对象，每个对象中都包含了很多方法和属性，其核心对象就是浏览器窗口 window。 二、BOM和DOM的区别 三、BOM的构成 ​ BOM所涵盖的范围比DOM更大，DOM只是BOM的一部分。BOM的顶级对象window中包含：document、location、navigation、screen、history等。 四、window ​ window 是浏览器的顶级对象
04-Web-APIs-Code-Quiz
03-14
Github部署链接： //markhamtrenton.github.io/04-Web-APIs-Code-Quiz/ Github回购链接： : 04 Web API：代码测验你的任务在成为一名全职Web开发人员的过程中的某个时刻，可能会要求您完成编码评估-可能是在面试...
Web-APIs-Code-Quiz
05-25
测验Web API图书馆引导程序Java脚本关于此页面的目的是在给定问题的情况下玩快速问答游戏。 并获得最高点。我学到的是职能在循环中使用数组使用if / else语句querySelector setItem getItem 本地存储计时器防止默认...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 247
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 326
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 175
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
apis iq-fmea软件使用手册(中文)
06-25
APIs IQ-FMEA软件使用手册是一个详细的说明文档，它向用户介绍了使用APIs IQ-FMEA软件的必要步骤和注意事项。 该手册包含了软件的安装、启动和配置过程的详细说明，同时详细介绍了软件的功能和操作界面。用户可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值