JS BOM操作

什么是BOM

1. 浏览器对象模型
2. BOM使我们可以通过JS操作浏览器
3. 在BOM中为我们提供了一组对象来完成对浏览器的操作
   1. window
      代表整个浏览器窗口，同时也是网页中的全局对象
   2. navigator
      代表当前浏览器信息，通过该对象可以识别不同的浏览器
   3. location
      代表当前浏览器地址栏信息，可以获取地址栏信息或者操作浏览器跳转
   4. history
      代表浏览器历史记录，可以通过该对象来操作浏览器历史记录，由于隐私原因，该对象不能获取到具体历史记录，只能操作本次访问向前向后翻页
   5. screen
      代表用户的屏幕信息，通过该对象可以获取到用户的显示器相关信息
4. 可以通过window对象使用，也可以直接使用

Navigator

//由于历史原因，navigator中的大部分属性已经不能帮助我们识别浏览器了
//一般用userAgent来判断浏览器信息，userAgent返回一个字符串，其中包含用来描述浏览器信息的内容

var ua = navigator.userAgent
if(/firefox/i.test(ua)){
	alert('火狐')
}else if(/chrome/i.test(ua)){
	alert('chrome')
}else if(/msie/i.test(ua)){
	alert('ie')
	//IE11 得用这个来判断，因为字符串中没有msie了
}else if('ActiveXObject' in window){
	alert('ie11')
}

History

// length 获取当次访问的连接数量
alert(history.length)
history.back()	//返回上一个页面
history.forward()	//跳转下一个页面
history.go(-1)	//传正负值表示跳转到哪个页面

Location

// location 获取地址栏信息
alert(location)
// 为location赋值 可以是完整地址或者相对路径 会实现跳转
//且会生成相应的历史记录
location = 'http://www.baidu.com/'
loacation = './1.html'

//assign 同样用来跳转到其他页面 作用和直接修改location一样,也会生成历史记录
location.assign('http://www.baidu.com/')

//replace() 使用一个新的页面替换当前页面，但是不会生成历史记录，不能使用回退按钮
location.replace('http://www.baidu.com/')

//reload 重新加载当前页面，作用和刷新按钮一样
//传入参数true强制清空缓存刷新页面 和 ctrl + F5 效果一样
location.reload(true)

定时器

//setInterval()有一个返回值Number类型，这个数字用来作为定时器唯一的标识
var count = document.getElementById('div')
var num = 1
//每点击一次按钮就会开起一个定时器，多次点击后会导致定时器过快，且最后只能关闭最后一次开起的定时器
//所以开起定时器之前 需要将当前元素的定时器关闭
clearInterval(timer)
var timer = setInterval(function(){
	count.innerHTML = num++
	if(num == 11){
	//clearInterval() 用来关闭一个定时器，需要传一个定时器的标识符
	//它可以接收任意参数，如果参数是一个有效的定时器标识，则停止对应的定时器，如果不是一个有效的标识，则什么也不做
	clearInterval(timer)
	}
},1000)

//setTimeout()
var timer1 = setInterval(function(){
	}
},1000)
clearInterval(timer1)