浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
提供与浏览器交互的方法和接口
（1）弹出新浏览器窗口的功能
（2）移动，缩放和关闭浏览器窗口的功能
（3）提供浏览器详细信息的navigation对象
（4）提供浏览器所加载页面的详细信息location对象
（5）提供用户显示器分辨率详细信息的screen对象
（6）对cookies的支持
（7）XMLHttpRequest和IE的ActiveXObiect这样的自定义对象
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
1.1.3window对象方法
方法描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setTimeout()
用于在指定的毫秒数后调用函数或计算表达式。
可以使一段代码在指定时间后运行；
setInterval()
可按照指定的周期（以毫秒计）来调用函数或计算表达式。
可以使一段代码每过指定时间就运行一次
innerHTML
从对象的起始位置到终止位置的全部内容，不包括HTML标签
outerHTML
包含innerHTML的全部内容，还包含对象标签本身
innerText
纯文本，不包含HTML标签
innerHTML 可指定位置创建元素，复杂解构创建时操作简便
document.createElement用于创建一个元素
参数：字符串形势的标签名称 效果：创建的元素默认不在页面中显示，需根据实际的需求添加到页面中的某个位置上。注：若进行元素创建的解构内部已具有其他元素，必须用document.createElement.
标签属性
app.id='zzzzz'
app.setAttribute('age',20) //添加自定义属性
console.log(app.getAttribute('age')); //获取属性
classList对象
length返回类名的个数
add()在原有的类名基础上添加一个类名
remove()在原有的类名基础上 移出某一个类名
toggle()如果有这个类名 则删除这个类名，如果没有 则添加减去
item()根据索引 获取类名
contains()判断元素是否包含某一个类名
DOM有三类节点：元素节点、文本节点、属性节点
元素节点：构成了DOM的基础，<html>是根元素，代表整个文档，其他<body><p><span>等元素节点之间相互包含。
文本节点：包含在元素节点中
属性节点：元素可包含一些属性，作用是对元素做具体描述，比如id,name之类的
appendChild() 方法可以向节点添加最后一个子节点。
removeChild 删除子元素
offsetLeft 与定位父级的x轴距离
offsetLeft： 获取自身左外边框到定位父级的左内边框的距离
offsetTop : 获取自身上外边框到定位父级的上内边框的距离
// 只能获取不能修改
onclick 单击
ondblclick 双击
oncontextmenu 右击
onmousedown 按下
onmouseup 抬起
onmouseenter 移入
onmouseleave 移开
onmousemove 移动
onmouseover 移入1
onmouseout 移开1
//失去焦点
onblur
location.reload() //刷新页面
设置浏览器地址栏的地址
// location.href = 'http://baidu.com'
e.preventDefault()
//阻止默认行为
event.preventDefault()用来阻止事件的默认行为，(比如按钮的点击等等)，但此事件还是继续传播，除非碰到事件侦听器调用stopPropagation()或stopImmediatePropagation()，才停止传播。
注意事项
1.在事件触发后的任何阶段调用preventDefault方法来取消该事件,意味着该事件的所有默认动作都不会发生.
2.preventDefault 方法不会阻止该事件的进一步冒泡.event.stopPropagation方法才有这样的功能.
3.event.cancelable属性来判断一个事件的默认动作是否可以被取消
window.innerWidth 屏幕宽度
x.offsetWidth 自身宽度(width+border+padding 不包括margin)
querySelector和querySelectorAll
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 [NodeList] 对象。
[document.getElementsByClassName()]： 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
[document.getElementById()]：返回对拥有指定 id 的第一个对象的引用。
[document.getElementsByName()]：返回带有指定名称的对象集合。
[document.getElementsByTagName()]：返回带有指定标签名的对象集合。
//限制活动区域
if(left<0)left=0
if(top<0)top=0
if(left>maxLeft)left=maxLeft
if(top>maxTop)top=maxTop
demo.style.left=left+"px"
demo.style.top=top+'px'
//设置位置为鼠标位置
letx=e.pageX//记录最开始的位置
lety=e.pageY
