一个完整的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. BZOJ 3787: Gty的文艺妹子序列 [分块 树状数组!]

    传送门 题意:单点修改,询问区间内逆序对数,强制在线 看到加了!就说明花了不少时间.... 如果和上题一样预处理信息,用$f[i][j]$表示块i到j的逆序对数 强行修改的话,每个修改最多会修改$(\ ...

  2. Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals)

    Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) 说一点东西: 昨天晚上$9:05$开始太不好了,我在学校学校$9:40$放 ...

  3. 基于Appium1.6.X的WebDriverAgent编译、安装

    转自:http://www.cnblogs.com/baconLiu/p/6861431.html tips:WebDriverAgent是Appium1.6.3以后版本新添加的模块,为了让appiu ...

  4. 2018/2/14 设计模式学习笔记(一) 自己实现ArrayList,LinkedList和Iterator,以及在此过程中对于面向对象,面向接口,还有抽象类的一些思考感悟

    因为本人目前为止学习编程不过七个月,所以后面的感悟对于一些大神来说可能嗤之以鼻,但对于一些刚刚入门的萌新来说在理解面向对象的思想上,以及抽象类和接口应该怎么设计等方面应该还是会有所帮助的 首先我们定义 ...

  5. Python中什么时候使用生成器?

    编者注:本文主要参考了<Python核心编程(第二版)> 说到生成器,先说说列表解析.列表解析可以动态创建列表. [expr for iter_var in iterable if con ...

  6. php与web页面交互

    一.web表单 web表单的功能是让浏览者和网站有一个互动的平台.web表单主要用来在网页中发送数据到服务器. 1.1 表单的创建 使用form标记,并在其中插入相关的表单元素,即可创建一个表单. & ...

  7. 几个重要的shell命令:diff patch tar find grep

    diff diir_1.0/ dir_2.0/ -urNB > dir_2.0.patch u:union以合并的格式来输出文件的差异信息 r:递归的对比所有的子目录下的文件 U:将不存在的文件 ...

  8. Redis 学习(二) —— 数据类型及操作

    Redis支持string.list.set.zset.hash等数据类型,这一篇学习redis的数据类型.命令及某些使用场景. 一.String,字符串 字符串是 Redis 最基本的数据类型.一个 ...

  9. IDEA的导包优化问题

    一.现象 文件初始导包状态 package co.x.dw.function; import java.text.SimpleDateFormat; import java.util.ArrayLis ...

  10. FreeSWITCH 内线拨号 总是使用 dialplan/public 拨号计划,而对 dialplan/default 视而不见

    FreeSWITCH 内线拨号 总是使用 dialplan/public 拨号计划,而对 dialplan/default 视而不见 昨天还是 好好的额,  今天 就这样了, 导致 配置都乱了, 搞了 ...