JavaScript组成之BOM

javascript BOM
web前端
发布日期:   2021-08-20
更新日期:   2021-09-11
文章字数:   2.1k
阅读时长:   8 分
阅读次数:  

JavaScript组成之BOM

BOM概述

概念

  • BOM(Browser Object Model - 浏览器对象模型)– 指的是在JavaScript中会将一个页面抽象成一个对象来进行操作
  • JavaScript内置了很多API来对页面本身进行操作—比如：新建或关闭网页、前进、后退、刷新修改页面地址等。
  • JavaScript BOM负责了 程序和页面本身之间的交互。开发人员通过JavaScript提供的api来进行操作
  • BOM将页面抽象为了一个对象即window对象(每个页面的专属对象,每个页面只有一个)，是BOM的核心内容。

BOM的构成

window

  • BOM 包含 DOM。

  • window 对象是浏览器的顶级对象，它具有双重角色

  • 它是 JS 访问浏览器窗口的一个接口

  • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

  • 在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。

window对象相关api(方法)

  • window.confirm(): 显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框,会返回一个布尔类型值

  • window.close(): 用于关闭当前页面

  • window.open(): 创建一个新的浏览器窗口对象

    //语法
window.open("页面地址","_self/_blank","页面尺寸和位置")；
//注：_self是在当前页面打开新标签页    _blank是创建一个新的标签页
//例
window.open('http://www.baidu.com','_blank','width=500,height=500,left=300,top=100')
//注：后面设置的页面尺寸和位置不需要带单位

  • window.innerWidth&window.innerHeight返回以像素为单位的窗口（首屏）的内部宽度和内部高度

     console.log(innerWidth,innerHeight);

在使用window对象相关api时，可以省略window.前缀

  1. 所有全局变量都是window的属性
  2. 所有全局的函数都是window的方法
window.alert();
alert();
//具有相同的效果

window的内置对象

location

概念：

  • location代表当前浏览器的地址栏信息url，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

  • 直接输出location，则可以获取到地址栏的信息（当前页面的完整路径）

    console.log(location);
//http://127.0.0.1:5501/day17/source/day17/03.Location.html

扩展url

  • 概念：url(uniform resouce locator)统一资源定位符，是互联网上标准资源的地址。互联网上的每一个文件都有一个唯一的URL。

  • 一般语法格式

    protovol://host[:port]/path/[?query]#fragment

http://localhost/index.html?name=andy&age=18#link
    组成 说明
    protocol 通信协议 常用的http,https等
    host 主机(域名) www.baidu.com 本机 localhost/127.0.0.1
    port 端口号，可选
    path 路径 由零或多个’/‘符号隔开的字符串
    query 参数 以键值对的形式，通过&符分隔开来
    fragment 片段 #后面内容 常见于链接 锚点

页面跳转

  • 若直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并产生相应的历史记录；

    location="http://www.baidu.com";

  • href 获取或设置整个URL

    //语法
location.href="新地址";//跳转到新页面，保存历史记录

  • assign()

    //语法
location.assign("新地址"); //跳转到新页面，保存历史记录

以上三种方式功能上没有任何区别，

  • replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转页面,不会生成历史记录，不能使用回退按钮回退

  • //语法
location.replace("新地址");

replace()与其他方式的区别在于，在跳转页面后，没有回退的历史记录，不能回退到之前的页面

刷新页面

  • reload()用于重新加载当前页面，作用和刷新按钮一样

    //语法
location.reload();
//如果在方法中传递一个`true`作为参数，则会强制清空缓存刷新页面  ctrl+f5

在页面之间传递数据

  • search属性 返回参数

  • 概述

    • 当提交表单，浏览器会把表单里写的数据通过location.search传递到提交的页面。在提交的页面上通过location.search获得对应的数据，利用字符串api解析其中的数据

  • 示例

    书写登录框，点击登录跳转到index.html

    <body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

    在index.html获取登录参数

     // 获取URl中的参数
var data=location.search;//?user=admin&pass=123
// 利用字符串api截取？之后的数据
data=data.substring(1);
// 获取用户名
data=data.replace("user=","");
// 获取密码
data=data.replace("pass=","");
// 转换为字符串数组
data=data.split("&");//["admin","123"]

history

概念

  • 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
  • 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 ,而且该操作只在当次访问时有效
  • 该对象包含用户（在浏览器窗口中）访问过的 URL

相关属性方法

  • go()根据传入的数字来决定是前进还是后退指定的步数
  • forward()前进一步
  • back()后退一步
history.go(2);前进2步
history.go(-1);后退一步
history.forward():前进一步
history.back();后退一步

以上是根据页面保存的页面历史，来前进后退。

概念

  • 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

属性

  • userAgent:返回浏览器的版本信息

  • userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容

  • 不同的浏览器会有不同的userAgent可以配合正则表达式以及字符串api来实现浏览器版本检测功能

    //火狐的userAgent
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
//Chrome的userAgent
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
//IE11
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
// 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
//如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
 比如：ActiveXObject

screen

概念

  • 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

  • 因为兼容性问题。实用性不强

    console.log(screen);

document会在DOM中——请移步到DOM查看

定时器

概念

  • 定时器是指JavaScript提供了相应的api能够实现一段时间之后执行代码。类似于生活中的 延时自拍或定时闹钟，会在指定时间之后才会执行

分类

  • 延时定时器：在一段时间之后执行一次指定代码
  • 间隔定时器：每隔一段时间之后就执行一次指定的代码

延时定时器 setTimeout()

  • setTimeout(函数，[延时时间]) : 设置延时定时器 回调函数 callback

    var 定时器标识符 = setTimeout(function(){
},延时时间);
例子：5秒后提示自拍
var timer = setTimeout(function(){
     所要执行的代码
},5000);//延时时间以毫秒为单位  1秒 = 1000毫秒 默认为0

var timer=setTimeout(()=>{
    执行代码；
},1000)

  • clearTimeout(定时器标识)：停止(清除)延时定时器,取消了先前通过调用 setTimeout()建立的定时器

    clearTimeout(定时器标识符);
例子：
clearTimeout(id);

    普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。

间隔定时器 setInterval()

  • setInterval(函数,[间隔时间])：重复调用一个函数，每隔这个时间，就去调用一次回调函数

    setInterval(function(){
    //执行代码
},[间隔时间]);
//例子：每隔1秒输出一次当前时间
var timer =setInterval(function(){
    console.log(new Date())
},1000); //间隔时间以毫秒为单位  1秒 = 1000毫秒 默认为0

  • clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器

    clearInterval(定时器标识符);
//例子：
clearInterval(timer);

    延时定时器和间隔定时器都会 ，返回一个Number类型的数据

    这个数字用来作为定时器的唯一标识

文章作者: 时光路人
文章链接: https://codehan045.github.io/posts/73cc49c3.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 时光路人 !
javascript BOM
赏
评论
  目录