JS BOM 3

概念

1 BOM -- 浏览器对象模型 -- 顶级对象 window 是JS 与浏览器进行交互的一个接口

2 全局作用域下的 变量 和 函数, 都是全局对象 window 对象的属性和方法

3 offset 和 style 的区别
---------------------------------------------------------------------------------
  1 offset 可读取所有样式表中的样式   /  style 只能读写取行内样式
  2 offset 系列读取的值没有单位       /  style.width 得到的是带有单位的字符串
  3 offsetWidth 读取的是边框盒的宽度  /  style.width 读写的是内容盒的宽度
  4 offsetWidth 等属性是只读属性      /  style.width 是可读可写属性
  5 offset 只获取元素大小和位置用     /   style 多用于给元素更改值
---------------------------------------------------------------------------------

window 事件

1 页面加载事件
    1 window.onload = function() {}   等页面全部元素加载完毕, 才会执行这个事件
    2 window.addEventListener("DOMContentLoaded", function() {})  等页面结构加载完毕, 就会执行这个事件
  
2 浏览器窗口大小发生变化触发的事件
    1 window.onresize = function () {}
    2 window.innerWidth  --  当前视口宽度
    3 window.innerHeight  --  当前视口高度
        
3 浏览器滚动条发生变化触发的事件
    document.onscroll = function() {}

window 下的元素属性

1 offset -- 常用于获取元素的位置 (Top / Left -- Width / Height)
	1 hh.offsetTop   获取距离最近的带有定位的祖先元素的顶部距离，若没有就获取元素距离浏览器视口顶部的距离
	2 hh.offsetWidth   返回元素带 border 的宽度
	
2 client -- 常用于获元素的大小
	1 hh.clientWidth   返回元素不带边框的宽度
	2 html.clientHeight   返回浏览器视口的高
	
3 scroll -- 常用于获取滚动的距离
	1 window.scrollTo(200, 200)   设置滚动条被卷去的宽高
	2 window.pageXOffset   读取 document被卷去的长度
	3 html.scrollLeft   读写document被卷去的左边的宽度
	4 hh.scrollTop   读写hh的子元素被卷去的头部高度

window 方法

1 实现页面跳转功能
	btn.onclick = function() { window.open( "url", "_self",) }   参数二 "_blank"新页面打开
	
2 一次性定时器
	var time1 = setsetTimeout (function() {}, 1000)
	clearTimeout( timer1 )
	
3 一直执行的定时器
	var time2 = setInterval( test, 1000)
	function test () { console.log (" 哈哈 ")}
	clearInterval(time2)

window 下的对象

1 location 对象包含当前页面的 URL 相关信息
-------------------------------------------------------------------------------------------
  1 属性
	1 location.href    设置或返回完整的 URL
	2 location.host    返回域名和当前 URL 端口号   {主机名 == 域名}
	3 location.port    设置或返回当前 URL 的端口号
	4 location.pathname    返回路径
	5 location.search    返回参数
	6 location.hash    返回片段 
  2 方法
	1 location.assign()   加载新的文档
	2 location.replace()   用新的文档替换当前文档
	3 location.reload()   重新加载当前文档 == 刷新, 参数为true == 去缓存刷新 Ctrl+F5
-------------------------------------------------------------------------------------------

2 history 对象包含有关用户的访问历史记录
-------------------------------------------------------------------------------------------
	1 history.length   返回浏览器历史列表中的 URL 数量
	2 history.forward()   加载 history 列表中的下一个 URL  前进
	3 history.back()    加载 history 列表中上一个 URL  后退
	4 history.go()   加载 history 列表中某个具体页面, 参数如果是1前进一个页面  如果是 -1后退一个页面
-------------------------------------------------------------------------------------------

3 navigator 对象用于提供用户与浏览器相关的信息
-------------------------------------------------------------------------------------------
	1 navigator.appVersion   返回浏览器的平台和版本信息
	2 navigator.userAgent   返回用户浏览器发送服务器的 user-agent 头部的值
-------------------------------------------------------------------------------------------