聊一聊BOM和常见属性

BOM是什么？

BOM是Browser Object Model的缩写，意思是浏览器对象模型。BOM是JavaScript中用来操作浏览器窗口和文档的一组对象，它提供了一些全局属性和方法，以及一些特定的对象，如window、location、history、navigator等。

BOM的特点是什么？BOM的特点是它没有一个标准的定义，不同的浏览器可能实现了不同的BOM对象和方法，这给跨浏览器的开发带来了一些困难。另一个特点是BOM是JavaScript的一个扩展，它不属于ECMAScript的规范，因此不同于DOM（Document Object Model，文档对象模型），它没有一个统一的接口。

BOM有哪些常用的对象和方法？

BOM有以下几个常用的对象和方法：

• window：window对象是BOM的核心，它代表了浏览器窗口或者框架，它包含了很多属性和方法，如document、alert、confirm、prompt、setTimeout、setInterval等。window对象也是JavaScript中的全局对象，所有的全局变量和函数都是window对象的属性和方法。

  // 弹出对话框
  window.alert('Hello, world!');
  
  // 获取屏幕的宽度和高度
  var screenWidth = window.screen.width;
  var screenHeight = window.screen.height;
  
  // 设置定时器
  var timerId = window.setTimeout(function() {
    console.log('定时器触发了');
  }, 1000);
  
  // 取消定时器
  window.clearTimeout(timerId);
  

• location：location对象表示当前窗口的URL信息，它包含了很多属性和方法，如href、host、port、pathname、search、hash等。location对象可以用来获取或者修改当前窗口的URL，或者跳转到新的URL。

  // 获取当前窗口的URL
  var currentUrl = window.location.href;
  
  // 修改当前窗口的URL
  window.location.href = 'https://www.example.com';
  
  // 刷新当前窗口
  window.location.reload();
  
  // 跳转到新的URL
  window.location.assign('https://www.example.com');
  

• history：history对象表示当前窗口的浏览历史记录，它包含了很多属性和方法，如length、back、forward、go等。history对象可以用来控制浏览器的前进和后退操作。

  // 获取浏览历史记录的长度
  var historyLength = window.history.length;
  
  // 后退一步
  window.history.back();
  
  // 前进一步
  window.history.forward();
  
  // 前进或后退多步
  window.history.go(-2);
  

• navigator：navigator对象表示当前浏览器的信息，它包含了很多属性和方法，如appName、appVersion、userAgent、platform、cookieEnabled等。navigator对象可以用来检测浏览器的类型和版本，或者判断浏览器是否支持某些功能。

  // 获取浏览器的名称和版本
  var browserName = window.navigator.appName;
  var browserVersion = window.navigator.appVersion;
  
  // 判断浏览器是否支持cookie
  var isCookieEnabled = window.navigator.cookieEnabled;
  
  // 获取用户代理字符串
  var userAgentString = window.navigator.userAgent;
  

• screen：screen对象表示当前屏幕的信息，它包含了很多属性和方法，如width、height、colorDepth、pixelDepth等。screen对象可以用来获取屏幕的尺寸和颜色深度。

  // 获取屏幕的宽度和高度
  var screenWidth = window.screen.width;
  var screenHeight = window.screen.height;
  
  // 获取屏幕的颜色深度
  var screenColorDepth = window.screen.colorDepth;
  

以上就是对BOM的简单介绍，希望对你有所帮助。