JavaScript之BOM浏览器对象模型

一、BOM 概述

• 什么是BOM
  BOM(Browser Object Model) 即浏览器对象模型 ，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
  BOM缺乏标准，JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分
  
• BOM的构成
  BOM比DOM更大，包含DOM
  

二、window对象的常见事件

• 窗口加载事件，当文档内容完全加载完成后会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

window.onload=function(){}
或者
window.addEventListener("load",function(){})

//DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等   ie9以上才支持
document.addEventListener('DOMContentLoaded',function(){})

• 调整窗口大小事件

//窗口变化就会触发
window.onresize=function(){}
window.addEventListener("resize",function(){})
//获取窗口的大小,使用window的innerWidth
	window.innerWidth

三、定时器

• 定时器 setTimeout() setInterval()

//setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
window.setTimeout(调用函数,[延迟的毫秒数]);

• 这个调用函数可以直接写函数，或者写函数名或者采用字符串’函数名()‘三种形式，第三种不推荐,延迟的毫秒数省略默认是0，如果写，必须是毫秒

• 停止setTimeout定时器

window.clearTimeout(timeID)

• setInterval()定时器

//setInterval()方法重复调用一个函数，每隔这个事件，就去调用一次回调函数
window.setInterval(回调函数,[间隔的毫秒数]);

• 停止setInterval()定时器

//取消先前通过调用setInterval()建立的定时器
clearInterval(intervalID);

• this 的指向问题

  this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一半情况下this的最终指向的是那个调用它的对象

//全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
console.log(this);

function fn(){
console.log(this)
};
fn();


//方法调用中谁调用this指向谁
var o={
sayhi: function(){
	console.log(this);
}
}
o.sayhi();

var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this);    //this 指向button按钮
}
/构造函数中this指向构造函数的实例
function fun(){
console.log(this)
}
var fun =new fun();

四、JS执行机制

• JS是单线程
• 同步和异步
  HTML5提出Web Worker 标准 允许JavaScript脚本创建多个线程，于是JS中出现了同步和异步
  

五、location对象

• 用于获取或设置窗体的URL ，并且可以用于解析URL，因为这个熟悉返回的是一个对象，所以也称之为location对象

• URL
  统一资源定位符 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
  

• location对象的属性
  location.href 获取或这只整个URL
  location.host 返回主机（域名）
  location.prot 返回端口号，如果未填写，返回空字符串
  location.pathname 返回路径
  location.search 返回参数
  location.hash 返回片段 #后面内容 常见于链接 锚点

• location对象的方法
  location.assign() 跟href 一样，可以跳转页面 也称之为重定向
  location.replace（） 替换当前页面，因为不记录历史，所以不能后退页面
  location.reload() 重新加载页面，相当于刷新页面

六、navigator 对象（了解）

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

七、history对象（了解）

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

• history对象方法
  back() 可以实现后退功能
  forward()前进功能
  go(参数) 前进后退功能 参数如果是1 前进一个页面 如果是-1 后退一个页面

本文地址：https://blog.csdn.net/mayidream/article/details/107385511