JavaScript进阶BOM操作的个人笔记

一、BOM了解

window对象是BOM的顶层(核心)对象，玩转BOM，就是玩转window的属性和方法。
Window对象它具有双重角色，既是通过js访问浏览器窗口的一个接口，又是一个全局对象。这意味着在网页中定义的任何对象，变量和函数，都是window的属性。

1.BOM组成

1.Window JavaScript 层级中的顶层对象表示浏览器窗口
2.Navigator包含客户端浏览器的信息
3.History 包含了浏览器窗口访问过的 URL
4.Location 包含了当前 URL 的信息
5.Screen 包含客户端显示屏的信息

2.window 对象属性

1. innerWidth：返回窗口的文档显示区的高度(加上 滚动条宽度 / 高度)。
2. innerHeight：返回窗口的文档显示区的宽度(加上 滚动条宽度 / 高度)。
3. pageXOffset：设置或返回当前页面相对于窗口显示区左上角的 X 位置。
4. pageYOffset：设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
5. screenX：返回窗口相对于屏幕的X坐标(浏览器界面边缘相对于电脑显示屏的边缘)。
6. screenY：返回窗口相对于屏幕的Y坐标(浏览器界面边缘相对于电脑显示屏的边缘)。
   screenLeft screenTop screenX screenY，功能一样，只读整数。IE、Safari、Chrome 和 Opera 支持 screenLeft 和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。
   screenLeft screenTop screenX screenY，功能一样，只读整数。IE、Safari、Chrome 和 Opera 支持 screenLeft 和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。
   window.srceenX || window.srceenLeft记得判断0值时
7. parent：返回父窗口。
   如：

<iframe src="你要嵌套的页面.html" frameborder="0" width="300" scrolling="No" height="200" leftmargin="0" topmargin="0">
</iframe>
//scrolling禁止鼠标滑动，frameborder嵌套页面边框，leftmargin左边距，topmargin上边距

可以在网页中嵌套子网页，那么在子网页中输出window.parent可以找到父级，top直接找最上面的祖级，且这两值只读（不能var等），不可写，不可配置。

8. name：设置或返回窗口的名称。(设置后其它页面都会是该名称)。

二、window 对象属性

1. confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。(确定返回true，取消返回false)
2. prompt()：显示可提示用户输入的对话框。（类似alert框，输入信息后会返回你输入的类容）
   window.onbeforeunload = function (){return 123}关闭窗口前提示返回的信息（现在很多不支持，默认返回浏览器内置的信息）
3. open()：打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace)

window.open(index.html,'jimo','width = 200px,height = 200px')
//里面的window.name = 'jimo'

4. close()：关闭浏览器窗口。
   现在多数浏览器不允许关闭浏览器

三、Navigator 对象

Navigator对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是Netscape的Navigator浏览器，但其他实现了JavaScript的浏览器也支持这个对象。

1. userAgent：返回由客户机发送服务器的user-agent头部的值。
   例如百度页面的控制台里Network里有该属性
   
2. cookieEnabled：返回指明浏览器中是否启用cookie的布尔值。（即记住密码等）
   控制台Application里
   
   
3. onLine：返回指明系统是否处于脱机模式的布尔值。（是否联网）
   离线缓存时作用

四、History 对象

History对象包含用户（在浏览器窗口中）访问过的URL

1. length：返回浏览器历史列表中的URL数量。
   如从空白页面访问百度后再访问淘宝，history.length=3
2. back()/forward()：加载history列表中的前/下一个URL。
   即在百度页面history.back()回到空白页面，history.forward()前进到淘宝
3. go()：加载history列表中的某个具体页面。
   这里就像数组索引，以空白页面为基准，索引为0时表示空白页面，history.go(1)就是百度页面。

五、Screen对象

Screen对象包含有关客户端显示屏幕的信息。每个Window对象的screen属性都引用一个Screen对象。Screen对象中存放着有关显示浏览器屏幕的信息。JavaScript程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用16位色还是使用8位色的图形。另外，JavaScript程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
由于大部分仅IE支持，这里只做了解。

六、Location对象

Location对象包含有关当前URL的信息。
例如某网页：https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%B7%98%E5%AE%9D&fenlei=256&rsv_pq=dd4dc4e70000171b&rsv_t=92834QClSV2e20t1J5FXD8HcNCdgbEUECOZpf9%2Fp3bMaso%2FZfPN2vSyQBQw&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=10&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1969&rsv_sug4=10753#10

协议：https://
域名：www.baidu.com
路径：/s
参数：?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%B7%98%E5%AE%9D&fenlei=256&rsv_pq=dd4dc4e70000171b&rsv_t=92834QClSV2e20t1J5FXD8HcNCdgbEUECOZpf9%2Fp3bMaso%2FZfPN2vSyQBQw&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=10&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1969&rsv_sug4=10753
瞄点：#10

1.Location 对象属性

1. protocol：设置或返回当前URL的协议。
2. host：设置或返回主机名和当前URL的端口号。（域名）
3. pathname：设置或返回当前URL的路径部分。（路径）
4. search：设置或返回从问号(?)开始的URL（查询部分）。（参数）
5. location.search=''?wd=lol页面会搜索lol
6. hash：设置或返回从井号(#)开始的URL（锚）。（瞄点）
   lacation.hash='#20'瞄点改变不刷新页面（浏览器会监控），如单页面应用
7. href：设置或返回完整的URL。
   lacation.href='www.taobao.com'会访问淘宝
   

2.Location 对象方法

1. assign()：加载新的文档。
2. reload(‘force’)：重新加载当前文档。参数可选，不填或填 false 则取浏览器缓存的文档。
3. replace()：用新的文档替换当前文档。（少用）