WEB前端—— JavaScript 对象模型
Posted 会璇转地木马
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WEB前端—— JavaScript 对象模型相关的知识，希望对你有一定的参考价值。
BOM 对象：
BOM 对象也称为内置对象（Browser Object Mode），是浏览器对象模型，也是javascript 的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM对象。可以理解为：window：document location navigator screen history。
window 对象：
window 对象表示浏览器窗口，所有浏览器都支持 window 对象，所有 JavaScript 全局对象，函数及变量均自动成为 window 对象的成员，其中全局变量是 window 对象的属性，全局函数是 window 对象的方法。
window 对象的常用方法如下：
*获取窗体的宽和高：有3种方法能够确定浏览器窗口的尺寸（浏览器窗口的宽和高不包括工具栏的宽和高，以及滚动条的宽和高）。
其中，对IE，Chrome，Firefox，Opera及Safari:
window.innerHeight:浏览器窗口的内部高度
window.innerWidth:浏览器窗口的内部宽度对IE8，IE7，IE6，IE5:
document.documentElement.clientHeight
document.documentElement.clientWidth
*打开新窗口：
window.open(url); //弹出一个新窗口*关闭当前窗口：
window.close(); //关闭当前窗口*调整当前窗口的尺寸：
window.resizeTo(宽,高); //重新设置窗口大小需要注意的是，从Firefox7开始，可以用 resizeTO 或者 resizeBy 改变窗口大小的仅仅是那些用 window.open 打开的页面，并且window.open 打开的窗口只能有一个Tab（标签页）其他窗口的大小不可以调整。
document 对象：
每个载入浏览器的 html 文档都会成为 document 对象，document 对象是 window 对象的一部分，可以通过window.document 属性对其进行访问，此对象可以从脚本中对 HTML 页面中的所有元素进行访问。
| 属性和方法 | 描述 |
| document.bgColor | 设置页面的背景色 |
| document.fgColor | 设置前景色（文本颜色） |
| document.linkColor | 未点击过的链接颜色 |
| document.alinkColor | 激活链接（焦点在此链接上）的颜色 |
| document.vlinkColor | 已点击过的链接颜色 |
| document.URL | 设置URL属性，从而在同一窗口打开另一网页 |
| document.cookie | 设置和读出cookie |
| document.write() | 动态地向页面写入内容 |
| document.createElement(Tag) | 创建一个HTML标签对象 |
| document.getElementById(ID) | 获取指定ID值的对象 |
| document.getElementsByName(Name) | 获取指定Name指的对象 |
| document.body | 指定文档文体的开始和结束，等价于<body></body> |
| document.location.href | 完整URL |
| document.location.reload() | 刷新当前页面 |
| document.location.reload(URL) | 打开新的页面 |
location 对象：
location 对象包含有关当前 URL 的信息，location 对象是 window 对象的一个部分，可以通过 window.location 属性访问。
| 属性和方法 | 描述 |
| location.href | 显示当前网页的URL链接 |
| location.port | 显示当前网页链接的端口 |
| location.reload() | 重新刷新当前页面 |
navigator 对象：
navigator 对象包含有关浏览器的信息，所有浏览器都支持该对象。
| 属性 | 描述 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
screen 对象：
每个 window 对象的 screen 属性都引用一个 screen 对象。screen 对象中存放有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息优化它们的输出，已达到用户的显示要求。
| 属性 | 描述 |
| availHeight | 返回显示屏幕的高度（除Windows 任务栏之外） |
| availWidth | 返回显示屏幕的宽度（除Windows任务栏之外） |
| bufferDepth | 设置或者返回调色板的比特深度 |
| colorDepth | 返回目标设备或者缓冲器上的调色板的比特深度 |
| deviceXDPI | 返回显示屏幕的每英寸水平点数 |
| deviceYDPI | 返回显示屏幕的每英寸垂直点数 |
| fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑 |
| Height | 返回显示器屏幕的高度 |
| logicalXDPI | 返回显示器屏幕每英寸的水平方向的常规点数 |
| logicalYDPI | 返回显示器屏幕每英寸的垂直方向的常规点数 |
| pixeIDepth | 返回显示器屏幕的颜色分辨率（比特每像素） |
| updateInterval | 设置或者返回屏幕的刷新率 |
| Width | 返回显示器屏幕的宽度 |
history 对象：
history 对象包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可以通过 window.history 属性对其进行访问，所有浏览器都支持该对象。
| 属性和方法 | 描述 |
| history.length | 返回浏览器历史列表中的 URL 数量 |
| history.back() | 加载 history 列表中的前一个 URL |
| history.forward() | 加载 history 列表中的下一个 URL |
BOM 操作：
下面将通过运用实例进行介绍：
*window 对象获得宽和高：
//跨浏览器兼容获取屏幕宽和高
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
alert(w + ':'+h);
*document 对象设置背景色和前景色：
<script>
window.onload = function(){ //网页加载完成后调用
document.bgColor = "#0fff00"; //设置网页背景色
document.fgColor = "#0000ff"; //设置网页前景色（页面上的文字颜色）
}
</script>
<body>
hello,world
</body>
*location 对象获取当前页面的 URL 链接和端口。
<script>
window.onload = function(){ //网页加载完毕后调用
alert(location.href); //弹出当前页面的URL链接
alert(location.port); //弹出当前页面访问的端口
}
</script>
*navigator 对象获取浏览器名称，平台版本信息，是否启用 cookie 状态，操作系统平台等。
<script>
window.onload = function(){ //网页加载完毕后调用
//返回浏览器的名称
document.write(navigator.appName + "<br/>");
//返回浏览器的平台和版本信息
document.write(navigator.appVersion + "<br/>");
//返回指明浏览器中是否启用 cookie 的布尔值
document.write(navigator.cookieEnabled + "<br/>");
//返回运行浏览器的操作系统平台
document.write(navigator.platform + "<br/>");
}
</script>
*screen 对象获取浏览器显示屏幕的宽和高，以及显示器屏幕的宽和高。
<script>
window.onload = function(){ //网页加载完毕后调用
document.write(screen.availHeight + "<br/>"); //返回浏览器显示屏幕的高度
document.write(screen.availWidth + "<br/>"); //返回浏览器显示屏幕的宽度
document.write(screen.height + "<br/>"); //返回浏览器屏幕的高度
document.write(screen.width + "<br/>"); //返回浏览器屏幕的宽度
}
</script>
*history 对象获取网页链接的长度：
len = history.length; //获取网页访问过的网页链接的长度
alert(len);
//history.back(); //回到上一次访问的页面
//history.forward(); //如果回去过了，就前进到下一个访问过的页面
//history.go(-2); //回到上上次访问的页面以上是关于WEB前端—— JavaScript 对象模型的主要内容，如果未能解决你的问题，请参考以下文章