Javascript学习笔记：BOM基础

最新推荐文章于 2022-02-27 17:21:40 发布

Zijeak

最新推荐文章于 2022-02-27 17:21:40 发布

阅读量436

点赞数

分类专栏：前端文章标签： javascript web html5

本文链接：https://blog.csdn.net/qq_18404993/article/details/104388448

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

文章目录

1.什么是BOM
2.window对象
- 2.1 作为全局对象
- 2.2 作为js访问浏览器窗口的接口
3.location对象
- 3.1 location对象的属性
- 3.2 使用location对象改变浏览器位置
4.history对象
5.screeen对象
6.navigator对象

1.什么是BOM

BOM（browser object model）浏览器对象模型
BOM中的对象：window、navigator、screen、history、location、document、event

2.window对象

window对象是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

2.1 作为全局对象

window.age=15 相当于不在任何函数体内的var age=15

window.sayHello(){
	alert("Hello");
}
window.sayHello();

所有的全局变量和全局方法都可通过window对象访问，window对象可以省略掉。

2.2 作为js访问浏览器窗口的接口

方法一：window.alert("content") 显示带有一段消息和一个确认按钮的警告框。
方法二：window.confirm("message") 弹出一个确认对话框，有一个布尔型返回值。
方法三：window.prompt("text,defalutText") 弹出一个可以接受输入的对话框，text参数为要在对话框中显示的纯文本，defaultText参数为默认的输入文本。点击“取消”返回none，点击‘’确认”返回输入的值。
方法四：window.open(pageURL,name,parameters) 打开一个新的浏览器窗口或查找一个已命名的窗口。pageURL为子窗口路径，name为子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用），parameters为窗口参数，各参数用逗号分隔。
parameters：
在这里插入图片描述
方法五：window.close() 关闭当前窗口
方法六：window.setTimeout(code,millisec) 超时调用，在指定的毫秒数后调用函数或计算表达式，code为要调用的函数或要执行的代码串，millisec为在执行代码前需要等待的毫秒数。

setTimeout("alert('hello')",4000);

方法七：clearTimeout(timoutname,millisec) 取消超时调用
方法八：setInterval(code,millisec) 每隔millisec执行一次
方法九：clearInterval(id_of_setinterval) 取消间歇调用，id_of_setinterval为由setInterval()设置的ID值，此ID值是一个对象。

3.location对象

location对象提供了当前窗口中加载的文档的有关信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。

3.1 location对象的属性

location.href：返回当前加载页面的完整URL，与window.location.href等价
location.hash：返回URL中的hash（#后跟0或多个字符串），如果不包含则返回空字符串。可以使用location.hash="#top"实现“返回顶部”的功能（顶部有一个元素的id为top）。
location.host：返回服务器名称和端口号
location.hostname：返回不带端口号的服务器名称
location.pathname：返回URL中的目录和（或）文件名
location.port：返回端口号
location.protocol：返回页面使用的协议
location.search：返回URL的查询子字符串，这个字符串以？开头

3.2 使用location对象改变浏览器位置

改变URL：location.href属性、location.hash属性、loaction.search属性

setTimeout(function(){
	location.href="https://www.google.com";
},3000);

location.replace(url)可用来重定向URL,不会在历史记录中生成新记录。
loaction.reload()：重新加载当前显示的页面，有可能从缓存中加载（若没有任何还变），loaction.reload(true)强制从服务器加载。

4.history对象

history对象保存了用户在浏览器中访问页面的历史记录。
history.back()：相当于history.go(-1)，回到历史记录的上一步
history.forward()：相当于history.go(1)，回到历史记录的下一步
history.go(n)：回到前n步
history.go(-n)：回到后n步

5.screeen对象

常用属性：
screen.availWidth：返回可用的屏幕宽度
screen.availHeight：返回可用的屏幕高度
在这里插入图片描述

6.navigator对象

常用属性：
navigator.UserAgent：用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。
一个检测用户所使用的浏览器类型的小例子：

<!DOCTYPE html>
<html>
<head>
	<title>判断所使用的浏览器类型</title>
	<script src='domReady.js'></script>
	<style>
		#text{
			width:100%;
			height:100px;
			font-size: 30px;
			font-weight: bold;
			background-color: black;
			color:white;
		}
	</style>
</head>
<body>
	<div id='text'>
		sss
	</div>
	<script>
		//检测浏览器类型
		function getBrowser(){
			var explorer = navigator.userAgent.toLowerCase(),browser;
			if(explorer.indexOf("msie")>-1){
				browser = "IE";
			}else if(explorer.indexOf("opera")>-1){
				browser = "oprea";
			}else if(explorer.indexOf("chrome")>-1){
				browser = "chrome";
			}else if(explorer.indexOf("safari")>-1){
				browser = "scfari";
			}
			return browser;
		}
		var explorer = getBrowser();
		var text = document.getElementById("text");
		text.innerText=explorer;
	</script>
</body>
</body>
</html>