JavaScript- 1.4 BOM对浏览器进行操作-CSDN博客

窗口控制
- 使用window对象可以控制浏览器窗口的打开、关闭、调整大小等操作。
- 示例：window.open('https://example.com', '_blank') 打开新窗口，window.close() 关闭当前窗口。
导航与历史记录
- location对象用于获取当前页面的URL信息，并可实现页面跳转。
- 示例：location.href = 'https://example.com' 跳转到指定页面，location.reload() 刷新页面。
- history对象允许操作浏览器的历史记录，如前进或后退。
- 示例：history.back() 返回上一页，history.forward() 前进到下一页。
屏幕信息获取
- screen对象提供屏幕分辨率、颜色深度等信息。
- 示例：screen.width 获取屏幕宽度，screen.height 获取屏幕高度。
浏览器信息获取
- navigator对象提供浏览器名称、版本、操作系统等信息。
- 示例：navigator.userAgent 获取用户代理字符串，navigator.platform 获取操作系统信息。
对话框交互
- 使用alert()、confirm()、prompt()等方法与用户进行交互。
- 示例：alert('Hello!') 显示警告框，confirm('Are you sure?') 显示确认框。
定时器
- setTimeout()和setInterval()用于延迟执行或周期性执行代码。
- 示例：setTimeout(() => console.log('Delayed'), 1000) 延迟1秒执行，setInterval(() => console.log('Interval'), 1000) 每秒执行一次。

2、BOM和DOM的区别

方面	BOM（浏览器对象模型）	DOM（文档对象模型）
定义	提供与浏览器窗口交互的对象和方法，控制浏览器行为和获取浏览器信息。	提供与HTML或XML文档交互的对象和方法，操作文档内容和结构。
核心对象	`window`对象是BOM的顶层对象，代表浏览器窗口。	`document`对象是DOM的入口，代表当前加载的网页文档。
功能范围	控制浏览器窗口、导航、历史记录、屏幕信息、浏览器信息等。	操作网页内容，包括HTML元素、属性、样式、事件等。
标准化	BOM不是标准化的，不同浏览器可能实现方式不同。	DOM是W3C标准化的，所有现代浏览器都遵循这一标准。
主要对象	`window`、`navigator`、`location`、`history`、`screen`等。	`document`、元素节点、属性节点、文本节点等。
操作目标	浏览器窗口和与浏览器的交互。	网页文档的内容和结构。
示例操作	打开新窗口、获取屏幕分辨率、重定向页面、操作浏览器历史记录等。	修改元素内容、添加或删除元素、绑定事件等。

3、总结

BOM主要用于操作浏览器本身的行为和窗口，提供与浏览器交互的功能。
DOM主要用于操作网页文档的内容和结构，实现动态内容更新和交互效果。
两者共同协作，使得JavaScript能够控制浏览器和网页的方方面面。

二、代码实践

代码如下：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM对浏览器进行操作</title>
	</head>
	<body>
		<script type="text/javascript">
			// 点击按钮打开一个窗口
			function myLoad(){
				window.open('https://www.baidu.com','_black','width=300px,height=300px，top=100px,left=0px');
			}
		</script>
		<button type="button" onclick="myLoad()">点击一个按钮打开一个新的窗口</button>
	</body>
</html>

代码运行如下：