JavaScript学习之BOM

内容

对于BOM的一些学习体验与心得。

什么BOM

BOM(Browser Object Model)中文名叫做浏览器对象模型,是浏览器供应商供给开发工作者用来操作浏览器的接口。该接口提供了一系列访问浏览器的属性与方法。BOM提供了很多对象，用于操作浏览器的功能，这些功能与任何网页内容无关，多年来缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是浏览器之间共有的对象就成为了事实上的标准。这些对象得以存在，很大程度上是由于它们提供了与浏览器的互操作性。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。BOM的主要对象分别是window对象、location对象、navigator对象、screen对象、history对象。

BOM之window对象

BOM的核心对象是window对象，它表示浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味着在网页中定义的任何一个对象、变量与函数，都以window作为其全局变量，因此有权访问praseInt()方法。window的属性可以用delete操作符删除，而全局属性delete操作符无法删除。在确认全局变量是否被声明的一种办法是通过判断window.属性是否未undefined。
window对象的常见属性有：
innerheight //返回窗口的文档显示区的高度
innerwidth //返回窗口的文档显示区的宽度
pageXoffset //设置或返回当前页面相对于窗口显示区左上角的X位置(可被赋值，但是没有效果)
pageYoffset //设置或返回当前页面相对于窗口显示区左上角的Y位置(可被赋值，但是没有效果)
screenLeft:　//只读整数。声明了窗口的左上角在屏幕上 的 X 坐标。
screenTop:　//只读整数。声明了窗口的左上角在屏幕上 的 Y 的坐标。
window对象的常用方法有：
alert() //显示带有一段信息和一个确认按钮的警告框
confirm() //显示带有一段消息以及确认按钮和取消按钮的对话框。(按确认返回 true 按取消返回false)
prompt(text,defaultText) //显示可提示用户输入的对话框(按确认，返回输入的值)
setInterval(code, milliseconds) //按照指定的周期(以毫秒计)来调用函数或计算表达式 (通俗来讲就是，设置几毫秒运行一次程序)
setTimeout()　//在指定的毫秒后调用函数或计算表达式 (设置几毫秒后再执行程序)
clearInterval()　//取消由setInterval设置的timeout (停止setInterval())
clearTimeout()　//取消由setTimeout方法设置的timeout (停止setTimeout())
close() //关闭当前浏览器窗口
open(url,name,features,replace) //用来打开一个新的窗口
scrollBy() //按照指定的像素值来滚动的内容
scrollTo()　//把内容滚动到指定的坐标

BOM之location对象

location对象是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象是一个很特别的对象，它既是window对象的属性也是document对象的属性；也就是说window.location与document.location引用的是同一个对象。

location对象的常见属性：
hash //如果URL包含#，该方法将返回该符号后的内容，如www.zpboy.com/index#student的hash将返回#student
host //服务器的名字与端口号,如http://www.zpboy.com/
hostname //等于host，有时候省略www
href //当前载入页面完整的URL
pathname //URL中主机名后的部分。如：http://zpboy.com/students/student.aspx的pathname将返回/students/student.aspx。
port //URL中的端口，默认端口不返回。
protocol //返回协议部分。
search //返回get请求中URL中问号后的部分，又称查询字符串。如：www.zpboy.com/student.aspx?stuid=3将返回？stuid=3。
location对象常见的方法：
replace() //打开新的文档覆盖老的文档
reload() //重新加载页面