js之BOM教程

导语:今天开始介绍一篇有关BOM知识点的总结文章。

BOM顾名思义,就是游览器对象模型,英文是Browser Object Model的简称。这个套模型定义了JavaScript如何操作游览器窗口以及获取游览器本身的一些信息,包括窗口的各种高度和宽度,滚动高度和宽度,历史纪录,url的相关信息,游览器的相关信息等知识。

# Window对象

在游览器中,javascript的Window对象就等同于全局对象,并且在该全局对象下定义的属性和方法也就等同于Window对象的属性和方法。

例如:一个变量和一个函数

var i=10;
console.log(window.i) // 10;
function fn() { console.log('fn'); }
console.log(window.fn) // ƒ fn() { console.log('fn'); }
1
2
3
4

Window对象自身有很多的属性和方法,以下是几种Window对象中常用的属性和方法。这些方法由于是Window对象下面的方法,所以可以省略不写。

# 窗口信息

这个有些方法ie是document.documentElement.方法,谷歌火狐是document.body.方法。

  • 外边框的宽高 用法:宽,window.outerWidth;高window.outerHeight。

例如:

console.log('外边框的宽高:'+window.outerWidth+'*'+window.outerHeight); // 外边框的宽高:1536*824
1
  • 内边框的宽高

用法:宽,window.innerWidth;高window.innerHeight

例如:

console.log('内边框的宽高:'+window.innerWidth+'*'+window.innerHeight); // 内边框的宽高:1164*723
1
  • 可视窗口的宽高

用法:宽,document.documentElement.clientWidth;高document.documentElement.clientHeight

例如:

console.log('可视窗口的宽高:'+document.documentElement.clientWidth+'*'+document.documentElement.clientHeight); // 可视窗口的
宽高:1164*723
1
2
  • 滚动窗口的坐标

用法:宽,window.scrollX;高window.scrollY

例如:

console.log('滚动窗口的坐标:'+window.scrollX+'*'+window.scrollY); // 滚动窗口的坐标:0*0
1
  • 滚动窗口的左上

用法:左,document.documentElement.scrollLeft;上document.documentElement.scrollTop

例如:

console.log('滚动窗口的左上:'+document.documentElement.scrollLeft+'*'+document.documentElement.scrollTop); // 滚动窗口的左上:0*0
1
  • 元素的宽高左右

用法:

左:document.documentElement.offsetLeft;

上:document.documentElement.offsetTop,

宽:document.documentElement.offsetWidth,

高:document.documentElement.offsetHeight。

例如:

<div class="box" style="margin:10px;width:100px;height:100px;">盒子</div>
1
var box = document.querySelector('.box');
console.log('元素距离距离窗口的宽高:'+box.offsetWidth+'*'+box.offsetHeight); // 元素距离距离窗口的宽高:100*100
console.log('元素距离距离窗口的左右:'+box.offsetLeft+'*'+box.offsetTop); // 元素距离距离窗口的左右:18*106
1
2
3

# 屏幕信息

这个是Screen对象的有关属性,Window对象的screen属性就是引用的Screen对象。

  • 显示器的大小

用法:宽window.screen.width,高window.screen.height

例如:

console.log('显示器的大小:'+window.screen.width+'*'+window.screen.height); // 显示器的大小:1536*864
1
  • 实际可用的显示大小

用法:宽window.screen.availWidth,高window.screen.availHeight

例如:

console.log('实际可用的显示大小:'+window.screen.availWidth+'*'+window.screen.availHeight); // 实际可用的显示大小:1536*824
1
  • 屏幕第一个可用位置的坐标

用法:宽window.screen.availLeft,高window.screen.availTop

例如:

console.log('屏幕第一个可用位置的坐标:'+window.screen.availLeft+'*'+window.screen.availTop); // 屏幕第一个可用位置的坐标:0*0
1

# 对话框

对话框就是你可以对它进行操作,但是用户体验稍微差点,所以后来慢慢的,这个对话框就变成了程序完成后调试bug的作用了。

对话框还有一点就是,它阻塞了游览器解析进程,你需要对当前对话框进行操作完成后才能进行下一项渲染,或者是看见了页面内容,或者是开始其他操作。

  • alert()

这个方法就是一个简单的对话框,里面接受一个字符作为显示在游览器窗口的内容。向用户显示信息并且需要用户手动关闭。

用法:window.alert(<内容>);,这个方法是Window对象下面的方法,所以可以省略不写。

这样也可以执行的alert(<内容>);

例如:window.alert('欢迎光临本网站!');

  • confirm()

这个方法就是一个简单的对话框,里面需要输入内容,有两个按钮,一个是确定,另一个是取消。它的返回值是布尔值,当你点击确定,会返回true;当你点击取消,会返回false。

用法:confirm(<内容>);

例如:

var res = confirm('你过年回家吗?');
console.log(res ? '我回家' : '我不回家'); // 点击确定:我回家;点击取消: 我不回家
1
2
  • prompt()

这个方法就是一个简单的对话框,里面需要输入一个字符串,有两个按钮,一个是确定,另一个是取消。它的返回值是你输入框中的内容,当你点击确定,会返回输入框的内容;当你点击取消,会返回null。

用法:prompt(<字符串>);

例如:

var res = prompt('你喜欢吃什么小吃?'); // 你可以输入任何字符串,例如我输入了沙县小吃
console.log(res); // 点击确定:沙县小吃;点击取消: null
1
2

# 定时器

定时器是web客户端里面定义的一个全局方法,核心的JavaScript并没有定义这个方法。

定时器的功能就是在未来某个时间进行某段代码的执行,可以有一次的或者多次的执行。

注意:setTimeout只执行一次,setInterval可以一直连续的执行。

  • setTimeout()

这个方法就是用来使一个函数在指定的时间内(单位是毫秒ms)过去之后执行。这个有时候被拿来模拟ajax异步操作。

用法:setTimeout(fn,time);,第一个参数就是一个函数或者函数的名称,第二个参数就是时间。

例如:一秒后打印我爱你

//1.函数名称
setTimeout(fn,1000);
function fn() {
  console.log('我爱你'); // 我爱你
}
//2.函数
setTimeout(function(){
  console.log('我爱你'); // 我爱你
},1000);
1
2
3
4
5
6
7
8
9
  • clearTimeout()

这个方法可以取消setTimeout方法中第一个参数函数的执行。

用法:clearTimeout(函数名称);,参数是setTimeout方法中第一个参数的函数名称。

例如:

var fn = setTimeout(function(){
  console.log('我爱你');
},3000);
clearTimeout(fn);
1
2
3
4
  • setInterval()

这个方法就是用来使一个函数在指定的时间内(单位是毫秒ms)重复的调用执行。这个有时候被拿来做模拟时钟或者动画。

用法:setInterval(fn,time);,第一个参数就是一个函数或者函数的名称,第二个参数就是时间。

例如:把当前时间显示在游览器窗口中,并且时间是动态走动。

<div id="time"></div>
1
//1.函数名称
var time = document.querySelector('#time');
var timer = setInterval(fn,1000);
function fn() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDay();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  month = month >= 10 ? month : '0' + month;
  day = day >= 10 ? day : '0' + day;
  hour = hour >= 10 ? hour : '0' + hour;
  minute = minute >= 10 ? minute : '0' + minute;
  second = second >= 10 ? second : '0' + second;
  time.innerHTML = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
//2.函数
var timer = setInterval(function(){
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDay();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  month = month >= 10 ? month : '0' + month;
  day = day >= 10 ? day : '0' + day;
  hour = hour >= 10 ? hour : '0' + hour;
  minute = minute >= 10 ? minute : '0' + minute;
  second = second >= 10 ? second : '0' + second;
  time.innerHTML = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
},1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • clearInterval()

这个方法可以取消setInterval方法中第一个参数函数的执行,停止重复调用这个函数。

用法:clearInterval(函数名称);,参数是setInterval方法中第一个参数的函数名称。

例如:要取消上面那个例子的时钟走动。

clearInterval(timer);
1

# 打开和关闭新窗口

这个可以打开或者关闭一个新窗口,但是随着时代经济的发展,越来越多的网站把它用于投放展示广告,导致很多游览器封杀了这两个方法,除非是用户自己点击新窗口。

  • open()

这个方法是可以打开一个新的窗口。

用法:open(一参,二参,三参,四参);,以下是参数说明:

  • 第一参数是你要打开新窗口的url;

  • 第二个参数是你要打开新窗口的名称,可以是a标签的target属性中的值,也可以自定义;

  • 第三个参数是新窗口的一些属性定义,比如说状态了,宽和高,也没有菜单栏等;

  • 第四个参数是是否覆盖掉当前的页面历史纪录,如果是true,那就覆盖掉,否则就新增一条历史记录。

例如:打开一个宽高为300*400的,显示状态栏的,内容为你好,世界,不覆盖当前url的历史纪录的一个新窗口。

<!-- 保存为new.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>新窗口</title>
</head>
<body>
  <h2>你好,世界</h2>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
function openNew() {
  window.open('new.html','width=200,height=200,status=yes',false);
}
openNew();
1
2
3
4
  • close()

这个方法是关闭当前的窗口网页。

用法:close();

例如:

function closeWin() {
  window.close();
}
closeWin();
1
2
3
4

# Location对象

这个Location对象提供了当前文档的url的一些信息,包括协议,域名,端口号,url参数等信息。

窗口的location属性引用的是Location对象。它代表当前文档的url信息。

# location的属性

用法:window.location,属性包括:

  • protocol 网页通信协议;

  • host 网页域名(包括域名和端口);

  • hostname 网页域名名字();

  • port 端口号

  • href 网页地址

  • hash 哈希值

  • search 参数内容(包括?号)

console.log('url信息:',window.location);
/* url信息:
Location {
  ancestorOrigins: DOMStringList {length: 0}
  assign: ƒ ()
  hash: ""
  host: "localhost:2009"
  hostname: "localhost"
  href: "http://localhost:2009/test.html"
  origin: "http://localhost:2009"
  pathname: "test.html"
  port: "2009"
  protocol: "http:"
  reload: ƒ reload()
  replace: ƒ ()
  search: ""
  toString: ƒ toString()
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# location的方法

  • reload();重新载入当前网页

location或者location.href; 载入新的网页url

  • replace(); 重新载入当前网页(会覆盖掉当前网页的历史纪录)

例如:

//1.重新载入当前网页
window.location.reload();
//2.载入新的网页url
window.location = 'test.html';
window.location.href = 'test.html';
//3.重新载入当前网页(会覆盖掉当前网页的历史纪录)
window.location.replace();
1
2
3
4
5
6
7

案例:解析url的参数

var url = 'http://www.abc.com/index?name=keke&type=1';
function getUrlArgs() {
  var args = new Object();
  var query = location.search.substring(1);
  var pairs = query.split('&');
  for(var i=0;i<pairs.length;i++) {
    var pos = pairs[i].indexOf('=');
    if (pos == -1) { continue; }
    var argname = pairs[i].substring(0,pos);
    var value = pairs[i].substring(pos+1);
    value = decodeURIComponent(value);
    args[argname] = value;
  }
  return args;
}
console.log(getUrlArgs()); // { name: "keke", type: "1" }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# History对象

这个History对象可以允许载入新的文档或者游览器后退或者前进游览过的文档。

窗口的history属性引用的是History对象。

  • forward()

这个方法可以使游览器载入到新文档,和游览器的前进箭头按钮功能一样。

用法:forward();,不需要传参。

例如:

function forwardTo() {
  history.forward();
}
forwardTo();
1
2
3
4
  • back();

这个方法可以使游览器后退到以前游览过的网页,和游览器的后退箭头按钮功能一样。

用法:back();,不需要传参。

例如:

function backTo() {
  history.back();
}
backTo();
1
2
3
4
  • go()

这个方法可以使游览器前进或者后退到以前游览过的网页。

用法:go();,需要传参,正参就是前进几个历史纪录,负参就是后退几个历史纪录。

例如:

function goTo(val) {
  history.go(val);
}
goTo(1);
goTo(-1);
1
2
3
4
5

这个Navigation对象可以储存的当前游览器的信息,包括版本号,app名称,游览器内核名称,系统版本等。

Window对象的navigator属性引用的是Navigation对象。

打印查看当前游览器信息直接执行console.log(window.navigator)就可以了。

常用的属性

  • appName,游览器的简称;

  • appVersion,游览器的内部版本号;

  • appCodeName,游览器的代码名称;

  • platform,运行游览器的硬件平台;

  • userAgent,用户代理,游览器在它的USER-AGENT HTTP头部发送字符串。

例如:打印当前游览器的信息

function getnNavigatorInfo() {
  var obj = new Object();
  var proArr = ['appName','appVersion','appCodeName','platform','userAgent'];
  for (var key in navigator) {
    for(var i=0;i<proArr.length;i++) {
      if (key == proArr[i]) {
        obj[key] = navigator[key];
      }
    }
  }
  return obj;
}
console.log(getnNavigatorInfo());
/*
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
platform: "Win32"
userAgent: "Mozilla/5.0 (Windows NT 10.0; ...
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 案例:检测游览器

  • 检测游览器名称
function checkBrowserName () {
  if (navigator.userAgent.indexOf('Chrome') != -1) {
    console.log('这是谷歌游览器');
  } else if (navigator.userAgent.indexOf('Trident') != -1 || navigator.appVersion.indexOf('MSIE') != -1 ) {
    console.log('这是ie游览器');
  } else if (navigator.userAgent.indexOf('Firefox') != -1) {
    console.log('这是火狐游览器');
  } else if (navigator.userAgent.indexOf('Opera') != -1) {
    console.log('这是Opera游览器');
  } else if (navigator.userAgent.indexOf('Safari') != -1) {
    console.log('这是Safari游览器');
  }
}
checkBrowserName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 检测ie游览器版本
function checkIeVersion () {
  var ie = navigator.userAgent.indexOf('Trident') == -1 ? false : true;
  var version = navigator.appVersion;
  console.log(version);
  var versionName = '';
  if (ie && version) {
    if (version.indexOf('rv:11.0') != -1) {
      versionName = 'ie11'
    } else if (version.indexOf('MSIE 10.0') != -1) {
      versionName = 'ie10'
    } else if (version.indexOf('MSIE 9.0') != -1) {
      versionName = 'ie9'
    } else if (version.indexOf('MSIE 8.0') != -1) {
      versionName = 'ie8'
    } else if (version.indexOf('MSIE 7.0') != -1) {
      versionName = 'ie7'
    }
  }
  return versionName;
}
console.log(checkIeVersion());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 写在最后

这期的BOM知识分享就结束了,希望可以用起来,细细体会这其中的神奇奥秘。

分享至:

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧