BOM(浏览器对象模型)主要用于管理浏览器窗口,它提供了大量独立的、可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关。浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

1.1使用window对象

window对象是BOM的核心,代表浏览器窗口的一个实例。在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

1.1.1 访问浏览器窗口

通过window对象可用访问浏览器窗口。

浏览器对象简单说明如下:

window

客户端JavaScript中的顶层对象。

navigator

包含客户端有关浏览器的信息。

screen

包含客户端显示屏的信息。

history

包含浏览器窗口访问过的URL信息。

location

包含当前网页文档的URL信息。

document

包含整个HTML文档,可被用来发访问文档内容,及其所有页面元素。

1.1.2全局作用域

客户端JavaScript代码都在全局上下文环境中运行,window对象提供了全局作用域。

下面用法:

var a = '我是程序员';
window.b = 'window.b';
c = '我喜欢js';
document.write(delete window.a);
document.write(delete window.b);
document.write(delete window.c + '<br>');
document.write(window.a);
document.write(window.b);
document.write(window.c);

使用var语句声明全局变量,window会为这个属性定义一个名为‘configgurable’的特性。

1.1.3 使用系统测试方法

window对象定义了3个人机交互的接口方法:

  1. alert():简单的提示对话框,由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。

  2. confirm():简单的提示对话框,由浏览器向用户弹出提示性信息。不过该方法弹出的对话框包含两个按钮,‘确认’和‘取消’。

  3. prompt():弹出提示对话框,可以接收用户输入的信息,并把用户输入的信息返回。

用法1:

var user = prompt('请输入你的用户名:');
if (!!user) {
var ok = confirm('你输入的用户名为:\n' + user + '\n请确认。');
if (ok) {
document.write('欢迎您:\n' + user);
} else {
user = prompt('请重新输入你的用户名:');
document.write('欢迎您:\n' + user);
}
} else {
user = prompt('请输入你的用户名:');
}

这3个仅接收纯文本信息,用户只能使用空格、换行符和各种符号来格式化提示对话框中的显示文本。不同浏览器对于这3个对话框的显示效果略有不同。

用法2

window.alert = function (title, info) {
var box = document.getElementById('alert_box');
var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd><\/dl>';
if (box) {
box.innerHTML = html;
box.style.display = 'block';
} else {
var div = document.createElement('div');
div.id = 'alert_box';
div.style.display = 'block';
document.body.appendChild(div);
div.innerHTML = html;
}
}
alert('我是程序员', '我喜欢Js!');

1.1.4 控制窗口位置

使用window对象的moveTo()moveBy()方法可以将窗口精确地移动到一个新位置。这两个方法接收两个参数,其中moveTo()接收的是新位置的x和y坐标值,而moveBy()接收的是在水平和垂直方向上移动的像素数。

下面用法:

window.moveTo(0, 0);
window.moveBy(0, 100);
window.moveTo(200, 300);
window.moveBy(-50, 0);

1.1.5 使用定时器

window对象包含4个定时器专用方法,使用他们可以实现倒霉定时运行,避免连续运行。就可以设计动画。

1. setTimeout()方法

定义:

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法:

var o=setTimeout(code,millisec)

参数:

code (必需。要延时执行的代码字符串。)
millisec 必需。在执行代码前需等待的毫秒数。)


下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
}
function f(o) {
var out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

2. clearTimeout()方法

定义:

clearTimeout()方法可取消由setTimeout()方法设置的timeout。

语法:

clearTimeout(id_of_settimeout)

参数:

id_of_settimeout(由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块。)

下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
o[i].onmouseout = function (i) {
return function () {
clearTimeout(o[i].out);
}
}(i);
}
function f(o) {
o.out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

3. Setlnterval()方法

定义:

setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法:

setInterval(code,millisec[,"lang"])

参数:

code(必需。要调用的函数或要执行的代码串。)

millisec(必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。)

下面用法:

var t = document.getElementsByTagName('input')[0];
var i = 959;
var out = setInterval(f, /*24 * 60 * 60 */ 1000);
function f() {
t.value = i--;
if (i <= 0) {
crearTimeout(out);
document.write('冬奥会已到!');
}
}

在动画设计中,setInterval()方法适合在不确定的时间内持续执行某个动作,而setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。

1.2 使用navigator对象

navigator对象包含了浏览器的基本信息,如名称、版本和系统等。利用它的属性来读取客户端基本信息。

1.2.1 浏览器检测方法

浏览器检测的方法有多种。

常用方法包括2种:

特征检测法

字符串检测法

1. 特征检测法

特性检测法就是根据浏览器是否支持特定功能来决定操作的方式。

下面用法:

if (document.getElementsByName) {
var a = document.getElementsByName('p');
} else if (document.getElementsByTagName) {
var a = document.getElementsByTagName('p');
}

2. 字符串检测法

使用用户代理字符串检测浏览器类型。

下面用法:

var s = window.navigator.userAgent;
console.log(s);

1.2.2 检测插件

可以使用navigator对象的plugins属性实现。而plugins是一个数组。

该数组中的每一项都包含下列属性:

name

插件的名字。

description

插件的描述。

filename

插件的文件名。

length

插件所处理的MIME类型。

下面用法:

function hasPlugin(name) {
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
document.write(hasPlugin('Flash'));
document.write(hasPlugin('QuickTime'));
document.write(hasPlugin('Java'));

1.3 使用location对象

location对象存储当前页面与位置相关的信息,表示当前显示文档的Web地址。使用location对象,结合字符串方法可以抽取URL中查询字符串的参数值。

用法1:

var queryString = function () {
var q = location.search.substring(1);
var a = q.split('&');
var o = {};
for (var i = 0; i < a.length; i++) {
var n = a[i].indexOf('=');
if (n == -1) continue;
var v1 = a[i].substring(o, n);
var v2 = a[i].substring(n + 1);
o[v1] = unescape(v2);
}
return o;
}; var f1 = queryString();
for (var i in f1) {
document.write(i + '=' + f1[i]);
}

用法2跳转网页。

location = 'http://www.bj-xinhua.com/?bdpz';

1.4 使用history对象

      history对象存储浏览器窗口的浏览历史,通过window对象的history属性可以访问该对象。实际上,history对象存储最近访问的、有限条目的URL信息。为了保护客户端浏览信息的安全和隐私,history对象禁止Js脚本直接操作这些访问信息。

history对象允许使用length属性读取列表中URL的个数,并可以调用back()、forward()和go()方法访问数组中的URL。

  1. back():返回到前一个URL。

  2. forward():访问下一个URL。

  3. go():该方法比较灵活,它能根据参数决定可访问的URL。

  • 该参数是正整数,浏览器就会在历史列表中向前移动;该参数是负整数,浏览器就会在历史列表中向后移动;
  • 参数为一个字符串,则history对象能够从浏览历史中检索包含该字符串的URL,并访问第一个检索到的URL。

下面用法:

frames[1].history.back();

1.5 使用screen对象

screen对象存储客户端屏幕信息,这些信息可以用来探测客户端硬件的基本配置。满足不同用户的显示要求。

下面用法:

function center(url) {
var w = screen.availWidth / 2;
var h = screen.availHeight / 2;
var t = (screen.availHeight - h) / 2;
var l = (screen.availWidth - w) / 2;
var p = 'top=' + t + ',left=' + l + ',width=' + w + ',height=' + h;
var win = window.open(url, 'url', p);
win.focus();
}
center('file:///D:/jsBOM%E6%93%8D%E4%BD%9C/11history.html');

1.6 使用document对象

在浏览器窗口中,每个widow对象都会包含一个document属性,该属性引用窗口中显示HTML文档的document对象。

1.6.1 动态生成文档内容

下面用法:

window.onload = function () {
document.body.onclick = f;
}
function f() {
parent.frames[1].document.open();
parent.frames[1].document.write('<h2>我是程序员</h2>');
parent.frames[1].document.close();
}

JavaScriptBOM操作的更多相关文章

  1. JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)

    JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM ​      B ...

  2. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  3. Sql Server系列:分区表操作

    1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...

  4. C# ini文件操作【源码下载】

    介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...

  5. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. ASP.NET Aries 入门开发教程7:DataGrid的行操作(主键操作区)

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  8. 如何在高并发环境下设计出无锁的数据库操作(Java版本)

    一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...

  9. 【翻译】MongoDB指南/CRUD操作(四)

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...

  10. 【翻译】MongoDB指南/CRUD操作(三)

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...

随机推荐

  1. mac pro在公司连WiFi正常,回家回宿舍就找不到WiFI信号,需要重启才能找到WiFI热点

    解决办法:修改路由器的频段到1-11这个范围. 之前一直没时间去找原因,项目也急,这几天项目不是特别急了,就找找了,原因. 因为之前还是好好的,主要是之前有次修改了下路由器的配置. 改了下默认的发送频 ...

  2. 李洪强 - C语言8-Scanf函数

    C语言的scanf函数 一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位 每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...

  3. MySQL数据库系统概述

    了解MySQL数据库管理系统,内容如下:   一.基于数据库的PHP项目       目前动态网站都是基于数据库,将网站内容使用数据库管理系统去管理       用户, 栏目, 图片, 文章, 评论都 ...

  4. UVA1620-Lazy Susan(思维+逆序对)

    Problem UVA1620-Lazy Susan Accept: 81  Submit: 375Time Limit: 3000 mSec Problem Description There ar ...

  5. 【2013Esri全球用户大会精彩案例】GIS for Philadelphia’s Finest --费城警用GIS

     行业领域:警务   拥有6000多警员和侦探的费城警察局,历时三年,搭建了费城警用GIS,目前可以对每天发生的事进行汇总(如图1),并可动态的进行热点分析(如图2).区域指挥官可方便的查看警员的活动 ...

  6. Curious Array CodeForces - 407C (高阶差分)

    高阶差分板子题 const int N = 1e5+111; int a[N], n, m, k; int C[N][111], d[N][111]; signed main() { scanf(&q ...

  7. InstaGAN: Instance-Aware Image-to-Image Translation

  8. 【POJ 2409】Let it Bead

    http://poj.org/problem?id=2409 Burnside引理:设\(G\)是\(X\)的置换群,而\(\mathcal{C}\)是\(X\)中一个满足下面条件的着色集合:对于\( ...

  9. simpson公式求定积分(模板)

    #include<cstdio> #include<cmath> #include <algorithm> using namespace std; double ...

  10. 再回首数据结构—AVL树(一)

    前面所讲的二叉搜索树有个比较严重致命的问题就是极端情况下当数据以排序好的顺序创建搜索树此时二叉搜索树将退化为链表结构因此性能也大幅度下降,因此为了解决此问题我们下面要介绍的与二叉搜索树非常类似的结构就 ...