JavaScript浏览器对象模型

文献种类：专题技术总结文献；
开发工具与关键技术：DW与 JavaScript
作者： 熊江宇 ；年级： 2019 ；撰写时间： 2020 年 4 月 28 日

JavaScript对象总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：熊江宇
撰写时间：2020年4月20日

什么是 BOM?
- BOM:浏览器对象模型 //宿主对象
- BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
- BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为

简单来说：BOM可以使我们通过JS来操作浏览器，在BOM中提供了一组对象，用来完成对浏览器的操作。
BOM对象
1.Window对象
	- 代表的是整个浏览器窗口，同时window也是网页中的全局对象
2.Navigator对象 （网景公司）
	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
3.Location
	- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或则操作浏览器页面跳转
4.History
	- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
		由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
5.Screen
	- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
	
这些BOM对象在浏览器中都是作为window对象的属性保存
	可以通过window对象来使用，也可以直接使用

Navigator
- 代表当前浏览器的信息，通过对象可以来识别不同的浏览器
- 由于历史原因，Navigator对象中的部分属性都是不能帮助我们识别浏览器了
- 一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不通过的userAgent
firefox中的userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0
Chrome中的userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4000.3 Safari/537.36
IE8 中的userAgent
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE9 中的userAgent
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE10 中的userAgent
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3)
IE11 中的userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3; rv:11.0) like Gecko
*/
console.log(navigator.appName);//Netscape
console.log(navigator.userAgent);

var ua=window.navigator.userAgent;
/*if(/firefox/i.test(ua)){
	alert("这是火狐浏览器");
}else if(/chrome/i.test(ua)){
	alert("这是谷歌浏览器");
}else if(/msie/i.test(ua)){
	alert("这是IE浏览器");
}*/
/*
	如果通过navigator.userAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
		比如：ActiveXObject
*/

例如：
alert(!!window.ActiveXObject);
if(window.ActiveXObject){
alert(“这是IE浏览器”);
}else{
alert(“其他浏览器”);
}
/in/

History
- 对象可以用来操作浏览器向前后或向后翻页
- length 返回浏览器历史列表中的 URL 数量。
/
/
History 对象方法
方法 描述
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

go(-1) ==>back() 
go(1) ==>forward() 

Location
- 该对象中封装了浏览器的地址栏的信息
/
/
Location 对象属性
属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。

//如果直接打印location，则可以获取地址栏的信息（当前页面的完成路径）
// alert(location);
/*
如果直接将location属性修改为一个完整的路径，或相对路径
则我们页面会自动跳转到该路径，并且会生成相对的历史记录
*/
// location=“https://www.baidu.com/”;
//location=“84JavaScript_Navigator.html”;//相对路径

		/*
			assign()
				- 用来跳转到其他的页面，作用和直接修改location一样
		*/

// location.assign(“https://www.baidu.com/”);
/*
reload()
- 重新加载当前文档,作用和刷新按钮一样
- 如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
/
// location.reload(true);
/
replace()
- 用新的文档替换当前文档，调用完毕也会跳转页面
- 不会生成历史记录，不能使用回退按钮回退
*/

//使count中的内容，自动切换
/*
* JS的程序的执行速度是非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*/
/*for(var i=0 ; i<10000 ; i++){
count.innerHTML = i;

		alert("hello");
	}*/

	/*
	 * setInterval()
	 * 	- 定时调用
	 * 	- 可以将一个函数，每隔一段时间执行一次
	 * 	- 参数：
	 * 		1.回调函数，该函数会每隔一段时间被调用一次
	 * 		2.每次调用间隔的时间，单位是毫秒
	 * 
	 * 	- 返回值：
	 * 		返回一个Number类型的数据
	 * 		这个数字用来作为定时器的唯一标识
	 */

//开启一个定时器
/setInterval(function(){
console.log(num++);
},3000);/

		/*
		 * 延时调用，
		 * 	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
		 * 
		 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
		 * 
		 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
		 */