JavaScript总结_BOM

最新推荐文章于 2024-10-06 04:03:15 发布

砖厂打工仔

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量97

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42456748/article/details/108606143

版权

JavaScript总结_BOM

一、BOM

1. 概述

Browser Object Model（浏览器对象模型）：将浏览器的各个组成部分封装成对象。

2. BOM的组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

3. Window对象

3.1 方法

与弹出框有关的方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
  - 如果用户点击确定按钮，则方法返回true。
  - 如果用户点击取消按钮，则方法返回false。
- prompt()：显示可提示用户输入的对话框。
  - 返回值：获取用户输入的值。
与打开关闭有关的方法
- open()：打开一个新的浏览器窗口。
  - 返回一个新的Window对象。
- close()：关闭浏览器窗口。
  - 谁调用我，我关闭谁。
与定时器有关的方法
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
  - 参数
    1. js代码或者方法对象。
    2. 毫秒值
  - 返回值：唯一标识，用于取消定时器。
- clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。

3.2 属性

获取其他BOM对象：
- history
- location
- Navigator
- Screen
获取DOM对象
- document

3.3 特点

Window对象不需要创建可以直接使用 window使用。window.方法名();
window引用可以省略。方法名();

4. Location对象

获取：
- window.location
- location
方法：
- reload()：重新加载当前文档。刷新
属性：
- href：设置或返回完整的URL。

5. History对象

创建(获取)：
- window.history
- history
方法：
- back()：加载 history 列表中的前一个 URL。
- forward()：加载 history 列表中的下一个 URL。
- go(参数)：加载 history 列表中的某个具体页面。
  - 参数：
    - 正数：前进几个历史记录
    - 负数：后退几个历史记录
属性：
- length：返回当前窗口历史列表中的 URL 数量。

6.练习

案例：自动跳转首页

<html>
	<head>
		<meta charset="utf-8">
		<title>自动跳转</title>
		<style type="text/css">
			p {
				text-align: center;
			}
			span {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			<span id="time">5</span>秒之后，自动跳转到首页...
		</p>
		<script type="text/javascript">
			/* 
				分析：
					1.显示页面效果<p>
					2.倒计时读秒效果实现
						2.1 定义一个方法，获取span标签，修改span标签体的内容，时间--
						2.2 定义一个定时器，1秒执行一次该方法
					3.在方法中判断时间如果<=0,则跳转到首页。
			 
			 */
			//2.倒计时读秒效果实现
			var second = 5;
			var time = document.getElementById("time");
			
			//定义一个方法，获取span标签，修改span标签体的内容，时间--
			function showTime() {
				second--;
				if (second == 0) {
					location.href = "http://www.baidu.com";
				}

				time.innerHTML = second + "";
			}
			//设置定时器，1秒执行一次该方法
			setInterval(showTime, 1000);
		</script>
	</body>
</html>