当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript之BOM浏览器对象模型

JavaScript之BOM浏览器对象模型

2020年07月17日  | 移动技术网IT编程  | 我要评论

一、BOM 概述

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网