BOM 操作

BOM（Browser Object Model，浏览器对象模型）提供了一系列对象，用于访问浏览器的功能。这些功能由各浏览器厂商自行实现，缺乏统一标准，不同浏览器之间存在差异。由于部分 BOM 操作权限较高（如关闭浏览器窗口），某些浏览器会限制其使用，因此在实际开发中应尽量减少对 BOM 的依赖。

元素位置属性

client 系列

元素.clientWidth 元素的可视宽（width + 左右 padding）
元素.clientHeight 元素的可视高（height + 上下 padding）
元素.clientTop 上边框的高度（border-top-width）
元素.clientLeft 左边框的高度（border-left-width）

offset 系列

元素.offsetWidth (width+padding+border)
元素.offsetHeight (height+padding+border)
元素.offsetTop 元素顶部到定位父元素的距离(没有定位父元素，则到 body)
元素.offsetLeft 元素左边到定位父元素的距离(没有定位父元素，则到 body)

scroll 系列

元素.scrollTop 被卷去的高
元素.scrollLeft 被卷去的宽
元素.scrollWidth 元素实际内容宽
元素.scrollHeight 元素实际内容高

window 对象

所有的浏览器都支持 window 对象。在浏览器中，window 对象有着双重角色：它既是 JavaScript 访问浏览器窗口的接口，也是 ECMAScript 规定的全局（Global）对象。

window.alert("我是一个警告框");//弹出一个警告框
window.confirm("是否重置");//返回一个Boolean值
window.prompt("提示信息", 默认值);//以字符串返回用户输入的值
open()//打开一个窗口
close()//关闭窗口,如果没有参数默认关闭当前窗口

location 对象

location 是最有用的 BOM 对象之一，它提供了当前窗口加载的文档有关的信息，还提供了一些导航功能。location 既是 window 对象的属性，也是 document 对象的属性。

hash "#contents" 返回 URL 中的 hash（#号后跟零或多个字符），如果 URL 中不包含散列，则返回空字符串
host "www.wrox.com:8080" 返回服务器名称和端口号（如果有）
hostname "www.wrox.com" 返回不带端口号的服务器名称
href "http://www.wrox.com" 返回当前加载页面的完整 URL。而 location 对象的 toString() 方法也返回这个值
pathname "/WileyCDA/" 返回 URL 中的目录和（或）文件名
port "8080" 返回 URL 中指定的端口号。如果 URL 中不包含端口号，则这个属性返回空字符串
protocol "http:" 返回页面使用的协议，通常是 http: 或 https:
search "?q=javascript" 返回 URL 的查询字符串，该字符串以问号开头。可通过 console.log(location.search) 获取

history 对象

history 对象保存了用户的上网记录

history: 历史记录 console.log(window.history);
go(): 跳转页面
back(): 返回
forward(): 前进

navigator 对象

navigator 对象的属性用于检测网页的浏览器类型

<script type="text/javascript">
	console.log(window.navigator);
	window.onload = function() {
		var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
		txt += "<p>浏览器名称: " + navigator.appName + "</p>";
		txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
		txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
		txt += "<p>硬件平台: " + navigator.platform + "</p>";
		txt += "<p>用户代理: " + navigator.userAgent + "</p>";
		txt += "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
		document.write(txt);
	}
</script>

# BOM 操作

# 元素位置属性

# window 对象

# location 对象