Bom基础

最新推荐文章于 2022-12-30 19:07:09 发布
最新推荐文章于 2022-12-30 19:07:09 发布
阅读量195 收藏
点赞数
分类专栏： web前端 文章标签： javascript css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wenliuyong/article/details/107459014
版权

Bom是浏览器对象模型,我们前面接触到的Dom文档对象模型,是操作页面元素的,这里的Bom是和浏览器交互的.

1.window

dom中的顶级对象是document,bom中的顶级对象是window,window中是包括document的.

2.load事件

开发中,我们通常需要在文档元素加载完毕后才开始写js代码,以避免在js中获取不到dom元素的问题,这时我们可以在window.onload回调中编写我们的js代码,它会在页面元素加载完毕后调用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        //获取button
        let button = document.querySelector('button');
        //获取num盒子
        let numDiv = document.querySelector('.num');
        //声明点击时要执行的函数
        let onClickBtn = function() {
                console.log(window);
            }
            //绑定点击事件
        button.addEventListener('click', onClickBtn);
    </script>
</head>

<body>
    <div class="content-box">
        <button>button</button>
        <div class="num">
            0
        </div>
    </div>
</body>

</html>

当我们在head中编写js代码获取dom标签时,由于页面从上往下的执行顺序,这时获取到的dom标签为null:
 

我们需要在onload中编写逻辑:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            //获取button
            let button = document.querySelector('button');
            //获取num盒子
            let numDiv = document.querySelector('.num');
            //声明点击时要执行的函数
            let onClickBtn = function() {
                    console.log(window);
                }
                //绑定点击事件
            button.addEventListener('click', onClickBtn);
        });
    </script>
</head>

<body>
    <div class="content-box">
        <button>button</button>
        <div class="num">
            0
        </div>
    </div>
</body>

</html>

3.resize事件

当浏览器窗口大小变化时会触发resize事件:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            //获取button
            let button = document.querySelector('button');
            //获取num盒子
            let numDiv = document.querySelector('.num');

            let onResize = function() {
                    numDiv.innerText = window.innerHeight + ':' + window.innerWidth;
                }
                //绑定resize事件
            window.addEventListener('resize', onResize);
        });
    </script>
</head>

<body>
    <div class="content-box">
        <button>button</button>
        <div class="num">
            0
        </div>
    </div>
</body>

</html>

当浏览器窗口发生变化时,我们可以在resize事件中做相应的事情.

4.定时器

(1)setTimeout/clearTimeout

setTimeout接收两个参数,第一个是回调函数,第二个是延迟毫秒数,会返回当前定时器的id,以供取消定时器使用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            //获取button
            let button = document.querySelector('button');
            //获取num盒子
            let numDiv = document.querySelector('.num');
            //声明点击时要执行的函数
            let onClick = function() {
                let id = window.setTimeout(timeout, 3000);
                console.log(id);
            }
            let timeout = function() {
                    console.log('setTimeout callback');
                }
                //绑定点击事件
            button.addEventListener('click', onClick);
        });
    </script>
</head>

<body>
    <div class="content-box">
        <button>button</button>
        <div class="num">
            0
        </div>
    </div>
</body>

</html>

对应的取消定时器的方法为clearTimeout,只需要把定时器id传递过去即可:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            //获取添加计时器button
            let buttonAdd = document.querySelector('.add-btn');
            //获取删除计时器button
            let buttonRemove = document.querySelector('.remove-btn');
            let currentId;
            //声明添加时要执行的函数
            let onClickAdd = function() {
                    currentId = window.setTimeout(timeout, 3000);
                }
                //声明删除时要执行的函数
            let onClickRemove = function() {
                window.clearTimeout(currentId);
            }
            let timeout = function() {
                    console.log('setTimeout callback');
                }
                //绑定点击事件
            buttonAdd.addEventListener('click', onClickAdd);
            buttonRemove.addEventListener('click', onClickRemove);
        });
    </script>
</head>

<body>
    <div class="content-box">
        <button class="add-btn">添加计时器</button>
        <button class="remove-btn">删除计时器</button>
    </div>
</body>

</html>

这样,未执行的定时器就会被清除掉.

(2)setInterval/clearInterval

setInterval和clearInterval用法同timeout相似,功能上有所不同,interval每隔相应的时间都会调用一次回调函数,直至此定时器被移除:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>bom</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            //获取添加计时器button
            let buttonAdd = document.querySelector('.add-btn');
            //获取删除计时器button
            let buttonRemove = document.querySelector('.remove-btn');
            let currentId;
            //声明添加时要执行的函数
            let onClickAdd = function() {
                    currentId = window.setInterval(interval, 1000);
                }
                //声明删除时要执行的函数
            let onClickRemove = function() {
                window.clearInterval(currentId);
            }
            let interval = function() {
                    console.log('setInterval callback');
                }
                //绑定点击事件
            buttonAdd.addEventListener('click', onClickAdd);
            buttonRemove.addEventListener('click', onClickRemove);
        });
    </script>
</head>

<body>
    <div class="content-box">
        <button class="add-btn">添加计时器</button>
        <button class="remove-btn">删除计时器</button>
    </div>
</body>

</html>

 

WLY_Unity_Unreal
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM基础知识BOM基础知识BOM基础知识
10-21
BOM基础知识BOM基础知识BOM基础知识BOM基础知识BOM基础知识BOM基础知识BOM基础知识
BOM基础学习,前端学习
06-30
BOM是browser object model的缩写，简称浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象，并且每个对象都提供了很多方法和属性。BOM主要用于管理窗口与窗口之间的通信，因此其核心对象时window。
BOM基础
自由 自信 不失望
04-16 86
BOM基础（源代码） BOM基础（源代码）
05-31
BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源代码）BOM基础（源...
BOM基础 BOM基础 BOM基础
05-31
**BOM基础详解** BOM（Bill of Materials）在IT行业中，特别是在制造、工程和项目管理领域，是一种至关重要的概念。BOM是一个详细列出产品或系统所有组件的清单，包括每个组件的数量、规格和层次关系。它不仅是产品...
BOM基础知识培训教材.pptx
10-11
BOM基础知识培训教材.pptx
javascript中BOM基础知识总结
10-20
JavaScript中的BOM（Browser Object Model）是用于处理浏览器窗口与窗口之间交互的API，它不是一个标准，而是由各个浏览器厂商实现的。BOM的核心对象是`window`，它不仅是JavaScript的全局上下文，还能让我们控制...
bom基础
weixin_45176023的博客
07-30 111
// window.location = “https://www.baidu.com/s?wd=oppo#666”; // 绑定点击事件(刷新) oRefresh.onclick = function(){ window.location.reload(); } </script>
BOM 基础
最新发布
m0_73683601的博客
12-30 109
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客 户机发送服务器的 user-agent 头部的值。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。比如做 饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。
BOM基础知识
weixin_51376346的博客
11-08 158
一.概念： BrowserObjectModel:浏览器对象模型 二.组成： 1.Window：窗口对象 (1).创建 (2).方法 1.与弹出框有关的方法： alert()显示带有一段消息和一个确认按钮的警告框。 confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。 如果用户点击确...
javascript BOM基础
天马行空的创作中心
05-19 191
BrowserObjectModel 常见弹窗 prompt(&amp;amp;quot;恭喜你&amp;amp;quot;); confirm(&amp;amp;quot;确认进行下一步吗&amp;amp;quot;); alert(&amp;amp;quot;不安全！！！&amp;amp;quot;); 打开窗口，关闭窗口 open(&amp;amp;quot;http://www.baidu.com&amp;amp;quo
BOM基础介绍
weixin_44415461的博客
08-31 102
什么是BOM BOM(Browser Object Model)即浏览器对象模型，是⼀个与浏览器窗⼝进⾏交互的对象 打开或关闭⼀个窗⼝ window.open() window.close() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>B...
js基础-BOM基础
FYD的博客
05-21 260
一.  BOM基础：a)    BOM：   i.  browser object model浏览器对象模型   ii.  提供让JavaScript能操作浏览器窗口的相关api（方法或函数）    iii.   没有标准，不同的浏览器会有不同兼容性问题b)    window对象：     i.  浏览器窗口对象    ii.   浏览器环境下JavaScript中的顶级对象，   iii.  ...
JavaScript DOM与BOM基础：交互性与浏览器模型详解
本文档主要介绍了JavaScript的基础知识及其在网页开发中的重要作用，特别关注了DOM(Browser Object Model)和BOM(Document Object Model)这两个浏览器原生模型。JavaScript是一种客户端脚本语言，它具有以下关键特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值