JavaScript - BOM

2022/1/20 9:12:28

本文主要是介绍JavaScript - BOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

BOM

1 什么是BOM

BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

2 BOM的结构

在 BOM 中包含了 DOM,整个 BOM 结构如下:

3 window对象

window 对象是浏览器的顶级对象,它具有双重角色。

  1. 它是 JavaScript 访问浏览器窗口的一个接口对象。
  2. 它是一个全局对象,所有定义在全局作用域的变量、函数都是它的属性或方法。

由于所有全局属性和方法都属于 window 对象,因此在调用时是可以省略 window 的。如调用 alert() 方法时,可以写成 window.alert(),但通常都会直接调用 alert() 方法即可。

    function myFunction1(){
        console.log('hello');
    }
    window.myFunction1();
    console.log(window)

4 常用的方法

4.1 alert()

用于在页面中弹出一个警告框,一般用于程序调试。

使用语法:

window.alert(提示信息);

示例:

alert('start')
window.alert('end')

4.2 confirm()

消息确认提示框,一般用于删除时进行确认,防止误删除。这个方法可以给定提示信息,执行后会返回一个布尔类型的值。

使用语法:

var 返回值 = confirm(提示信息);

示例:

var f = confirm('你确定要删除么?')
console.log(f);

if (confirm('你确定要删除么?删除后不能恢复!')) {
    console.log('已经成功删除!')
}

说明:confirm() 方法执行后,会返回一个布尔类型的值,根据这个值我们可以进行相应的操作。

5 常用的事件

5.1 页面加载

事件 说明
window.onload = function(){}
window.addEventListener('load', function(){})
传统方式加载
监听事件方式加载
window.addEventListener('DOMContentLoaded', function(){}) 监听事件方式加载

window.onload 是页面加载事件,当文档内容(包括图像、脚本文件、CSS 样式文件等)完全加载完成后会触发该事件——即调用处理函数。window.onload 是传统事件注册方式,只会调用一次,如果在页面中写了多个该事件,只会执行最后一个加载事件。

使用示例:

window.onload = function () {
    console.log('页面加载完成!')
};

5.2 调整窗口大小

当调整页面窗口大小时,会触发 onresize 事件,该事件语法如下。

window.onresize = function(){
    
}

注意:

  1. 只要窗口大小发生像素变化时就会触发此事件。
  2. 当使用这个事件来实现响应式布局时可以使用 window.innerWidth 属性获取当前屏幕宽度。

演示案例:

window.onresize = function () {
	console.log('当前窗口宽度为:' + window.innerWidth);
	console.log('当前窗口高度为:' + window.innerHeight);
};

6 定时器方法

window 对象中提供了两种定时器方法。

  • setTimeout()
  • setInterval()

6.1 setTimeout()

setTimeout() 定时器是延迟指定时间(毫秒数)就会执行回调函数。

语法如下:

window.setTimeout(回调函数, [延迟执行毫秒数])

使用此定时器需要注意如下事项:

  1. window 对象可以省略
  2. 回调函数可以直接写在定时器方法内也可以只写函数名
  3. 延迟执行时间的单位是毫秒,默认为 0 表示立即执行回调函数
  4. 一般会给定时器指定一个名称

使用示例:

<script>
    console.log('你好')
    setTimeout(function(){
        console.log('hello')
    }, 2000)
    console.log('大家上午好!')

    console.log('-----------');

    function fn(){
        console.log('回调函数的输出');
    }
    setTimeout(fn, 2000);
</script>

需求:希望点击按钮后,结束定时器的运行。

<script>
    // 点击按钮时结束定时器运行
    var timer = null; // 句柄对象,用于获取定时器对象
    function btnOnClick(){
        // 删除定时器对象
        clearTimeout(timer);
    }

    var index = 0;
    function fn() {
        console.log(index++);
        timer = setTimeout(fn, 2000);
    }
    timer = setTimeout(fn, 2000);
</script>

说明:我们可以在定义定时器对象时,给它指定一个引用名称,通过这个引用名称,我们就可以根据自己的业务逻辑来结束这个定时器的运行。

结束定时器的运行需要使用 window 对象中的 clearTimeout() 方法,这个方法的参数就是定时器的引用对象。

6.2 setInterval()

setTimeout() 是指定时间之后执行,如果想每隔多少时间就执行一次,就需要使用 setInterval() 定时器了。

语法如下:

window.setInterval(回调函数, [间隔执行时间毫秒数])

示例:

setInterval(function () {
    console.log('hello');
}, 2000);

使用此定时器需要注意如下事项:

  1. window 对象可以省略
  2. 回调函数可以直接写在定时器方法内也可以只写函数名
  3. 间隔执行时间的单位是毫秒,默认为 0 表示立即执行回调函数
  4. 一般会给定时器指定一个名称
  5. 第一次执行也是延迟指定毫秒之后执行,之后是每隔指定毫秒数就执行一次

说明:上例中会每隔 2 秒就会执行输出一次 hello 字符串。

setTimeout 和 setInterval 的区别:

setTimeout 是延迟指定的毫秒数后执行一次,而 setInterval 是延迟指定的毫秒数后反复执行。

如果希望 setTimeout 实现 setInterval ,那么需要在 setTimeout 的回调函数中再次调用自己才可以。

可以给 setInterval 定义一个名称,同时可以利用这个名称来结束定时任务的执行。

<script>
    // 需求:当 index 的值达到 5 时,就结束。
    var timer = null;
    var index = 1;
    timer = setInterval(function () {
        if (index === 5) clearInterval(timer);
        console.log(index++);
    }, 1000);
</script>

7 location对象

7.1 什么是 location

window 对象中提供了 location 属性,该属性用于获取或设置浏览器地址栏中的 URL 值。这个获取或设置属性后会返回一个对象,所以将这个属性称为 location 对象。

URL(Uniform Resource Locator)叫统一资源定位符,是互联网上标准资源的地址。它由以下几部分组成。

组成 说明
protocol 协议,如:http、https、ftp等
host 主机(域名),如:www.baidu.com
port 端口号,如:80、8080、3306等
path 路径,由零个或多个'/'隔开的字符串,一般表示主机上一个目录或文件
query 参数,以键值对形式显现,多个使用 & 号连接
fragment 片段,以 # 号后面内容,常用于锚点

示例:

<form>
    <input type="text" name="account" placeholder="账号">
    <input type="password" name="pwd" placeholder="密码">
    <input type="submit" value="提交">
</form>
<script>
    console.log(location);
    console.log(location.protocol); // 协议
    console.log(location.host);
    console.log(location.hostname + ', '  + location.port);
    console.log(location.href);
    console.log(location.search);
</script>

7.2 location 属性

location 对象中提供了以下属性。

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

示例:把请求参数保存到对象中。如:把 user=xaoupeng&pwd=123456 保存到一个对象中。

<form>
    <input type="text" name="account" placeholder="账号" value="xaoupeng">
    <input type="password" name="pwd" placeholder="密码" value="123">
    <input type="text" name="code" placeholder="验证码" value="abc1">
    <input type="submit" value="提交">
</form>
<script>
    // 需求:把请求参数保存到对象中。如:把 user=xaoupeng&pwd=123 保存到一个对象中。
    function getSearchString() {
        // 1. 通过 location 的 search 属性来获取请求的参数列表
        // '?account=xaoupeng&pwd=123'
        var queryString = location.search;
        // 1.1 判断请求参数是否存在
        queryString = queryString.length > 0 ? queryString : '';
        // 2. 去掉字符串前的 ? 号
        // 'account=xaoupeng&pwd=123'
        queryString = queryString.substr(1);
        // console.log(queryString);

        // 3. 把多参数进行切割
        // ['account=xaoupeng', 'pwd=123']
        var obj = {};
        if (queryString.indexOf('&') !== -1) {
            var parameters = queryString.split('&')

            // 4. 遍历数组,然后再把参数名和参数值进行切分,并把它赋给对象。
            var items = null;
            for (var i = 0; i < parameters.length; i++) {
                //console.log(parameters[i]);
                items = parameters[i].split('=')
                //console.log(items);
                obj[items[0]] = items[1]
            }
        }
        //console.log(obj);
        return obj;
    }
    var result = getSearchString();
    console.log(result);
</script>

7.3 location 方法

除了上面的属性外,location 中还提供了如下方法。

方法 返回值
assign() 跟 href 一样可以跳转页面
replace() 替换当前页面,不记录历史无法进行后退
reload() 重新加载页面,相当于按 f5,如果参数为 true,相当于按 ctrl + f5

方法使用示例:

<script>
    // location.href = 'https://www.baidu.com/'

    location.assign('https://www.baidu.com')
    location.replace('a.html')

    location.reload();
</script>

8 navigator 对象

navigator 对象包含有关浏览器的信息。

查看 navigator 对象所有信息:

console.log(navigator)

下面以判断浏览器是否安装了某个插件为例,来说明其用法。

在 navigator 对象众多属性中,有一个属性叫 Plugins,里面存放的就是插件信息,可通过如下方式进行查看:

console.log(navigator.plugins);

下面通过封装一个方法,来判断是否安装了某个插件,如果安装则返回 true,否则返回 false。

<script>
    function hasPlugin(name) {
        name = name ? name.toLocaleLowerCase() : '';
        console.log('name = ' + name);
        var plugins = navigator.plugins;
        for (var i = 0; i < plugins.length; i++) {
            //console.log(typeof plugins[i]);
            console.log(plugins[i].name);
            return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false;
        }
    }
    var r = hasPlugin('pdf')
    console.log(r);
</script>

在 navigator 对象中还有一个叫 userAgent 属性比较常用。它一般用于获取浏览器的信息。

该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面代码可以判断用户由那个终端打开页面,实现跳转

 //console.log(navigator.userAgent)
    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 = "https://m.xxx.com";     //手机
    } else {
        //window.location.href = "https://www.xxx.com";     //电脑
    }

9 history 对象

window 对象还提供了一个 history 对象,它与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。方法如下表所示。

方法 作用
back() 后退
forward() 前进
go(参数) 前进和后退,参数为正整数表示前进,参数为负整数表后退

示例:

<a href="b.html">b.html</a>
<script>
    console.log('-----------')
    //history.forward();
    history.go(1)
</script>


<a href="a.html">a.html</a>
<script>
    //history.back();
    history.go(-1)
</script>


这篇关于JavaScript - BOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程