BOM(浏览器对象模型)

BOM(浏览器对象模型)简介

BOM是Browser Object Model的简写，即是浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改客户端浏览器的属性的方法。其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM没有统一的标准（每种客户端都可以自定标准）

JavaScript语法的标准化组织是ECMA
DOM的标准化组织是W3C
BOM没有缺乏标准，BOM最初是Netscape浏览器标准的一部分

window对象

window，中文是“窗口”的意思。window对象代表一个浏览器或一个框架。window对象会在<body>或<frameset>每次出现时被自动创建。

JavaScript中任何一个全局函数或变量都是window的属性

window对象除了是BOM中所有对象的父对象外，还包含一些常用属性、方法。

window.方法和window.属性就可以访问了。

存在兼容性的属性、方法：状态栏属性status

过时的属性、方法：打开新窗口的open()、框架集合对象frames[]、与窗口操作有关的属性、方法：name、pageXOffset、pageYOffset、moveTo()、moveBy()等

常用的属性和方法：

alert()：显示带有一段信息和一个确认按钮的警告框

window.alert("qqq");

alert("111"); //不加window也可以调用

confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框

if(confirm("您是否要关闭窗口？")){

console.log("是");

}else{

console.log("否");

}

close()：关闭浏览器窗口

print()：打印当前窗口的内容

scrollBy()：按照指定的像素值来滚动内容

scrollTo()：把内容滚动到指定的坐标

clearInterval()：取消由setInterval()设置的timeout

clearTimeout()：取消由setTimeout()设置的timeout

setInterval()：按照指定的周期（以毫秒计算）来调用函数或计算表达式

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

setInterval()与setTimeout()的相同与不同：

相同：语法一样，都是一个周期执行一个函数

不同：setTimeout()只会执行一次，setInterval()按照周期去循环执行

setTimeout()与setInterval() 相比，编码要少一些，但做复杂控制时， setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。在使用setTimeout()或setInterval() 的时候，一定要注意的他们的返回值的问题，否则会出现各种异常。

location对象

location对象是属于window对象的子对象

location对象是由JavaScript runtime engine自动创建的，包含有关当前url信息

常用属性：

hash：设置或返回从#号开始的url

host：设置或返回主机或当前的url的端口号

hostname：设置或返回当前的URL主机名

href：设置或返回完整的URL

pastname：设置或返回当前URL的路径部分

port：设置或返回当前URL的端口号

protocol：设置或返回当前URL的协议

search：设置或返回从问号（？）开始的URL（查询部分）

常用方法：

assign()：加载新的文档

reload()：重新加载当前文档

replace()：用新的文档替代当前文档

利用自己的服务器测试了一下，就是有点不太好

history对象

history对象是属于window对象的子对象

后退、前进

history对象是由JavaScript runtime engine自动创建的，由一系列的url组成。这些url是用户在一个浏览器窗口内已访问的url

方法：

back()：加载history列表中的上（前）一个URL

forward()：加载history列表中的下一个URL

go()：加载history列表中的某一个具体页面

navigator对象

判断浏览器版本、浏览器兼容性（版本问题）

navigator对象是由JavaScript runtime engine自动创建的，包含有关客户机浏览器的信息。

常用属性：

appCodeName：返回浏览器的代码号

appName：返回浏览器的名称

appVersion：返回浏览器的平台和版本信息

cookieEnabled：返回指明浏览器中是否启用cookie的布尔值

platform：返回运行浏览器的操作系统平台

userAgent：返回由客户机发送服务器的user-agent头部的值

回话机制：所有的网页都能访问到回话里面的数据

screen对象

screen 对象是属于Window对象的子对象。

screen对象是由 JavaScript runtime engine 自动创建的，含有关客户机显示屏幕的信息。

常用属性：

availHeight：返回显示屏幕的高度（除window任务栏之外）

availWidth：返回显示屏幕的宽度（除window任务栏之外）

bufferDepth：设置或返回在off-screen bitmap buffer中调色板的比特深度

colorDepth：返回目标设备或缓冲器上的调色板的比特深度

deviceXDPI：返回显示屏幕的每英寸水平点数

deviceYDPI：返回显示屏幕的每英寸垂直点数

fontSmoothingEnabled：返回用户是否在显示控制面板中启用了字体平滑

height：返回显示屏幕的高度

width：返回显示屏幕的宽度

logicalXDPI：返回显示屏幕每英寸的水平方向的常规点数

logicalYDPI：返回显示屏幕每英寸的垂直方向的常规点数

pixelDepth：返回显示屏幕的颜色分辨率（比特每像素）

updateInterval：设置或返回屏幕的刷新率

document对象

document对象是window对象的子对象。

document对象的独特之处是它是唯一一个既属于BOM 又属于DOM的对象。

从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。再有，由于BOM没有可以指导实现的标准，所以每个浏览器实现的document对象都稍有不同，这一节的重点是最常用的功能。

常用属性：

cookie：设置或返回与当前文档有关的所有cookie

domain：返回当前文档的域名

referrer：返回载入当前文档的文档的URL

title：返回当前文档的标题

URL：返回当前文档的URL

常用方法：

getElementById()：返回对拥有指定 id 的第一对象的引用

getElementsByName()：返回对拥有指定名称的对象集合

getElementsByTagName()：返回对拥有指定标签名称的对象集合

write()：向文档写HTML表达式或JavaScript代码

writeIn()：等同于write()方法，不同的是每个表达式之后加一个换行符

代码：

<!DOCTYPE html>

<head>

<title>BOM的使用</title>

<style>

.box{

border: 1px solid #e2e2e2;

float: left;

width: 150px;

height: 50px;

text-align: center;

line-height: 50px;

cursor: pointer;

margin-left: 80px;

}

#scoll{

width: 80px;

height: 200vh;

background-color: palevioletred;

font-size: 20px;

}

#flexd{

position: fixed;

bottom: 50px;

right: 50px;

background-color: purple;

width: 80px;

height: 80px;

cursor: pointer;

}

</style>

</head>

<body>

<div class="box">关闭计数器</div>

山有木兮木有枝，心悦君兮君不知。

</div>

<hr>

<div class="box">返回上一层</div>

<div class="box">前进到第三个</div>

let open = document.getElementsByClassName("box"),

tscoll = document.getElementById("flexd"),

newwindow = null,

timer = null;

open[0].onclick = function (){

newwindow = window.open("two.html","scrollbars=yes, width=400, height=200");

newwindow.focus(); //focus的作用是使新窗口保持在最前面

}

open[1].onclick = function (){

newwindow.close();

}

tscoll.onclick = function (){

// window.scrollTo(0,0); //返回到顶部，x轴，y轴

window.scrollBy(100,100); //按照指定的像素值来滚动内容

}

let i = 0;

// open[2].onclick = function(){

// timer = window.setInterval(function (){

// open[2].innerHTML = "计时：" + i;

// i++;

// },1000)

// }

// open[3].onclick = function(){

// window.clearInterval(timer);

// }

open[2].onmousemove = function(){

timer = window.setTimeout(function (){

open[2].innerHTML = i;

console.log("11");

i++;

},1000)

}

open[3].onclick = function(){

window.clearTimeout(timer);

}

document.write('<p>返回从井号 (#) 开始的 URL（锚）:'+window.location.hash+'</p>');

document.write('<p>返回主机名和当前 URL 的端口号:'+window.location.host+'</p>');

document.write('<p>返回当前 URL 的主机名:'+window.location.hostname+'</p>');

document.write('<p>返回完整的 URL:'+window.location.href+'</p>');

document.write('<p>返回当前 URL 的路径部分:'+window.location.pathname+'</p>');

document.write('<p>返回当前 URL 的端口号:'+window.location.port+'</p>');

document.write('<p>返回当前 URL 的协议:'+window.location.protocol+'</p>');

document.write('<p>返回从问号 (?) 开始的 URL（查询部分）:'+window.location.search+'</p>');

document.write('<hr>');

open[4].onclick = function(){

window.history.back();

}

open[5].onclick = function(){

window.history.forward();

}

open[6].onclick = function(){

window.history.go(3);

}

document.write('浏览器的代码名:' + window.navigator.appCodeName + '<br/>');

document.write('浏览器的名称:' + window.navigator.appName + '<br/>');

document.write('浏览器的平台和版本信息:' + window.navigator.appVersion + '<br/>');

document.write('浏览器中是否启用了cookie:' + window.navigator.cookieEnabled + '<br/>');

document.write('运行浏览器的操作系统:' + window.navigator.platform + '<br/>');

document.write('user-agent头部信息:' + window.navigator.userAgent + '<br/>');

document.write('<hr>');

document.write('<p>屏幕的高度 (除 Windows 任务栏之外):'+window.screen.availHeight+'</p>');

document.write('<p>屏幕的宽度 (除 Windows 任务栏之外):'+window.screen.availWidth+'</p>');

document.write('<p>调色板的比特深度:'+window.screen.colorDepth+'</p>');

document.write('<p>屏幕的高度:'+window.screen.height+'</p>');

document.write('<p>屏幕的宽度:'+window.screen.width+'</p>');

document.write('<hr>');

document.write('<p>当前文档有关的所有 cookie：' + document.cookie +'</p>');

document.write('<p>当前文档的域名：' + document.domain +'</p>');

document.write('<p>载入当前文档的文档的 URL：' + document.referrer +'</p>');

document.write('<p>当前文档的标题：' + document.title +'</p>');

document.write('<p>当前文档的 URL：' + document.URL +'</p>');

</script>

</body>

</html>

效果：

JavaScript的BOM相关内容

BOM(浏览器对象模型)