之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成:

ECMAScript核心语法BOMDOM。今天就和大家详细说一下BOM的一些基础知识。

BOM

BOM通常被称为浏览器对象模型,主要描述了与浏览器交互的方法和接口。

作为JavaScript的一部分,因为每个浏览器对自己的BOM的实现方式不同,BOM并没有任何标准。

BOM主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM的一部分。扩展包括:

-弹出新的浏览器窗口

-移动、关闭浏览器窗口以及调整窗口大小

-提供Web浏览器的详细信息的定位对象

-提供用户屏幕分辨率想信息的屏幕对象

-对cookie的支持

-IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

虽然每种浏览器都有自己的 BOM 实现。有一些事实上的标准,如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

下面是一些BOM当中包含的对象。

-Window对象

-Navigator对象

-Screen对象

-History对象

-Location对象

window对象

浏览器里面,window对象指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属

常用window对象的属性

window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口。

window.close()方法关闭窗口。

window.screenXwindow.screenY属性,返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离(单位像素)。这两个属性只读。

window.innerHeightwindow.innerWidth属性,返回网页在当前窗口中可见部分的高度和宽度,即视口(viewport)的大小(单位像素)。这两个属性只读。

window.scrollX属性返回页面的水平滚动距离,window.scrollY属性返回页面的垂直滚动距离,单位都为像素。这两个属性只读。注意,这两个属性的返回值不是整数,而是双精度浮点数。如果页面没有滚动,它们的值就是0。

Navigator对象

window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。

Navigator属性

navigator.userAgent属性返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。

Navigator.plugins属性返回一个类似数组的对象,成员是 Plugin 实例对象,表示浏览器安装的插件,比如 Flash、ActiveX 等

navigator.onLine属性返回一个布尔值,表示用户当前在线还是离线(浏览器断线)。

Screen 对象

Screen 对象表示当前窗口所在的屏幕,提供显示设备的信息。

Screen常用属性

Screen.height:浏览器窗口所在的屏幕的高度(单位像素)。除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。

Screen.width:浏览器窗口所在的屏幕的宽度(单位像素)

Location对象

Location对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。

Location对象常见属性

-Location.href:整个 URL。

-Location.protocol:当前 URL 的协议,包括冒号(:)。

-Location.host:主机,包括冒号(:)和端口(默认的80端口和443端口会省略)。

-Location.hostname:主机名,不包括端口。

-Location.port:端口号。

-Location.pathname:URL 的路径部分,从根路径/开始。

-Location.search:查询字符串部分,从问号?开始。

-Location.hash:片段字符串部分,从#开始。

-Location.username:域名前面的用户名。

-Location.password:域名前面的密码。

-Location.origin:URL 的协议、主机名和端口。

相关方法

assign()方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

replace()方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

它与assign方法的差异在于,replace会在浏览器的浏览历史History里面删除当前网址,也就是说,一旦使用了该方法,后退按钮就无法回到当前网页了,相当于在浏览历史里面,使用新的 URL 替换了老的 URL。它的一个应用是,当脚本发现当前是移动设备时,就立刻跳转到移动版网页。

reload()方法使得浏览器重新加载当前网址,相当于按下浏览器的刷新按钮。

toString()方法返回整个 URL 字符串,相当于读取Location.href属性。

History 对象

History对象表示当前窗口的浏览历史

History对象常用属性

History.back():移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。

History.forward():移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。

History.go():接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,比如go(1)相当于forward()go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。

js基础知识--BOM的更多相关文章

  1. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  4. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  5. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  6. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  7. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础知识总结(2016.11.1)

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. Go语言基础六:结构体和方法

    结构体 结构体是一个由用户定义的复合类型,它由一系列属性组成,每个属性都有自己的类型和值.Go语言中数组可以存储同一类型的数据,但在结构体中用户可以为不同项定义不同(或相同)的数据类型.结构体是值类型 ...

  2. C++ 实现可变参数的三个方法

    有时我们无法提前预知应该向函数传递几个实参.例如,我们想要编写代码输出程序产生的错误信息,此时最好用同一个函数实现该项功能,以便对所有错误的处理能够整齐划一.然而,错误信息的种类不同,所以调用错误输出 ...

  3. [apue] 文件中的空洞

    空洞的概念 linux 上普通文件的大小与占用空间是两个概念,前者表示文件中数据的长度,后者表示数据占用的磁盘空间,通常后者大于前者,因为需要一些额外的空间用来记录文件的某些统计信息或附加信息.以及切 ...

  4. Vue ref属性 && props配置项

    1 // # ref属性: 2 // # 1.用来给元素或者子组件注册引用信息(id的替代者) 3 // # 2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc) ...

  5. 最近公共祖先(LCA)学习笔记 | P3379 【模板】最近公共祖先(LCA)题解

    研究了LCA,写篇笔记记录一下. 讲解使用例题 P3379 [模板]最近公共祖先(LCA). 什么是LCA 最近公共祖先简称 LCA(Lowest Common Ancestor).两个节点的最近公共 ...

  6. Changes in GreatSQL 8.0.25-16(2022-5-16)

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1.新增特性 1.1 新增仲裁节点(投票节点)角色 1.2 新增快速单主模式 1.3 新增MGR网络开销阈值 1.4 ...

  7. ebook下载 | 《 企业高管IT战略指南——企业为何要落地DevOps》

    "当下,企业DevOps转型不仅是IT部门的事情,更是企业高管必须关注的焦点.DevOps是一项需要自上而下推动的变革运动,只有从顶层实施,才能获得成功.本书将介绍企业高管必须了解的,Dev ...

  8. java-流的使用完结与异常处理机制

    1.1java.io.objectInputStream 对象输入流:用于将一组字节(通过对象输出流写出对象而转换的一组字节)读取并转换为对应的对象.对象输出流将对象写出时转换为一组字节的过程,称为: ...

  9. Apple Music 免费试用 2 个月

    下载地址:https://redeem.apple.com/am-genshin-impact-2mo-zh-cn?origin=&locale=zh-CN 使用指南 打开链接,点击" ...

  10. wsl创建证书让chrome浏览器识别

    我在wsl里面测试http2协议的时候,在wsl用openssl创建了证书, 然后我把证书放在windows证书管理后,用chrome打开发现提示这个: 虽然可以点击下面的强制 访问 但是chrome ...