JavaScript BOM(笔记)

1. 认识BOM

• 浏览器对象模型( Browser Object Model )
• 它提供了独立的内容与浏览器窗口进行交互的对象，其核心对象是window
• BOM由document、location、navigation、screen、history构成

2. window事件

• onload 与 DOMContentLoaded

  // 第一种
  // onload 等到页面中的所有元素加载完成之后触发
  window.onload = function(){
  // js 代码
  }
  
  // 第二种
  // DOMContentLoaded 文档内容加载完成就触发(不包括css样式)
  // DOMContentLoaded 是在 load 之前触发
  // 不能 window.onDOMContentLoaded 这样的写法
  window.addEventListener("DOMContentLoaded",()=>{})
  

• resize

  // 浏览器窗口大小改变时触发
  window.onresize = function(){
  
  }
  

3. window方法

• setTimeout( 设置延迟 ) 与 setInterval( 定时器 )

  // 它们两个也是window的方法，但是可以不用window点去触发
  // this指向window
  setTimeout(参数一，参数二，...[参数，参数])
  // 参数一：回调函数
  // 参数二：设置时间值，单位毫秒，到达时间执行回调函数
   // 参数三：是传给回调函数的实参
  
  setInterval(参数一，参数二)
  // 和 setTimeout 一样，不过每到参数二的时间会执行一次参数一的回调函数，会一直触发
  
  // 清除，设置定时器会有返回值，可以用一个变量去接收它
  let time1 = setTimeout(()=>{},1000)
  clearTimeout(time1)
  
  let time2 = setInterval(()=>{},1000)
  clearInterval(time2)
  

• window.open()：打开新窗口

• window.close()：关闭当前窗口

• window.moveTo()：移动当前窗口

• window.resizeTo()：调整当前窗口尺寸

4. window属性

4.1 页面滚动

• window.scrollX 与 window.pageXOffset一样
• window.scrollY 与 window.pageYOffset 一样
• 他们都是获取页面对应的滚动距离
• window.scrollTo(x, y)：滚动对应的距离

4.2 窗口大小

• innerWidth, innerHeight

  返回浏览器窗口大小

• outerWidth, outerHeight

  返回整个浏览器大小，包括工具栏和导航栏

5. location对象

5.1 URL的组成

协议头 主机地址 端口 路径 ? 参数#锚点

组成	说明
protocol：协议头( 必须 )	http://、https://、file://等
host：主机地址( 必须 )	192.168.2.11、或者域名www.baidu.com等
port：端口( 必须，默认值会把省略 )	80、8080、22等
path：路径( 必须，默认值会把省略 )	查询资源位置，/路径/路径/index.html
query：参数	?参数1=值&参数2=值&参数3=值
fragment：锚点	#后面内容，常用锚点链接

5.2 location对象的属性

location对象的属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机地址( 或域名 )
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面内容

5.3 location对象的常见方法

location对象方法	返回值
location.assign()	和 href 一样，可以跳转页面
location.replace()	替换当前页面，并且不能返回历史页面
location.reload()	重新加载页面( 刷新页面 )，如果参数为true，就是强制刷新

6. navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

7. history对象

window对象给我们提供了一个 history 对象，与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL

history对象	作用
history.back()	可以后退功能
history.forward()	前进功能
history.go(参数)	参数为1前进，为 -1后退