JavaScript之BOM

最新推荐文章于 2023-03-29 23:02:08 发布

牛先森家的牛奶

最新推荐文章于 2023-03-29 23:02:08 发布

阅读量694

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106733339

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

BOM

BOM是什么

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape浏览器标准的一部分。

BOM和DOM的对比

DOM：文档对象模型

把文档当做对象来看待
顶级对象是document
主要的是操作页面的元素
DOM是W3C标准规范

BOM：浏览器对象模型

把浏览器当做对象来看待
顶级对象是window
主要的是浏览器窗口的交互的一些对象
BOM是浏览器厂商在各自的浏览器上定义的，兼容性会差

BOM构成

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

BOM相关的知识点

本文介绍BOM相关的知识点，介绍重点在与BOM核心的window对象的成员细节
之前我们已经知道 JavaScript 的范围包括：ECMAScript(h核心语言) + DOM(文本对象模型) + BOM(浏览器对象模型)
BOM 是 Browser Object Model 的缩写
其实就是操作浏览器的一些功能
但是，具体我们可以操作哪些内容呢？
- 获取一些浏览器的相关信息（窗口大小）
- 操作浏览器进行页面跳转
- 获取当前浏览器地址信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本）
- 让浏览器出现一些弹窗(alert/confirm/prompt)
浏览器的核心就是window对象
window的对象是浏览器内置的一个对象，里面包含操作浏览器的方法

window 和全局作用域

在浏览器中，window对象拥有着双重的角色，它既是通过JavaScript访问浏览器窗口的接口，也是ECMAScript规定中的Global全局对象。因此，所有在全局作用域中的声明变量，函数都会自动成为window对象的属性和方法

1、全局作用域

定义在全局环境下的变量和函数都会成为 window 对象的成员（属性和方法）
编码的时候应该尽可能少的使用全局变量，以避免污染全局环境
没有用var声明的变量会成为全局变量，即window对象的属性
在编码时 window 前缀可以被省略，如 window.console.log() 通常成 console.log();

2、`window` 中的对象

`window`获取浏览器地址的`location` 对象

location 对象是 window 中最有用最重要的对象之一，它提供了与窗口中档有关的信息，而且它非常特殊，它既是 window 的属性也是 document的属性

location 对象的主要属性用来获取或者设置浏览器地址相关的信息
URL 统一资源定位符（Uniform Resoure Location，URL）是互联网上标准资源的地址，互联网上的每一个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它
url的组成：
格式：protocol://host[:port]/path/[?query]#fragment
url:http://wwww.baidu.com:8000/api/reg.php?unsename=fqniu&age=25

协议：http 通信协议常用的http、https、ftp、maito等
域名：baidu.com 主机域名 www.baidu.com
端口:8000 端口号可选，默认端口如http的默认端口80
路径：/api/ 有零或多个"/"符号隔开的字符串，一般用来表示主机上到一个目录或文件地址
参数：unsename=fqniu&age=25 以键值对的形式通过&符号分隔开
哈希：#123 fragment 片段 #后面的内容常用于键接锚点
- hash 设置/返回从 #号开始的URL（锚点）===>哈希值
```
    //url:http://wwww.baidu.com:8000/api/reg.php?unsename=fqniu&age=25#123
    console.log(window.location.hash);
    //得到#123
```
- href 设置/返回完整的 URL。
```
    //获取浏览器的地址
    console.log(window.location.href)
    
    //获取浏览器的地址 ?后面的参数
    console.log(window.location.search)

    //设置浏览器的地址
    window.location.href = './index.html';
    //这就会跳转页面到后面给的那个地址
```
- search 设置或者返回从问号(?)开始的URL（部分参数）
- host 服务器的和端口号
- hostname 服务器的名称
- pathname URL中的目录和文件名
- port 返回指定的端口号，如果没有指定则返回空字符串
- protocol 返回网络协议

location 对象的主要方法返回值

assign() 加载新的页面 == 和href一样，可以跳转页面（所以称为重定向页面）
reload() 重新加载（刷新）== 如果参数为true 强制刷新Ctrl+f5
replace(newurl) 使用新的页面来替换当前页面 == 因为不记录历史，所以不能后退页面


  <button>点击</button>

  var btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    //  记录浏览器历史，所以可以实现后退功能
    location.assign('http://www.baidu.com')
    //  不记录浏览器历史，不可以实现后退功能
    location.replace('http://www.baidu.com')

  })

窗口的主要属性和方法

1、获取浏览器窗口的尺寸

在这里需要将的一个概念是 页面视图容器

页面视图容器： 称之为浏览器的视口（viewpoint），相比窗口本身来说，它不包含工具栏和滚动条

innerHeight 获取页面视图的高度（不包括滚动条）

innerWidth 获取页面视图的高度（不包括滚动条）

    var viewPointHeight = window.innerHeight
    console.log(viewPointHeight)

    var viewPointWidth = window.innerWidth
    console.log(viewPointWidth)

outerWidth 获取浏览器的窗口的宽度（包括滚动条）

outerHeight 获取浏览器窗口的宽度（包括滚动条）

    var windowHeight = window.outerHeight
    console.log(windowHeight)

    var windowWidth = window.outerWidth
    console.log(windowWidth)

2、窗口的打开和关闭

window.open(url,name,features,replace)
- url：打开指定页面的URL
- name：指定的target属性或者窗口的名称
  - _blank：在新的窗口加载页面（默认值）
  - _parent：在窗口中加载页面
  - _self：在当前窗口加载页面（替换）
  - _top：URL替换任何可加载的框架集
  - name：窗口名称
- features：可选的字符串，声明新窗口要显示的浏览器的特征
- replace：可选的布尔值，设置浏览器历史的处理（true表示替换当前条件，false表示新建条目）

3、`window.close();` 关闭当前窗口

4、系统弹窗

alert() 弹出对话框（确定）
confirm() 弹出警告框，返回布尔值（确定 true & 取消 false）
prompt() 弹出输入框，返回消息（输入的值字符串）或者 null

5、`window`的`history`对象

window对象中有一个 history 属性，它本身也是一个对象保存着网页的历史记录（从窗口打开时计算）。
history 对象通过内部的lenght属性来记录浏览器的数量，该数据局包含了向前和向后的所有记录，默认加载到窗口的第一个页面其 history.lenght 的值为 0
接下来介绍几个history的方法
go() 跳转到任意的浏览器历史记录，负数表示后退
back() 后退一页
forward() 前进一页

    //获取历史记录的藏毒
    console.log(window.history.length);
    
    //前进1页
    window.history.go(1);
    
    //后退一页
    window.history.go(-1);

    //回退
    window.history.back();

    //前进
    window.history.forward();

6、`window`的`navigator`对象

包含有关的浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回客户机发送服务端的user-agent头部的值
这部分可查阅其他资料

7、浏览器的`onload`事件（窗口加载事件）

onload 这个不是一个事件，而是一个方法

是在页面所有资源加载完毕后去执行的一个方法（可以把js代码写在结构前面，）

    window.onload = function(){
        console.log('页面所有内容已经加载完毕')
    }
    //或者
    window.addEventListener("load", function(){
    console.log('页面所有内容已经加载完毕')
    })

8、浏览器的`onscroll`事件（滚动事件）

这个onscroll事件是当浏览器的滚动条滚动触发的时候或者鼠标滚轮滚动的时候触发

    window.onscroll = function () {
        console.log('浏览器滚动了')
    }

注意：前提是页面的高度要超过浏览器的可是窗口才可以
浏览器滚动的距离
浏览器内的内容既然可以滚动，那么我们就可以获取到浏览器的滚动距离
所谓浏览器滚动，其实不是说真的是浏览器滚动，而是通过浏览器的移动改变页面的位置（也就是页面往上移动或者往下移动）
所以浏览器滚动的距离就是页面的移动距离
所以这个距离的获取值不是使用window而是使用document
scrollTop获取页面向上滚动的距离

共有两种获取的方法
1、document.body.scrollTop
2、document.documentElement.scrollTop
- 两个都是获取页面向上滚动的距离
- 区别：
  - IE浏览器
    - 没有DOCTYPE声明的时候,用这两个都行
    - 有DOCTYPE声明的时候，只能使用ocument.documentElement.scrollTop
  - Chrome 和 FireFox
    - 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
    - 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
  - Safari
    - 两个都不用，使用一个单独的方法 window.pageYOffset
scrollLeft 获取页面想做滚动的距离

共有两种获取的方法
1、document.body.scrollLeft
2、document.documentElement.scrollLeft
- 两个之间的区别和之前的 scrollTop 一样

9、调整窗口大小事件

这个onresize事件是调整窗口大小加载事件，当触发时就调用处理函数

    window.onresize = function () {
        console.log('浏览器窗口大小改变了')
    }
     //或者
    window.addEventListener("resize", function(){
    console.log('浏览器窗口大小改变了')
    })

注意：只要窗口发生像素变化，就会触发这个事件
利用这个可以完成响应式布局，window.innerWidth 当前屏幕的宽度
例如

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  div {
    width: 200px;
    height: 200px;
    background: skyblue;
  }
</style>
</head>

<body>
<script>
  window.onload = function () {
    var div = document.querySelector('#box')
    window.onresize = function () {
      if (window.innerWidth < 400) {
        div.style.display = 'none'
      } else {
        div.style.display = 'block'
      }
    }
  }
</script>
<div id="box"></div>
</body>