1、JS组成

我们都知道，javascript有三部分构成，ECMAScript、DOM、BOM，根据用户使用的浏览器的不同，具体的表现形式也不尽相同，BOM是各个浏览器厂商根据DOM在各自浏览器上的实现，不同的浏览器风格迥异。

1、BOM和DOM的关系

要想操作网页，需要DOM来进行访问，但是仅仅只是网页内容。浏览器除了有显示的内容，还有一个重要的部分就是一个载体，它承载我们看到的内容。好比是一个框架，而操作这个载体的对象我们把它叫做BOM。所以这样的结构，使得BOM，DOM各司其职，BOM负责跟浏览器框架打交道，DOM负责浏览器内容Document打交道。从下图中能更好的理解两者的关系。

图片.png

　　在利用JavaScript进行前端开发时，不可避免地要与浏览器窗口进行交互。浏览器的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等，那么操作这些对象都会用到什么方法或属性呢？

（1）window对象：表示浏览器打开的窗口

window方法.png

比如open()方法，里面有四个参数
　　　第一个是要打开的窗口的地址
　　　第二个target,和a标签一样，_self是在原有窗口打开，_blank是在新窗口打开
　　　第三个窗口特征，可以改变打开的新窗口的样式
　　　第四个是否用新地址替换当前的历史记录。true是替换，false是不替换，生成新的记录

window.open("http://www.baidu.com","_blank","width=500,height=300,top=200,left=100",false/true);

再比如我们两秒后关闭窗口

setTimeout(function(){
    Window.close();
},2000);

（2）document对象

document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象

document.lastModified //获取最后一次修改页面的日期的字符串表示 
 
document.referrer //用于跟踪用户从哪里链接过来的 
 
document.title //获取当前页面的标题，可读写 
 
document.URL //获取当前页面的URL，可读写 
 
document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚 
 
document.forms[0]或document.forms["formName"] //访问页面中所有的表单 
 
document.images[0]或document.images["imgName"] // 访问页面中所有的图像 
 
document.links [0]或document.links["linkName"] //访问页面中所有的链接 
 
document.applets [0]或document.applets["appletName"] //访问页面中所有的Applet 
 
document.embeds [0]或document.embeds["embedName"] //访问页面中所有的嵌入式对象 
 
document.write(); 或document.writeln(); //将字符串插入到调用它们的位置 

（3）location对象

location对象：表示载入窗口的URL，也可用window.location引用它

location.href   //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm  
location.portocol  //URL中使用的协议，即双斜杠之前的部分，如http 
location.host  //服务器的名字，如www.wrox.com 
location.hostname  //通常等于host，有时会省略前面的www
location.port  //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
location.pathname  //URL中主机名后的部分，如/pictures/index.htm
location.search  //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
location.hash  //如果URL包含#，返回该符号之后的内容，如#anchor1
location.assign("http:www.baidu.com");  //同location.href，新地址都会被加到浏览器的历史栈中
location.replace("http:www.baidu.com");//同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问
location.reload(true|false);//重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

（4）navigator对象

navigator对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可window.navigator引用它

navigator.appCodeName //浏览器代码名的字符串表示 
navigator.appName //官方浏览器名的字符串表示  
navigator.appVersion //浏览器版本信息的字符串表示  
navigator.cookieEnabled //如果启用cookie返回true，否则返回false 
navigator.javaEnabled //如果启用java返回true，否则返回false  
navigator.platform //浏览器所在计算机平台的字符串表示  
navigator.plugins //安装在浏览器中的插件数组
navigator.taintEnabled //如果启用了数据污点返回true，否则返回false 
navigator.userAgent //用户代理头的字符串表示  

（5）screen对象

screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它  
screen.width/height //屏幕的宽度与高度，以像素计 
screen.availWidth/availHeight //窗口可以使用的屏幕的宽度和高度，以像素计 
screen.colorDepth //用户表示颜色的位数，大多数系统采用32位  
window.moveTo(0, 0); 
window.resizeTo(screen.availWidth, screen.availHeight); //填充用户的屏幕  

（6）history对象

history.length   //返回浏览器历史列表中得URL数量
history.back()  //加载history列表中得前一个URL
history.forward()  //加载history列表中得下一个URL
history.go();  //加载history列表中得某个具体页面

比如执行history.back();就与单击后退按钮执行的操作一样
执行history.go(-2)与单击两次后退按钮执行的操作一样

以上仅列举了一些示例，可以自己去用一下