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