你一定要知道的JS的BOM

**BOM：**是Browser Object Model的简写，既浏览器对象模型。BOM由一系列对象组成，是访问、控制、修改客户端(浏览器)的属性的方法。其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 BOM没有统一的标准(每种客户端都可以自定标准)。JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM没有缺乏标准，BOM最初是Netscape浏览器标准的一部分

BOM下的模型对象：

window对象 ：

window对象是BOM中所有对象的核心 ，是 JavaScript 层级中的顶层对象。
window，中文“窗口”的意思。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 body标签 或 frameset标签每次出现时被自动创建。
JavaScript中的任何一个全局函数或变量都是window的属性

部分属性、方法存在兼容性问题，并不能在所有浏览器下使用。如：如状态栏属性 status，火狐中根本就没有状态栏了，这个属性就英雄无用武之地了。
有些属性、方法是过时的，现在的前端开发中使用很少或不建议使用，比如打开新窗口的open()方法；框架集合对象frames[]；与窗口操作有关的属性、方法：name、pageXOffset、pageYOffset、moveTo()、moveBy()等。
以下列出的都是兼容性较强、建议使用、经常使用的属性和方法。

• 1. window.alert(“提示内容”)
     作用：弹出一个警告窗口，内容可以自定义。
• 2. window.prompt(text [,defaultText])
     作用：弹出有提示信息的输入框，帮助用户输入

• 返回值：以字符串的形式，用户输入的信息

• 默认值，可以缺省。

• 3. window.confirm()
     作用：弹出一个确认框。

function closeWin(){
		if(confirm('是否关闭本窗口')){
			window.close();
		}else{
			alert('您选择了取消');
		}
	}

setInterval() 方法 ：
定义和用法：
1、setInterval() 方法可按指定的周期（以毫秒计）来调用函数或计算表达式。
2、setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval(code,millisec[,“lang”])
参数：
code 必需。要调用的函数或要执行的代码串。
millisec必需。周期性执行 code 的时间间隔，以毫秒计。
返回值：
一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。

 var time =window.setInterval(function () {
                 scroll();
            }, 200);//每隔200毫秒运行一次函数
window.clearInterval(time);//结束

setTimeout() 方法：
定义和用法
setTimeout() 方法用于指定毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
注意：
setTimeout() 只执行code一次。如果要多次调用，须使用 setInterval() 或者让 code 自身递归调用 setTimeout()。
返回值：
一个可以传递给 window.clearTimeout () 从而取消对 code 的执行的值。

区别：

​ setTimeout()与setInterval() 相比，编码要少一些，但做复杂控制时， setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。

location对象

location 对象是属于Window对象的子对象。
location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

//location对象的属性
		document.write('<p>返回从井号 (#) 开始的 URL（锚）:'+window.location.hash+'</p>');
		document.write('<p>返回主机名和当前 URL 的端口号:'+window.location.host+'</p>');
		document.write('<p>返回当前 URL 的主机名:'+window.location.hostname+'</p>');
		document.write('<p>返回完整的 URL:'+window.location.href+'</p>');
		document.write('<p>返回当前 URL 的路径部分:'+window.location.pathname+'</p>');
		document.write('<p>返回当前 URL 的端口号:'+window.location.port+'</p>');
		document.write('<p>返回当前 URL 的协议:'+window.location.protocol+'</p>');
		document.write('<p>返回从问号 (?) 开始的 URL（查询部分）:'+window.location.search+'</p>');
//方法
		//跳转到url指定的页面
		function gotoURL(url){
			window.location.href = url;
		}
		
		//加载url指定的新文档
		function assignPage(url){
			window.location.assign(url);
		}
		
		//重新加载当前文档
		function reloadPage(){
			window.location.reload();
		}
		
		//用url指定的文档替换当前文档
		function replacePage(url){
			window.location.replace(url);
		}

history对象

history 对象是属于Window对象的子对象。
history 对象是由 JavaScript runtime engine 自动创建的，由一系列的 URL 组成。这些 URL 是用户在一个浏览器窗口内已访问的 URL 。
出于隐私方面的原因，history只能访问当前窗口中的历史列表，不能访问其他窗口的历史列表。

常用方法：

		//获取历史记录数量
		function getHisLength(){
			alert('当前总共有历史记录：'+window.history.length+'个');
		}
		//加载 history 列表中的前一个 URL
		function historyBack(){
			window.history.back();
		}
		//加载 history 列表中的下一个 URL
		function historyForward(){
			window.history.forward();
		}
		//加载 history 列表中的num指定的某个具体页面
		function historyGo(num){
			window.history.go(num);
		}

navigator对象

navigator 对象是属于Window对象的子对象。
navigator 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机浏览器的信息。

screen对象

screen 对象是属于Window对象的子对象。
screen对象是由 JavaScript runtime engine 自动创建的，含有关客户机显示屏幕的信息。

document.write('<p>屏幕的高度 (除 Windows 任务栏之外):'+window.screen.availHeight+'</p>');
		document.write('<p>屏幕的宽度 (除 Windows 任务栏之		外):'+window.screen.availWidth+'</p>');
		document.write('<p>调色板的比特深度:'+window.screen.colorDepth+'</p>');
		document.write('<p>屏幕的高度:'+window.screen.height+'</p>');
		document.write('<p>屏幕的宽度:'+window.screen.width+'</p>');

document对象

document对象是window对象的子对象。
document对象的独特之处是它是唯一一个既属于BOM 又属于DOM的对象。
从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。再有，由于BOM没有可以指导实现的标准，所以每个浏览器实现的document对象都稍有不同，这一节的重点是最常用的功能。

这个对象的方法很多这里只举出常用的，具体所有方法可查阅工具书

document.querySelector()

返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

document.querySelectorAll()

返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。注：返回的是一个数组。

document.getElementById()

语法：
document.getElementById(“xxx”);

通过ID获取元素

document.getElementsByName()

返回带有指定名称的对象的集合。注：返回一个数组。

document.getElementsByTagName()

返回带有指定标签名的对象的集合。注，返回一个数组。

document.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。注，返回一个数组。

document.write()

称的对象的集合。注：返回一个数组。

document.getElementsByTagName()

返回带有指定标签名的对象的集合。注，返回一个数组。

document.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。注，返回一个数组。

document.write()

在括号中书写HTML或者JS代码