浏览器对象模型BOM

最新推荐文章于 2023-07-11 15:02:05 发布

黄晶谛

最新推荐文章于 2023-07-11 15:02:05 发布

阅读量144

点赞数

分类专栏： # JavaScript&JQuery&Ajax 文章标签： javascript

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/119976455

版权

JavaScript&JQuery&Ajax 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1、BOM的概念

BOM，Browser Object Model，即浏览器对象模型，它提供了独立于内容、可直接操作浏览器的对象结构。
它提供了多个对象，包括以下几个：

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；

通过BOM对象的相关操作，可以实现浏览器的刷新、前进、后退等操作。

2、window

window是BOM的顶级对象，当调用其方法时，可以省略window，如：

在调用定时器方法时，可以省略

// setTimeout()和clearTimeout()
// 在指定的毫秒数到达之后执行指定的函数，只执行一次
// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
clearTimeout(timerId);

// setInterval()和clearInterval()
// 定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定时器的执行
clearInterval(timerId);

页面加载事件

// onload
window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

// unload
window.onunload = function () {
  // 当用户退出页面时执行
}

3、location

location对象是window对象的一个属性，使用时可以省略window，它可以获取或设置浏览器地址栏信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
<script type="text/javascript">

  /**
   * window.location
   */
  console.log(window.location);

  /**
   * location对象的属性
   */
  //  地址栏中的请求链接
  console.log(window.location.href);
  //  地址栏上#及后面的内容
  console.log(window.location.hash);
  //  主机名及端口号
  console.log(window.location.host);
  //  主机名
  console.log(window.location.hostname);
  //  端口号
  console.log(window.location.port);
  //  文件的相对路径
  console.log(window.location.pathname);
  //  协议
  console.log(window.location.protocol);
  //  搜索的内容，搜索条件，?及后面的内容
  console.log(window.location.search);

  /**
   * location对象的方法
   */
  window.onload = function (){
    document.getElementById("btn").onclick = function (){
      //window.location.href = "http://www.jd.com";//属性，进行页面跳转
      //window.location.assign("http://www.jd.com");//方法，进行页面跳转
      //window.location.reload();//刷新
      window.location.replace("http://www.jd.com");// 页面跳转，没有历史记录，无法回退
    };
  }
</script>
<input type="button" value="jump" id="btn" />
</body>
</html>

URL
统一资源定位符 (Uniform Resource Locator, URL)

scheme://host:port/path?query#fragment
http://www.baidu.com:80/a/b/index.html?name=zs&age=18#bottom
scheme:通信协议
	常用的http,ftp,maito等
host:主机
	服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
	整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
	由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
	可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断
	字符串，锚点.

4、navigator

  //  通过platform判断浏览器所在的系统平台
  console.log(window.navigator.platform);

  //  通过userAgent判断用户的浏览器类型
  console.log(window.navigator.userAgent);

5、history

//	前进
window.history.forward();
//	后退
window.history.back();
//	后退
window.go(-1);
//	刷新
window.go(0);
//	跳转
window.location.href = "59 history对象.html";

6、screen

Screen 对象包含有关客户端显示屏幕的信息

    // availHeight	返回屏幕的高度（不包括Windows任务栏）
    console.log(window.screen.availHeight);
    // colorDepth	返回目标设备或缓冲器上的调色板的比特深度
    console.log(window.screen.colorDepth);
    // height	返回屏幕的总高度
    console.log(window.screen.height);
    // pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
    console.log(window.screen.pixelDepth);
    // width	返回屏幕的总宽度
    console.log(window.screen.width);

黄晶谛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器对象模型BOM

1、BOM的概念BOM，Browser Object Model，即浏览器对象模型，它提供了独立于内容、可直接操作浏览器的对象结构。它提供了多个对象，包括以下几个：1、window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；2、document对象，文档对象；3、location对象，浏览器当前URL信息；4、navigator对象，浏览器本身信息；5、screen对象，客户端屏幕信息；6、history对象，浏览器访问历史信息；通过BOM对象的相关操作，可以
复制链接

扫一扫