一个完整的JavaScript实现由三部分组成:

  • ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等)
  • DOM:文档对象模型,·DOM把整个页面映射成一个多层节点结构(树形),从而我们可以自如的删除、添加、替换或修改任何节点
  • BOM:浏览器对象模型,支持访问和操作浏览器窗口,使用BOM可以控制浏览器显示的页面以外的部分。

BOM提供了很多对象,用于访问浏览器的功能,以下逐一介绍:

1、window对象

window对象是BOM的核心对象,在浏览器中window对象有两个作用:①充当全局作用域②表示浏览器窗口

①充当全局作用域

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

var a =1;
alert(window.a);//
function fun(){
alert(this.a);
}
window.fun();//

②表示浏览器窗口

  • 窗口位置 screenLeft、screenTop(Firefox不支持这两个属性)分别表示窗口相对于屏幕左边和上边的位置;
    在Firefox浏览器中用screenX、screenY来提供相应的窗口位置信息;以上的属性都无法保证在跨浏览器的条件下取得窗口左边和上边的精确坐标值。
    window.moveTo(新位置的X的坐标新位置的Y的坐标)、window.moveBy(水平方向上移动的像素数,垂直方向上移动的像素数) 方法可以将窗口精确地移动到一个新的位置。
    这两个方法不适用与框架,只对外层的window对象使用,且在Opera和IE7+中默认是禁用的
  • 窗口大小 outWidth,outHeight;innerWidth、innerHeight  在各个浏览器中所表示的大小含义有所不同
  • 打开窗口 window.open() 既可以打开一个新的浏览器窗口也可以导航到一个特定的URL
    语法:window.open(URL,name,features,replace)

    • URL:要加载的URL;
    • name:可选,窗口的目标 可以是窗口或框架的名字,如果有具有该名字的窗口或框架中,就会在其中加载第一个参数指定的URL,否则就会创建一个新的窗口并为其命名为name;也可以是_self,_parent,_top或者_blank;
    • features 可选,由逗号分隔的设置字符串,表示在新窗口中都显示哪些特性,如:height、left、resizable、status等。在不打开新窗口的情况下会忽略该参数,如果忽略,打开新窗口时采用默认设置;
    • replace 可选,一个布尔值,表示新页面是否取代浏览器历史记录中当前加载页面,该参数只有在不打开新窗口的情况下使用。
  • 窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中可以通过数组索引或者框架名称来访问相应的window对象  如:window.frames[0]
  • 显示”打印“对话框  window.print();

2、location对象:表示当前页面的URL信息

location对象提供了与当前窗口中加载的文档的URL有关的信息;通过访问location的不同的属性可以访问url中不同的片段信息

  • href 返回当前加载页面的完整URL
  • host 返回服务器名称和端口号(如果有)
  • hostname 返回不带端口号的服务器名称
  • hash 返回URL中的hash(#后面的零或多个字符)
  • port 返回URL中指定的端口号。如果URL中不包括端口号则这个属性返回空字符串
  • protocol 返回页面使用的协议。通常是http:或https:
  • pathname 返回URL中的目录和文件名
  • search 返回URL的查询字符串。这个字符串以问号开头

3、navigator对象:提供了与浏览器有关的信息

navigator对象的属性通常用于监测显示网页的浏览器的类型。每个浏览器中的Navigator对象都有一套自己的属性,以下列出部分属性:

  //每个属性的值根据所用的浏览器的不同而不同
//appName 完整的浏览器名称
document.write(navigator.appName+"<br/>");//Netscape //language 浏览器的主语言
document.write(navigator.language+"<br/>");//zh-CN //onLine 表示是否连接到了因特网
document.write(navigator.onLine+"<br/>");//true //platform 浏览器所在的系统平台
document.write(navigator.platform+"<br/>");//Win64 //userAgent 浏览器的用户代理字符串
document.write(navigator.userAgent+"<br/>");//Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

4、screen对象:保存着与客户端显示器(屏幕)有关的信息

screen对象用处不大,基本上只用来表示客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。以下列出部分属性:

 //每个属性的值根据所用的设备不同而不同
//availHeight 屏幕的像素高度减系统部件高度之后的值
document.write(screen.availHeight);// //height屏幕的像素高度
document.write(screen.height);// //availWidth屏幕的像素宽度减系统部件宽度之后的值
document.write(screen.availWidth);// //width屏幕的像素宽度
document.write(screen.width);// //colorDepth用于表示颜色的位数
document.write(screen.colorDepth);//

5、history对象:保存着用户上网的历史记录

go()方法可以在用户的历史记录中任意跳转
  history.go(-1);//后退一页
  history.go(1);//前进一页
  history.go(2);//前进两页

back()方法模拟浏览器的“后退”按钮

  history.back();//后退一页

forward()方法模拟浏览器的“前进”按钮

  history.forward();//前进一页

history也不常用,在创建自定义的“后退”和“前进”按钮时经常使用到。

history还有个length属性,保存着历史记录的数量。当页面的URL改变时,就会生成一条历史记录。

BOM(浏览器对象模型)的一些操作的更多相关文章

  1. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  2. JavaScript——BOM(浏览器对象模型),时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  3. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  4. javascript之BOM浏览器对象模型引入

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  6. JavaScirpt(JS)——BOM浏览器对象模型

    一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...

  7. JavaScript(二、BOM 浏览器对象模型)

    一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...

  8. BOM—浏览器对象模型(Browser Object Model)

     1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser ...

  9. JS第三部分--BOM浏览器对象模型

    一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...

  10. BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

随机推荐

  1. Java8之Lambda表达式基础

    Java 8中,将会提供对lambda的支持,函数式编程FP(Functional Programming)将会得到很好地支持,而函数式编程的一个重要特点就是适合并行运算. λ:希腊字母表中排序第十一 ...

  2. 序列化和反序列化及Protobuf 基本使用

    序列化和反序列化 序列化和反序列化在平常工作中会大量使用,然而并不一定非常清楚它的概念.序列化和反序列化的选型却是系统设计或重构一个重要的环节,在分布式.大数据量系统设计里面更为显著.机器间的通信需要 ...

  3. BZOJ 3624: [Apio2008]免费道路 [生成树 并查集]

    题意: 一张图0,1两种边,构造一个恰有k条0边的生成树 优先选择1边构造生成树,看看0边是否小于k 然后保留这些0边,补齐k条,再加1边一定能构成生成树 类似kruskal的证明 #include ...

  4. POJ 3581 Sequence [后缀数组]

    Sequence Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 6911   Accepted: 1543 Case Tim ...

  5. 《深入理解Java虚拟机》——Java内存区域与内存溢出异常

    程序计数器(Program Counter Register):一块较小的内存空间,可看作是当前线程所执行的字节码的行号指示器.字节码解释器工作时通过改变这个计数器的值来选取下一条需要执行的字节码指令 ...

  6. Visual Studio 2017 for Mac 快捷键

    格式化代码:  ^I 转到定义:⌘D 注释/反注释: ⌘/ 生成:⌘B 重新生成:^⌘B 调试运行:⌘↩ 不调试运行:⌥⌘↩ 添加/删除断点:⌘\ 查看所有断点:⌥⌘↩ 放大:⌘+ 缩小:⌘- 正常大 ...

  7. typedef介绍

    1.typedef是什么? typedef是C中的类似于extern/static的一个关键字,用于为一种类型引入一个新的名字.并不会分配内存. 2.typedef常见用法? 1) typedef i ...

  8. BCDEdit命令添加WinPE启动项

    bcdedit /create {ffffffff-8d96-11de-8e71-ffffffffffff} /d "系统维护" /device bcdedit /create   ...

  9. 关于Git的版本问题

    问题的起源 我在IDEA上不小心修改了文件(加了一行空行)并且被保存了,在GitHub Desktop桌面工具上可以看到changes中有修改记录,并且使用命令行git status也可以看到文件的修 ...

  10. Ubuntu Linux 与 Windows 7双系统安装教程(图文)

    前期准备: 1. 备份你的重要数据到其他设备上,以防不测2. 准备linux镜像.可以到ubuntu官网下载iso格式的文件.(注意:如果你是双显卡,不要随便下.amd的双显卡请选择含有"a ...