Browser Object Model (BOM) 是一套专为与浏览器交互而设计的API，它允许JavaScript访问和操纵浏览器窗口以及浏览器本身的相关特性。以下是对BOM主要对象及其操作的详细讲解：
1. Window对象
Window对象 是BOM的核心，它代表浏览器窗口，并且是JavaScript全局对象。这意味着所有全局变量和函数都是Window对象的属性或方法。
- 实例操作：
// 访问当前URL console.log(window.location.href); // 设置定时器，2秒后执行函数 setTimeout(function() {alert('Hello from the timer!'); }, 2000);// 监听窗口关闭事件 window.onbeforeunload = function() {return 'Are you sure you want to leave?'; };// 新开一个窗口 window.open('https://example.com', '_blank');// 触发页面刷新 window.location.reload();
2. Location对象
Location对象 用于获取和修改当前窗口的URL。
- 实例操作：
// 获取当前URL console.log(location.href);// 重定向到新的URL location.href = 'https://www.example.com'; 7// 获取URL的路径部分 console.log(location.pathname);// 获取查询字符串参数 var params = new URLSearchParams(location.search); console.log(params.get('paramKey'));
3. History对象
History对象 提供了访问和操作浏览器历史记录的功能。
- 实例操作： Javascript
// 后退一页 history.back();// 前进一页 history.forward();// 使用HTML5 History API添加历史记录条目 history.pushState({page: 'details'}, 'Details Page', '/details.html');
4. Navigator对象
Navigator对象 包含有关浏览器的信息，如名称、版本、语言偏好等，还可以用来检测浏览器特性。
- 实例操作：
// 获取浏览器信息 console.log(navigator.userAgent); // 浏览器信息字符串 console.log(navigator.language); // 浏览器首选语言// 检查地理定位功能的支持情况 if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {console.log(position.coords.latitude, position.coords.longitude);}); } else {console.log('Geolocation is not supported by your browser.'); }
5. Screen对象
Screen对象 提供了访问客户端显示器信息的方法，如屏幕分辨率、可用工作区大小等。
- 实例操作：
// 获取屏幕分辨率 console.log(screen.width); // 屏幕宽度 console.log(screen.height); // 屏幕高度// 获取可用工作区大小（扣除操作系统任务栏等） console.log(screen.availWidth); console.log(screen.availHeight);
以上五个对象共同构成了BOM的基本功能集，让JavaScript可以更好地与浏览器环境互动。在实际编程中，这些对象常用于网页交互、动态路由、用户地理位置获取、屏幕适配等各种应用场景。
)
)
