了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率

浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。区别如下:

二、window

Bom的核心对象是window,它表示浏览器的一个实例

在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var name = 'js每日一题';
function lookName(){alert(this.name);
}console.log(window.name);  //js每日一题
lookName();                //js每日一题
window.lookName();         //js每日一题

关于窗口控制方法如下:

  • moveBy(x,y):从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体

  • moveTo(x,y):移动窗体左上角到相对于屏幕左上角的(x,y)点

  • resizeBy(w,h):相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体

  • resizeTo(w,h):把窗体宽度调整为w个像素,高度调整为h个像素

  • scrollTo(x,y):如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置

  • scrollBy(x,y):如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url,也可以打开一个新的浏览器窗口

如果 window.open() 传递了第二个参数,且该参数是已有窗口或者框架的名称,那么就会在目标窗口加载第一个参数指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
==> <a href="http://www.vue3js.cn" target="topFrame"></a>

window.open() 会返回新窗口的引用,也就是新窗口的 window 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性,该属性指向打开他的原始窗口对象

三、location

url地址如下:

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location属性描述如下:

属性名 例子 说明
hash "#contents" utl中#后面的字符,没有则返回空串
host www.wrox.com:80 服务器名称和端口号
hostname www.wrox.com 域名,不带端口号
href http://www.wrox.com:80/WileyCDA/?q=javascript#contents 完整url
pathname "/WileyCDA/" 服务器下面的文件路径
port 80 url的端口号,没有则为空
protocol http: 使用的协议
search ?q=javascript url的查询字符串,通常为?后面的内容

除了 hash之外,只要修改location的一个属性,就会导致页面重新加载新URL

location.reload(),此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载,传递一个参数true即可

四、navigator

navigator 对象主要用来获取浏览器的属性,区分浏览器类型。属性较多,且兼容性比较复杂

下表列出了navigator对象接口定义的属性和方法:

五、screen

保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度

六、history

history对象主要用来操作浏览器URL的历史记录,可以通过参数向前,向后,或者向指定URL跳转

常用的属性如下:

  • history.go()

接收一个整数数字或者字符串参数:向最近的一个记录中包含指定字符串的页面跳转,

history.go('maixaofei.com')

当参数为整数数字的时候,正数表示向前跳转指定的页面,负数为向后跳转指定的页面

history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录
  • history.forward():向前跳转一个页面

  • history.back():向后跳转一个页面

  • history.length:获取历史记录数

21.BOM的理解,常见的BOM对象你了解哪些?相关推荐

  1. JavaScript学习笔记之BOM篇,认识几种常见的浏览器对象

    BOM(Browser Object Document)即浏览器对象模型,顾名思义就是为了控制浏览器的行为而出现的接口.浏览器可以做什么呢?比如跳转到另一个页面.前进.后退等等,程序还可能需要获取屏幕 ...

  2. JavaScript中的BOM操作的常见事件

    BOM操作的常见事件 1.点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序: } 示例1. d1.onclick = function(){ co ...

  3. 深入理解常见的二十三种设计模式

    深入理解常见的二十三种设计模式 文章目录 深入理解常见的二十三种设计模式 一.设计模式的分类 1.1 创建型(五种) 1.2 结构型(七种) 1.3 行为型(十一种) 二.创建型 2.1 单例模式 2 ...

  4. bom更改编号 sap_【BOM精讲】BOM 入门基本常识

    作者:SAP剑客|编辑 SAP天涯Bom定义:Bom里面包含的对象,其中Part.Item.Component都可以称之为部件或者组件.但在真正系统里面Item一般不称之为组件或者部件,仅代表行号,0 ...

  5. 【Day 3】机器阅读理解——常见机器阅读理解模型(下)

    引言 本文介绍常见机器阅读理解模型中的R-NET.FusionNet和QA-Net. 上一篇: 机器阅读理解--常见机器阅读理解模型(上) 下一篇: R-NET R-Net1在Attention计算中 ...

  6. 1.5 深入理解常见类

    第5章 深入理解常见类 5.1 概述 初次接触Android源码,最多见到的一定是sp和wp.如果你只是沉迷于Java世界,那么Looper和Handler也是避不开的.本章的目的,就是把经常碰见的这 ...

  7. BOM学习记录一:BOM解释

    BOM学习记录一:BOM解释 一.什么是BOM 二.BOM的组成 一.什么是BOM 浏览器对象模型,独立于内容而与浏览器窗口进行交互的对象,其核心对象是window BOM是浏览器厂商自己定义的.兼容 ...

  8. [深入理解Android卷一全文-第五章]深入理解常见类

    由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该因为纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. ...

  9. 定义一个dto对象_正确理解DTO、值对象和POCO

    (此文章同时发表在本人微信公众号"dotNET每日精华文章") 今天推荐的文章比较技术化也比较简单,但是对于一些初学者而言,可能也是容易搞混的概念:就是如何理解DTO.值对象和PO ...

  10. java 句柄池_深入理解JVM之Java对象的创建、内存布局、访问定位详解

    本文实例讲述了深入理解JVM之Java对象的创建.内存布局.访问定位.分享给大家供大家参考,具体如下: 对象的创建 一个简单的创建对象语句Clazz instance = new Clazz();包含 ...

最新文章

  1. Java Enumeration接口
  2. WCF4.0新特性体验(6):路由服务Routing Service(下)
  3. python代码写入方式_【Python 1-17】Python手把手教程之——文件的读写以及I/O操作...
  4. jmeter测试java_使用JMeter测试Java项目
  5. Swift编程语言学习2.1——基础运营商(在)
  6. windows 2502 2503 错误解决
  7. 7.Working with External Libraries
  8. 二维前缀和(附模板题)
  9. [2019杭电多校第四场][hdu6616]Divide the Stones
  10. Oracle10g在Win2008R2下因版本无法安装问题的解决
  11. Debian系统下在Qtcreator执行qml程序报:module “QtQuick“ is not installed
  12. 最新黑马java十次方社交项目教程
  13. 高中计算机编程内容,高中信息技术课程标准
  14. Win 10 专业版重新激活详细操作步骤
  15. 突然间电脑的复制粘贴不能用了???
  16. MySQL数据库性能优化--数据分库分表
  17. tcl/tk 的原生界面
  18. Idea 中出现:运行 Test 时出错。命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行,然后重新运行。
  19. 【数据增强】Cutout
  20. Google Docs API 介绍

热门文章

  1. 数据库连接池的管理思想
  2. Excel合并单元格怎么分组排序?
  3. 获奖团队访谈录|“AI+无线通信”赛道三等奖团队
  4. gensim官方文档实践笔记
  5. JAVA:使用华为云存储OBS处理文件
  6. 小程序源码:随机头像大全,多分类带历史记录-多玩法安装简单
  7. 云计算在美国的五年是如何发展的?
  8. file html5 样式,CSS小技巧之自定义个性的file表单样式
  9. matlab图形黎曼几何,张思容
  10. arnold渲染器预览窗口打开时保存有可能崩溃,解决方法如下