DOM编程之浅谈BOM

·  阅读 117
DOM编程之浅谈BOM

这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战

大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~

这是【从头学前端】系列文章的第四十六篇-《浅谈BOM》

本系列文章在掘金首发,编写不易转载请获得允许

写在前面

BOM的全称为Browser Object Model,被翻译为浏览器对象模型,它是由一系列对象构成,这些对象可以简单理解为是由各个有浏览器所提供的。BOM是用于实现Web开发与浏览器之间互相操作的基础。

BOM主要包含5个基础对象,如下所示:

  1. window:表示浏览器实例
  2. location:加载文档的信息和常用导航功能实例
  3. navigator:客户端标识和信息的对象实例
  4. screen:客户端显示器信息
  5. history:当前窗口建立以来的导航历史记录

Window对象

Window对象是什么

BOM中最核心的对象就是Window对象,该对象表示运行HTML页面的浏览器窗口。

在浏览器环境中,Window对象具有双重角色。该对象既是允许JavaScript逻辑访问就浏览器的一个对象,又是ECMAScript规范中的Global全局对象。

这就说明了,在浏览器环境中运行JavaScript逻辑时,在全局作用域中定义对象、变量和函数都是Window对象的属性和方法。

可以通过Window对象访问全局对象的属性和方法,例如NaNundefinedparseInt()方法等。

示例代码如下所示:

<body>
  <script>
    var v = 100;
    function name() {
      console.log('我是函数')
    }
    console.log(window.v) // 100
    window.name()         // 我是函数
  </script>
</body>
复制代码

Window对象的属性

Window对象的属性属性较多,包含了浏览器窗口的基本信息、也包含了一些复杂的信息。我们来介绍一下这其中比较常见的属性:

  • top属性始终指向最外层的窗口,及浏览器窗口本身
  • parent属性始终指向当前窗口的父窗口,如果当前窗口就是最外层窗口,则top等于parent
  • self属性始终指向自身
  • innerWidthinnerHight属性返回当期浏览器窗口的可视宽度和高度
  • outterWidthoutterHeight属性回当期浏览器窗口的整个宽度和高度

Window对象的方法

  • alert(message):显示带有一段消息和一个确认按钮的警告框。
  • confirm(message):显示带有一段消息以及确认按钮和取消按钮的对话框。
  • prompt(text,defaultText):显示可提示用户输入的对话框。用户如果点击取消按钮则返回null,否则返回对应的文本内容
  • close():用于关闭浏览器窗口
  • open():请参阅location.href与window.open()的用法与区别

定时器

定时器的具体方法由Window对象提供,共有以下两种定时器:

  • 延迟执行:指的是指定代码在指定时间后被执行,而不是立刻被执行。
  • 周期执行:指的是指定程序代码在执行时间为间隔,重复被执行。

延迟执行

设置延迟执行通过setTimeout()方法,该方法的会在定时器结束之后,执行一个函数。语法结构如下:

var timeoutID = setTimeout(callback[, delay, param1, param2, ...])
复制代码

上面的参数中,callback表示定时器结束执行的函数;delay表示延迟的时间,这个参数是可选的,默认为0;后面的参数均为可选参数,表示定时器结束后执行函数的参数。

这个函数的回调函数是一个正整数,表示定时器的编号,将这个编号传递给clearTimeout()来取消定时器。

周期执行

周期执行通过setInterval()方法,该方法的语法结构同setTimeout()一致,不同的是setTimeout()执行一遍就不会在执行了,而setInterval()只要是不出现异常且不调用clearInterval()方法结束周期执行则会一直执行下去。

示例代码如下所示:

<body>
  <script>
    var count = 0
    var id = setInterval(() => {
      console.log('我被重复' + ++count + '执行了')
      if (count === 10) {
        clearInterval(id)
        console.log('我的执行结束了')
      }
    }, 1000);
  </script>
</body>
复制代码

上面的代码中,console.log('我被重复' + ++count + '执行了')将会被执行10次,在10次的时候进入if语句块,打印我的执行结束了从而结束执行。

Navigator对象

Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigator属性得到Navigator对象。

Navigator对象提供了一系列常用属性,获取当前浏览器的信息

属性名称描述
appCodeName浏览器的代码名
appName浏览器的名称
appVersion浏览器的平台和版本信息
platform运行浏览器的操作平台

History对象

History对象包含用户在浏览器中访问过URL。

History对象提供的属性和方法如下表所示

属性/方法描述
length属性获取用户在浏览器中访问网址的数量。
forward()方法实现跳转下一个页面,作用和浏览器的前进按钮一样。
back()方法实现跳转到上一个页面,作用和浏览器的回退按钮一样
go()方法实现跳转到指定的页面。如果为正数表示前进,为负数表示后退。

Location对象

Location对象是什么

Location对象包含了浏览器的地址栏的信息,该对象主要用于获取和设置地址。

Location对象很特别,因为该对象既是Window对象的属性,又是Document对象的属性。

console.log(window.location == document.location) // true
复制代码

Location对象的属性

Location对象不仅存储了地址栏中的信息,该提供了解析功能。可以通过不同的Location对象的属性访问不同的地址栏中的信息。

具体属性如下表所示

属性名称描述
host返回服务器名称和端口号
hostname返回服务器名称
href返回当前价值页面的完整URL
pathname返回当前URL中的目录和文件名
port返回当前URL中的端口号
protocol返回页面使用的网络协议

Location对象的方法

方法名称描述
assign()载入一个新的文档,作用于直接修改Location相同
reload()重新加载当前文件,作用和刷新按钮一样。参数为true时,则会强制清空缓存刷新页面
replace()用新的文档替换当前文档(不会生产历史记录,不能使用回退按钮回退)
## 写在最后

你如果看到这里,我感到很荣幸,如果你喜欢这篇文章,你可以为这篇文章点上一个小赞;你如果喜欢这个专栏,我会一直更新到百篇以上,可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注,万分荣庆。

往期推荐

分类:
前端
标签: